Newly availableUseful when ric unit expresses sizing or math relationships more clearly than fixed literals.
Units and functions Newly available

ric unit

The ric CSS length unit, or root international character, is a font-relative length equal to the width of CJK character relative to the root element.

Units and functions

Overview

The ric CSS length unit, or root international character, is a font-relative length equal to the width of CJK character relative to the root element.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.length.ric
111
111
147
17.2
111
17.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.text-column {
  max-width: 40ric;
  /* Width equivalent to 40 full-width characters */
}
.indent {
  text-indent: 1ric;
}

Live demo

full-width40characterwidth

CSS full-width40characterwidth demo.

PreviewFullscreen

characterbottom

CSS characterbottom demo.

PreviewFullscreen

containerwidth

CSS containerwidth demo.

PreviewFullscreen

Use cases

  • Formula-driven sizing

    Use ric unit to connect layout values to content, typography, or mathematical relationships.

  • Responsive calculations

    Build CSS that scales with the environment rather than relying on repeated hard-coded numbers.

Cautions

  • Advanced units and math improve clarity only when the relationship is easy to read later.
  • Prefer simpler values when a formula adds more complexity than benefit.

Accessibility

  • Relative sizing can improve zoom behavior when tested with real content and component states.
  • Math-based CSS should still preserve readable spacing and avoid clipped content.

Related links

Powered by web-features