OpaqueRange

concepts

1. OpaqueRange Demo

   Create an OpaqueRange on a textarea, query its bounding rect, and visualise it as an overlay. Demonstrates the basic OpaqueRange creation and geometry APIs.

2. Range Operations

   Explore all available operations on an OpaqueRange: bounding rect, individual character rects via getClientRects(), and integration with the CSS Custom Highlight API to highlight ranges without JavaScript text manipulation.

3. Autocomplete Overlay

   Type @ or : in the input and watch an autocomplete dropdown appear anchored to the caret position using OpaqueRange geometry. Arrow keys navigate; Enter inserts. The same positioning technique used by mention/emoji pickers in rich editors.

4. Text Search Highlighter

   Type a search term and watch every matching word in the textarea get highlighted using the CSS Custom Highlight API via OpaqueRange instances. Includes match count, next/previous navigation with the highlight jumping to the active match, and a case-sensitivity toggle.

5. CSS Highlight API Demo

   Integrate OpaqueRange with the CSS Custom Highlight API: register ranges under named highlights, style them with ::highlight(), and search for terms to highlight all matches — all without manipulating the textarea's DOM.

6. Multiline Geometry

   Select a character span that wraps across multiple lines and see how getClientRects() returns one rect per visual line. A canvas overlay draws both the bounding rect and the individual line rectangles side by side.

why it shipped

For editable elements like <input> and <textarea>, there was no way to get the geometry of a specific span of text within the control without reading the control's value (which third-party scripts embedded in a page could then exfiltrate). OpaqueRange gives the browser a handle to a text span that can report geometry and interact with rendering APIs — but the range is "opaque" in the sense that the endpoints are offsets within the control's value, not accessible as a string to untrusted code.

the API

const textarea = document.querySelector('textarea');

// Create an OpaqueRange spanning characters 5–15 of the textarea's value
const range = textarea.createOpaqueRange(5, 15);

// Get geometry (like Range.getBoundingClientRect())
const rect = range.getBoundingClientRect();
console.log(rect.top, rect.left, rect.width, rect.height);

// Individual character rects
const rects = range.getClientRects();

// CSS Custom Highlight API integration
const highlight = new Highlight(range);
CSS.highlights.set('my-highlight', highlight);

// CSS to style the highlight:
// ::highlight(my-highlight) { background: yellow; color: black; }

references

• ChromeStatus entry
• MDN — CSS Custom Highlight API
• MDN — Range