rch unit
The rch CSS length unit is a font-relative length equal to the value of the ch unit on the root element. ch length is based on the width of the zero (0) character.
Overview
The rch CSS length unit is a font-relative length equal to the value of the ch unit on the root element. ch length is based on the width of the zero (0) character.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.length.rch | 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
.input-field {
width: 30rch;
}
.sidebar {
max-width: 40rch;
}Live demo
Use cases
Formula-driven sizing
Use rch 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