v149 · Web APIs · demo

Geometry Inspector

Select text in the textarea below and watch createValueRange().getBoundingClientRect() report the selection's pixel geometry in real time. The blue overlay rectangle tracks your selection.

Checking OpaqueRange support…

Select any text in the field below to see its bounding rect.

start— end— length— collapsed—
x (left)
—
y (top)
—
width
—
height
—
right
—
bottom
—
// Feature detection
const supported = typeof textarea.createValueRange === 'function';

// Create a live range over characters [start, end)
const opaqueRange = textarea.createValueRange(
  textarea.selectionStart,
  textarea.selectionEnd
);

// Get pixel geometry (viewport-relative, same as Element.getBoundingClientRect)
const rect = opaqueRange.getBoundingClientRect();
console.log(rect.x, rect.y, rect.width, rect.height);

// Note: startContainer / endContainer are always null (opaque)
console.log(opaqueRange.startContainer); // null
console.log(opaqueRange.startOffset);    // character index into .value
console.log(opaqueRange.collapsed);      // true if start === end

// The range is live — it stays valid as the value changes
// Call disconnect() to release it when done

see also