TocTable of Contents

Css baseline 2026

Jurgen One minute to read

Overview of 2026 baseline css features

active-view-transition

The :active-view-transition pseudo-class matches the root element when a view transition is currently in progress. It gives you a hook to apply styles globally for the duration of any view transition, without having to target the specific pseudo-elements involved in the animation itself.

A common use case is disabling pointer events or suppressing certain UI elements while the transition plays, preventing user interaction from interfering with the animation.

1
2
3
4
5
6
7
8
9

:root:active-view-transition {
  /* Prevent clicks during the transition */
  pointer-events: none;
}

:root:active-view-transition .sidebar {
  /* Hide the sidebar while a transition is running */
  visibility: hidden;
}

:active-view-transition is a straightforward way to coordinate global state with the view transition lifecycle, complementing the more granular control offered by ::view-transition-old and ::view-transition-new.

Rcap unit

The rcap unit is the root-relative version of cap. Where cap measures the cap height of the current element’s font, rcap measures the cap height of the root element’s font — typically the <html> element — regardless of the font applied to the element being styled.

This mirrors the relationship between em and rem: rcap gives you a stable, consistent reference point that does not change as you nest elements with different font-size or font-family values.

1
2
3
4
5
6

.icon {
  /* Always sized relative to the root font's capital letters,
     not whatever font this component happens to use */
  width: 1rcap;
  height: 1rcap;
}

rcap is especially useful in design systems where you want decorative elements or spacing tokens to remain anchored to a single typographic baseline across an entire page, independent of local font overrides.

rch

The rch unit is the root-relative counterpart to ch. The ch unit represents the width of the “0” (zero) character in the current element’s font, making it useful for sizing text inputs or containers to a certain number of characters. rch does the same, but always references the root element’s font rather than the element’s own font.

This makes rch a predictable, globally stable unit for character-based measurements. When you have components that override the font family or size locally, using rch keeps any character-width-based sizing anchored to the root, avoiding unexpected layout shifts.

1
2
3
4
5

.code-block {
  /* Width expressed in terms of root font character width,
     even if this element uses a monospace font override */
  max-width: 80rch;
}

Like all root-relative units, rch is most valuable in systems that set a clear typographic baseline on the root element and want consistent measurements throughout the document.

rex

The rex unit is the root-relative version of ex. The ex unit represents the x-height of the current font — roughly the height of a lowercase “x” — and is commonly used for fine typographic adjustments. rex provides the same measurement, but always taken from the root element’s font.

Because x-height varies widely between typefaces, ex can produce very different results depending on what font is active on a given element. rex eliminates that variability by fixing the reference to the root font, giving you a stable unit for spacing and sizing decisions that need to feel optically connected to the base typography without being affected by local font changes.

1
2
3
4
5

.footnote {
  /* Consistent vertical spacing tied to root x-height,
     not the footnote's own smaller font */
  margin-top: 1rex;
}

rex fits naturally alongside rem and rcap as part of a family of root-anchored typographic units, each targeting a different characteristic of the root font.

Ric unit

The ric unit is the root-relative version of ic. The ic unit is similar to ch but instead of using the “0” character, it uses the “水” (CJK water ideograph) as its reference glyph, making it well-suited for sizing in CJK (Chinese, Japanese, Korean) typography where full-width characters are the norm.

ric applies the same concept but always references the root element’s font, providing a consistent baseline for CJK-aware sizing regardless of local font overrides on individual elements.

1
2
3
4
5

.article-body {
  /* Maximum line length expressed in CJK character units
     relative to the root font */
  max-width: 40ric;
}

For multilingual layouts where CJK and Latin text coexist, ric offers a stable typographic unit that stays anchored to a single reference point, helping keep proportions consistent across sections that may use different typefaces.

text-indent: each-line

The each-line keyword extends text-indent so that indentation applies not just to the first line of a block, but to every line that begins after a forced line break (like <br> or a newline in white-space: pre).

1
2
3
4
5

p { text-indent: 2em; }
/* Only the first line is indented */

p { text-indent: 2em each-line; }
/* First line AND every line after a <br> are indented */

Soft-wrapped lines (that wrap due to limited width) are NOT indented — only forced breaks.

1

p { text-indent: 2em hanging each-line; }

hanging reverses the direction (outdents the first line instead), while each-line applies the rule after forced breaks too.

Can be used for:

  • Poetry where each verse line should be indented
  • Script or dialogue formatting with forced line breaks
  • Legal documents with structured line-by-line indentation

text-indent: hanging

The hanging keyword inverts the direction of text-indent: instead of indenting the first line, it indents every line except the first — a hanging indent (also called an outdent).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* Standard indent — first line pushed in */
p { text-indent: 2em; }

/* Hanging indent — all lines except the first are pushed in */
p { text-indent: 2em hanging; }

/* Classic bibliography style */
.reference {
  text-indent: -2em hanging;
  padding-left: 2em;
}

A negative value with hanging creates the classic bibliography format: the first line starts at the left margin, and wrapped lines are indented.

Without hanging: indent is positive → first line moves right. With hanging: the meaning flips → first line stays, subsequent lines move right.

Where to use:

  • Bibliographies and works-cited lists
  • Glossaries and definition lists
  • Dictionary entries
  • Numbered lists with long first items
1

p { text-indent: 1.5em hanging each-line; }

Combining with each-line applies the hanging indent after every forced line break as well.