CSS text-box-edge Property

The text-box-edge property specifies which edge of an element’s text layout box should be used as the reference for alignment, clipping and baseline-related calculations in layout. Rather than describing how text is drawn, it picks the logical or physical edge of the “text box” — the rectangle that the formatting system computes around inline content — that other layout mechanisms use as their anchor. This allows authors to change the reference point used for vertical alignment and overflow clipping independently of metrics such as glyph bounding boxes or leading.

Because it affects the reference used for alignment and line box calculation, text-box-edge interacts closely with typographic and inline layout behavior. For example, changing the box edge can alter how adjacent inline boxes are aligned relative to one another and to the line box, producing different results from simply changing vertical-align or adjusting the element’s line-height. It is especially useful in multilingual and vertical-writing contexts where the meaningful “top” or “start” edge of text differs from Latin horizontal baselines; pairing it with the document’s writing direction and orientation lets you keep alignment consistent across scripts and rotations.

Beyond alignment, the chosen text-box edge can be used as the origin for clipping, hit-testing, and offset calculations (for example when positioning decorations or absolute children relative to inline text). That means changing the reference edge can affect how much of an inline element is visible when overflow is constrained and can shift the perceived position of inline-level positioned descendants. Because it governs a reference point rather than glyph metrics directly, it provides a stable, high-level knob for designers who need predictable alignment and clipping behavior across different fonts, sizes, and writing modes without having to micromanage glyph metrics or the element’s own box model.