v149 · Web APIs · DOM

Selection Bounds

Select any text in the textarea below and watch createValueRange().getBoundingClientRect() and getClientRects() draw live bounding boxes over your selection. When text wraps to a new line, getClientRects() returns one rectangle per line — making it easy to position overlays precisely.

const range = textarea.createValueRange(selectionStart, selectionEnd);
const bounding = range.getBoundingClientRect(); // one rect spanning all lines
const perLine = range.getClientRects(); // one rect per visual line fragment
getBoundingClientRect() — bounding box of entire selection
—top
—left
—width
—height
—bottom
—right
getClientRects() — per-line rectangles
// Make a selection above to see per-line rects…

see also