v137 · selection api
Selection Direction Detector
Select text in the editor below — left-to-right or right-to-left — and watch the direction property (new in Chrome 137) update in real time. Also shows getComposedRanges() output: the anchor/focus node paths, start/end offsets, and collapsed state, all resolving through shadow boundaries.
Editor
selection.direction
selection.getComposedRanges()
Select some text here — drag left or right to control direction. Try selecting the word forward left-to-right, then select backward right-to-left. The direction badge updates immediately.
Live selection state
→ no selection
- direction
- none
- anchorOffset
- —
- focusOffset
- —
- selected text length
- 0
getComposedRanges() output
Make a selection to see getComposedRanges() output.
New in Chrome 137:
selection.direction returns
"forward" when the anchor (start) precedes the focus (end),
"backward" when the user dragged right-to-left, and "none"
for collapsed or empty selections. Previously you had to compare
anchorOffset and focusOffset manually — unreliable across
node boundaries. getComposedRanges() adds shadow-DOM awareness.