Contact emails [email protected]<mailto:[email protected]>, [email protected]<mailto:[email protected]>, [email protected]<mailto:[email protected]>, [email protected]<mailto:[email protected]> Explainer https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/OpaqueRange/explainer.md<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FMicrosoftEdge%2FMSEdgeExplainers%2Fblob%2Fmain%2FOpaqueRange%2Fexplainer.md&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C81a0a04d7bb341a3e49408dea5563241%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639129986872058065%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=qHzQqtSg2jDdVrEVcd3ms2PDr8nwb5KbNq7s8Z1%2Fpcc%3D&reserved=0> Specification https://github.com/whatwg/dom/pull/1404<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fwhatwg%2Fdom%2Fpull%2F1404&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C81a0a04d7bb341a3e49408dea5563241%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639129986872070768%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=KkvkSV5EI8Y%2Bo6vEs0kjkkP7xU6ydqCCH2yb5Zbpsy8%3D&reserved=0> Summary `OpaqueRange` represents a live span of text within a form control's value, such as a `<textarea>` or text-based `<input>`, so developers can work with value text using range-like APIs. It enables operations such as `getBoundingClientRect()`, `getClientRects()`, and integration with the CSS Custom Highlight API for UI such as inline suggestions, highlights, and anchored popovers. It preserves encapsulation by exposing only value offsets while returning `null` for `startContainer` and `endContainer`, so DOM endpoints and internal structure are not exposed. Blink component Blink>DOM<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fissues.chromium.org%2Fissues%3Fq%3Dcustomfield1222907%3A%2522Blink%253EDOM%2522&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C81a0a04d7bb341a3e49408dea5563241%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639129986872081509%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=HPwyv0vG7LVjeVQhvsiKMdcyxJaqervtEOH6YqMUYTg%3D&reserved=0> Web Feature ID Missing feature New feature ID for OpaqueRange * Issue #3863 * web-platform-dx/web-features<https://github.com/web-platform-dx/web-features/issues/3863>
Motivation Currently, developers can't get accurate text geometry or apply the CSS Custom Highlight API to text inside native `<textarea>` and text-based `<input>` controls. As a result, they often avoid native form controls and build editable `<div>`-based workarounds to anchor UI, such as autocomplete popovers, or to highlight matches. These workarounds require reimplementing native editing behavior and can have accessibility gaps. `OpaqueRange` enables range-based operations on the control's value text, so developers can measure text geometry and build text-anchored UI directly in native controls. Initial public proposal https://github.com/whatwg/html/issues/10614<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fwhatwg%2Fhtml%2Fissues%2F10614&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C81a0a04d7bb341a3e49408dea5563241%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639129986872101415%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=BKt7yavrtM8tgFneyHXhDqJCNVLuxh8wPpTh5eh%2FppQ%3D&reserved=0> TAG review https://github.com/w3ctag/design-reviews/issues/1206<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fw3ctag%2Fdesign-reviews%2Fissues%2F1206&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C81a0a04d7bb341a3e49408dea5563241%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639129986872111131%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=r2iH%2BQ9l72LwxV2s69aeHlP2E9m8iXutC25JNdF594c%3D&reserved=0> TAG review status Pending Origin Trial Name OpaqueRange Goals for experimentation Validate API design and gather developer feedback on whether the API meets their needs. Chromium Trial Name OpaqueRange Origin Trial documentation link https://www.youtube.com/watch?v=Sp9C68TZXiE WebFeature UseCounter name kOpaqueRange Risks Interoperability and Compatibility `OpaqueRange` adds new methods, such as `createValueRange()`, to `<textarea>` and supported text-based `<input>` elements so authors can create ranges over value text. It does not change existing editing or selection behavior, so the risk to existing sites is low. The main interoperability risk is lack of implementation across engines, which could make text-anchored UI or highlights inside native controls work in only some browsers. Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1289<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmozilla%2Fstandards-positions%2Fissues%2F1289&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C81a0a04d7bb341a3e49408dea5563241%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639129986872120773%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=QHBPgBumqgNIEJ%2B3RCSizi6y%2BYqCC6BOQZgacx0ZyEM%3D&reserved=0>) WebKit: No signal (https://github.com/WebKit/standards-positions/issues/541<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FWebKit%2Fstandards-positions%2Fissues%2F541&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C81a0a04d7bb341a3e49408dea5563241%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639129986872130815%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=d4mAnntEEzmtFS294m9idCHVZOx5CuunvtSl%2FHaHYUE%3D&reserved=0>) Web developers: Positive https://github.com/w3c/csswg-drafts/issues/4603: request for ranges inside `<textarea>`/`<input>` to support spellchecking/grammar highlights. https://github.com/w3c/csswg-drafts/issues/10346: request for selection/caret geometry in `<textarea>`/`<input>` to anchor autocomplete popovers and similar UI. https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/1104: developer feedback that `OpaqueRange` (previously `FormControlRange`) would be useful because existing overlay workarounds are hard to keep in sync and can visibly lag. Other signals: Ergonomics `OpaqueRange` is typically used with selection offsets and with geometry/highlighting APIs. The geometry calls are synchronous and can trigger layout, similar to existing `Range` geometry methods. Since the range is live, offsets are updated as the control's value is edited. Activation Moderate. Developers need to learn the value-offset model and how it differs from `Range` (there are no DOM endpoints). Security No new data exposure beyond existing access to form control values and selection. Exposes only value offsets and geometry and does not expose internal DOM (`startContainer`/`endContainer` are `null`). WebView application risks Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications? Low. `OpaqueRange` adds a new method to `<textarea>` and supported text-based `<input>` elements, but does not change or deprecate any existing behavior. Debuggability No DevTools changes required. Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)? Yes Works on all platforms that support `<input>` and `<textarea>` elements. Is this feature fully tested by web-platform-tests<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fchromium.googlesource.com%2Fchromium%2Fsrc%2F%2B%2Fmain%2Fdocs%2Ftesting%2Fweb_platform_tests.md&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C81a0a04d7bb341a3e49408dea5563241%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639129986872169769%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=7gMJYElkxzN5Bs5Hnns%2BTpasHNu3e974vzsod5Nw%2FYM%3D&reserved=0>? Yes https://wpt.fyi/results/dom/ranges/tentative?label=experimental&label=master&aligned<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwpt.fyi%2Fresults%2Fdom%2Franges%2Ftentative%3Flabel%3Dexperimental%26label%3Dmaster%26aligned&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C81a0a04d7bb341a3e49408dea5563241%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639129986872179399%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=BoQHWaf8mMxkz6HDuaRR4L%2FEmba7AAaeNFmOj%2Bncggo%3D&reserved=0> Flag name on about://flags No information provided Finch feature name OpaqueRange Rollout plan Will ship enabled for all users Requires code in //chrome? False Tracking bug https://issues.chromium.org/issues/421421332<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fissues.chromium.org%2Fissues%2F421421332&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C81a0a04d7bb341a3e49408dea5563241%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639129986872189082%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=bJL4Ql41Aj%2Bg3mB2XJfgclU%2BgkK8mud%2BrkgFiS3ZwkY%3D&reserved=0> Measurement UseCounter `OpaqueRange` measures successful creation of `OpaqueRange` objects on `<textarea>` and text-based `<input>` elements. Availability expectation Feature is available only in Chromium browsers for the foreseeable future. `OpaqueRange` is at WHATWG Stage 2 with informal approval of the current spec direction from Mozilla and WebKit reviewers and is moving toward Stage 3. We are continuing to seek official standards positions from Mozilla and WebKit. Adoption expectation Feature is expected to be used by specific partner(s) within 12 months of launch in Chrome. The Microsoft Editor SDK team has confirmed plans to adopt the feature and intends to land integration behind a switch ahead of ship. Adoption plan Stay engaged with Microsoft Editor SDK on rollout. Continue WHATWG work toward Stage 3; seek formal Firefox/WebKit positions. Monitor use counter and bug reports post-ship. Developer outreach already underway on Mastodon, Bluesky, YouTube, LinkedIn. Non-OSS dependencies Does the feature depend on any code or APIs outside the Chromium open source repository and its open-source dependencies to function? No Estimated milestones Shipping on desktop 149 Origin trial desktop first 148 Origin trial desktop last 150 DevTrial on desktop 148 Shipping on Android 149 Origin trial Android first 148 Origin trial Android last 150 DevTrial on Android 148 Shipping on WebView 149 Origin trial WebView first 148 Origin trial WebView last 150 Anticipated spec changes Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way). No known non-backward-compatible spec changes are expected. The spec PRs are under active review, and any remaining feedback is expected to be editorial or otherwise backward-compatible. Link to entry on the Chrome Platform Status https://chromestatus.com/feature/6297362687066112?gate=6322608320282624<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fchromestatus.com%2Ffeature%2F6297362687066112%3Fgate%3D6322608320282624&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C81a0a04d7bb341a3e49408dea5563241%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639129986872199016%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=PS%2F6dCcXujSjM5wRJeg4PQItZOUtpR10DiUmSM0kkKU%3D&reserved=0> Links to previous Intent discussions Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/LV9PR21MB5189A114B34C8A3685A3C4A4805CA%40LV9PR21MB5189.namprd21.prod.outlook.com<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgroups.google.com%2Fa%2Fchromium.org%2Fd%2Fmsgid%2Fblink-dev%2FLV9PR21MB5189A114B34C8A3685A3C4A4805CA%2540LV9PR21MB5189.namprd21.prod.outlook.com&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C81a0a04d7bb341a3e49408dea5563241%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639129986872209532%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=0R0lijpaaqqU98Cy4%2BMUKZFvSS98%2BLEX%2BgxN%2F97mUhw%3D&reserved=0> Intent to Experiment: https://groups.google.com/a/chromium.org/g/blink-dev/c/jrIXiBUbQm0<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgroups.google.com%2Fa%2Fchromium.org%2Fg%2Fblink-dev%2Fc%2FjrIXiBUbQm0&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C81a0a04d7bb341a3e49408dea5563241%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639129986872219502%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=WIBn3BC8npIdGiIZMXRihFMpjRK1XX%2BCB1Kj8iiOr8g%3D&reserved=0> This intent message was generated by Chrome Platform Status<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fchromestatus.com%2F&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C81a0a04d7bb341a3e49408dea5563241%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639129986872230077%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=N%2BjycMAQH6qmt4FMWiMCB1Az2XDQURi0edef9DX6AMg%3D&reserved=0>. -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/DM4PR00MB26251F0F777E6EB629B85F46EC342%40DM4PR00MB2625.namprd00.prod.outlook.com.
