ch unit
The ch unit is based on the width of the 0 glyph in the current font. It is often useful for text measures, form fields, and character-count-oriented sizing.
Overview
The ch unit is based on the width of the 0 glyph in the current font. It is often useful for text measures, form fields, and character-count-oriented sizing.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.length.ch | 27 | 12 | 1 | 7 | 27 | 7 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Implementation note
- From Firefox 1 to Firefox 3, `ch` was the width of the M character.
- From Firefox 1 to Firefox 3, `ch` did not work with `border-width` and `outline-width` CSS properties.
Syntax
CSS
.article-body {
max-width: 70ch;
margin: 0 auto;
}
input {
width: 20ch;
}Live demo
Use cases
Field widths
Size code inputs, OTP fields, or short text boxes according to approximate character count.
Readable text measure
Constrain line length with a unit tied to glyph width instead of arbitrary pixels.
Cautions
- Because ch depends on the active font, it is only an approximation of character count.
- Different typefaces can make the same ch-based width feel noticeably different.
Accessibility
- Text-relative sizing can support zoom and user font settings better than rigid absolute widths.
- Always verify that form controls remain usable when fonts or text size change.
Related links
Powered by web-features