bisectRight()

Example

<div class="bisect-right" style="--x: 1">
  <i style="--value: 1"></i>
  <i style="--value: 2"></i>
  <i style="--value: 3"></i>
  <i class="x"></i>
  <b>
    <span><output></output></span>
  </b>
</div>

@property --result { syntax: '<integer>'; inherits: true; initial-value: 0; }
.bisect-right output::after { counter-reset: result var(--result); content: counter(result); }
.bisect-right { position: relative; display: flex; }
.bisect-right > i { flex: none; width: 1px; order: calc(2 * var(--value)); }
.bisect-right > .x { order: calc(2 * var(--x) + 1); anchor-name: --x-place; }
.bisect-right > b { position: absolute; left: 0; right: anchor(--x-place left); }
.bisect-right > b > span { display: block; container-type: inline-size; }
.bisect-right > b > span > output { --result: round(100cqw / 1px); }
/* only makes room for the answer */
.bisect-right { min-height: 1lh; }

bisect() is the same function: d3-array’s alias for bisectRight().

dCSS Example

With dCSS, an element whose class is named after the function (dCSS’s docs).

<link rel="stylesheet" href="dcss.css">
<link rel="stylesheet" href="families/array.css">

<figure class="dcss-bisect-right" style="--value: 1">
  <ol>
    <li style="--value: 1"></li>
    <li style="--value: 2"></li>
    <li style="--value: 3"></li>
  </ol>
  <output></output>
</figure>

Limits

These are the Example’s; the dCSS Example’s are in dCSS’s docs.

• whole numbers, the values and --x: order takes an <integer>, and calc() rounds a fraction to the nearest one, so on 1, 2, 3 --x: 1.6 reads 2, where d3 gives 1
• the numbers in any order: order sorts them, where d3 needs them sorted
• values and --x from −4,194,303 to 4,194,303 in Firefox 158, which computes order, twice the value, to a nearby even number past 8,388,608; from −1,073,741,823 to 1,073,741,823 in Chrome 155 and WebKit 26.4
• items 1px wide that do not shrink (flex: none), with no gap or margins
• the items packed at the row’s start, with no padding there: the box starts at the row’s padding edge (left: 0), so padding or justify-content adds its offset to the read
• the query container inside the anchored box, not the box itself: WebKit 26.4 reads 0 when a lone anchored box is the container (measured)
• no padding or borders on the query container: 100cqw reads its content box
• no example nested inside another’s row: an anchor name is the whole document’s, so the outer box takes the inner example’s anchor (400 for 200)
• no other registration of --result on the page: a later @property --result that doesn’t inherit leaves the read right and the counter at 0

Browser support

Each row gives the first versions that support every feature its example uses, by MDN’s browser-compat-data. The Example was run in Chrome 155, Safari’s WebKit 26.4 and Firefox 158, the dCSS Example in Chrome 155 and Safari’s WebKit 26.4.