HTML and CSS Reference
In-Depth Information
The ch unit
An interesting addition to CSS3 is the
ch
unit, which is broadly meant to represent “one
character.” The way it is defined in CSS3 is:
Equal to the advance measure of the “0” (ZERO, U+0030) glyph found in the font used
to render it.
The term “advance measure” is actually a CSS-ism that corresponds to the term “ad-
vance width” in font typography. (CSS uses the term “measure” because some scripts
are not right-to-left or left-to-right, and so may have an advance height rather than an
advance width.) Without getting into too many details, a character glyph's advance
width is the distance from the start of a character glyph to the start of the next. This
generally corresponds to the width of the glyph itself plus any built-in spacing to the
sides. (Although that built-in spacing can be either positive or negative.)
As mentioned previously, CSS pins the
ch
unit to the advance width of a zero in a given
font. This is in parallel to the way that
em
is calculated with respect to the
font-size
value of an element.
The easiest way to demonstrate this unit is to run a bunch of zeroes together and then
set an image to have a width with the same number of
ch
units as the number of zeroes,
as shown in
Figure 6
.
img {height: 1em; width: 25ch;}
Figure 6. Character-relative sizing
