v149 · Web APIs · DOM
Spellcheck Overlay
Custom spell-check and grammar UIs require drawing underlines precisely beneath specific words in a text field. Before OpaqueRange, this was impossible without duplicating the textarea with a mirrored shadow div. createValueRange(start, end) returns the pixel bounding box of any word span directly, so you can draw on a canvas overlay with zero DOM cloning.
Underline style
Running spell check…
Flagged words — click to toggle
see also
- Selection Bounds — live bounding rect of selected text
- Word Tooltip — tooltip positioned at clicked word
- Inline Annotation — annotation anchored to text span