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