DEV Community

Cover image for The Little Known CSS Unit
Anthony Oyathelemhi
Anthony Oyathelemhi

Posted on

17 6

The Little Known CSS Unit

As a Frontend Developer, it is sometimes humbling to know just how much you don't know about the basic building blocks of the web.

The amount of tools and techniques available to us is A LOT! So it's no surprise we often just pick whatever solves our immediate problem and call it a day

Let's take a look at one of those rarely used tools, the CH CSS unit.

CH Unit Definition

According to the spec

A CH unit is the advance measure of the β€œ0” (ZERO, U+0030) glyph found in the font used to render it. (The advance measure of a glyph is its advance width or height, whichever is in the inline axis of the element.)

Translation: One CH is equal to the space one zero character occupies for a given font. So if we write 00, that's 2ch.

All Characters Are Not Equal

Notice how the definition specifically mentions "0" (zero)? That's important because not all characters in a font are equal (except for monospaced fonts e.g. Courier)

Now that we know what the ch unit is, let's consider where it might be appropriate to use it

Usage

I asked this question on Twitter before writing this blog post

It's no surprise people suggested using some sort of line break approach, even the source of the image, the nextjs site, uses <br> tags to create the markup

This approach works for static content but cannot be used for dynamic content, at least not without JavaScript

I've created a simple example to show how we can use max-width to achieve this by setting the value to the maximum number of characters we want to appear on one line.

Pros

  • Suitable for dynamic content
  • Better than using px or other units for paragraph width
  • The appearance doesn't change when the font size changes

Cons

  • It can be a pain counting the number of characters
  • Size can be off for Proportional fonts (non-monospaced), which is the vast majority of fonts

Another scenario where the ch unit might make sense to define width is a fixed-width text input (e.g. year input - 4ch)

Conclusion

The ch unit is certainly not what you want to use in most cases, but it really shines where it makes the most sense, character measurement

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (8)

Collapse
 
paceaux profile image
Paceaux β€’

You failed to mention ex which is the fraternal twin to ch.

ex is the height of a lowercase x in the computed font. ch is a width measurement, while ex is vertical. I have found ex useful in ::before and ::after elements when I'm trying to position, space, and size things that need to appear inline. (also, ex combined with ch could be a useful way to size with non-monospace fonts)

Collapse
 
frontendtony profile image
Anthony Oyathelemhi β€’

You can't mention something you've never heard about @paceaux 😏

Thanks for this new knowledge. I'm reading up on it now

Collapse
 
ochukodotspace profile image
Ochuko β€’

Nice, might actually use this sometime

Collapse
 
michaelscheffenacker profile image
Michael Scheffenacker β€’

This is an interesting article, but what I am missing here is a comparison with the em unit.

Collapse
 
paceaux profile image
Paceaux β€’

I have an extraordinarily long (read: boring) review of the behavior of em as it compares to ex (which does the same thing as ch)

blog.frankmtaylor.com/2012/01/25/c...

Collapse
 
frontendtony profile image
Anthony Oyathelemhi β€’

Hmmm. I didn't really think of any comparisons when I was putting this together. I could make a note to write about this though

Collapse
 
prisca_agu_0d8a71f70b8f76 profile image
Prisca Agu β€’

This is really nice πŸ‘

Collapse
 
meo3w profile image
Phil Hasenkamp β€’

This is awesome! Thank you!

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay