Using Ch, An Underappreciated CSS Length

Posted

I’ve been experimenting with new units of measurement when I design web pages and components. Tomorrow, I'll be giving a talk that covers viewport units like vh and vw. In doing my research, I stumbled upon a number of other measurements that have the support, but just not the popularity of the old-timer units.

For a bit of context, when I design, I find that horizontal measurements are typically based on grid column widths, so I end up using percentages to ensure they all fit nicely into a grid-esque layout. Vertically, on the other hand, I'm concerned about the cadence of the typography, so I usually set those measurements in ems and rems. I've also used ems for component padding and margins, because I think it's nice to relate the spacing of a component to the size of the type.

Lately, though, I've been finding good uses for a new unit called ch. Like em, ch is a relative unit. But while em is a vertical measure, based on the height of the typeface. ch, on the other hand, is based on a horizontal measurement: the width of the typeface’s zero character. (Ch stands for character.) I’ve found ch to be especially useful in matters pertaining to inline, text-based elements.

Here are some examples of places I’ve used ch units.

Checkboxes and Labels

Usually, you’ll have the checkbox floated to the left and the label floated next to it. You need some space in between the two elements so that they don't crash into one another awkwardly. In the past, I've used maybe 1em, or 0.5em. But now I find 1ch to be a much more natural unit that seems to add just the right amount of space, because it's related to the natural horizontal texture of the typeface.

input[type="checkbox"]{
  margin-right: 1ch;
  float: left;
}

Specialized Form Field Lengths

Another good place I found ch to be of use is again related to forms. I think forms are a natural fit for ch, because they’re an element that's often need of sizing, but it's hard to know exactly how wide to make the inputs except on a case-by-case basis. Not anymore with ch.

Date Fields

Take for example, year fields. We know that standard years are going to be four numbers. There are probably exceptions, but we can usually assume the zero character of a typeface is going to be at least as wide as the widest number, and therefore a reasonably representative digit. So, we can set the year input width accordingly.

.year{
  width: 4ch;  // Fits four numbers
}

But wait, there are a couple extra considerations. We’re reasonable people, and we set our box-sizing to border-box. We’re going to need to account for the padding, too. Our input padding is one of those horizontal measures, so we could actually set that using ch, too! We'll use calc() to account for the border width.

.year{
  border: 1px solid gray;
  padding: 0 1ch;
  width: calc(6ch + 2px);  // Fits four numbers, plus padding and border
}

Try it out, it works pretty well! There’s just one more thing I’d like to do to make it just a touch more comfortable. When the input is active and there's a blinking cursor in it, that cursor is taking up a little bit of space. Most people probably wouldn’t notice, but it’s enough to annoy me. So I’m gonna fudge just a little bit more width onto the input to account for it.

.year{
  border: 1px solid gray;
  padding: 0 1ch;
  width: calc(6.1ch + 2px);  // Fits four numbers, plus padding, border, and blinking cursor
}

Pretty nice! Of course, you can also do this for other fields where there are known character limits, like month and day fields.

.month,
.day{
  border: 1px solid gray;
  padding: 0 1ch;
  width: calc(4.1ch + 2px);  // Fits two numbers, plus padding, border, and blinking cursor
}

Email Address Fields

Another good time to use them in form fields is where you know the average character count of an answer. According to Nielsen Norman Group, “text fields should be about the same size as the expected input since it’s extremely error prone when users can’t see their full entry.” For example, I recently learned that 95% of email addresses are 31 characters or less. Conveniently, email is an HTML input type, so I can use CSS to style any input[type="email"] to be 31ch wide.

input[type="email"]{
  border: 1px solid gray;
  padding: 0 1ch;
  width: calc(33ch + 2px);  // Fits average email address length
}

Realistically, this is perhaps a bit too long, but at least it gets us in the ballpark.

Indentation

On to non-form related uses, if you look at any paragraph following a paragraph on this site, you’ll notice that it’s indented a bit at the beginning of the first line. At the time of this writing, the indentation is 1em, but now that we have ch, why not use that instead? That way it’s relative to the horizontal proportions of the text instead of the vertical proportions.


p + p{
  text-indent: 2ch;
}

Inline Spacing

One last, place I've used ch is in a social media lineup. This is one of those strings of little squares at the end of an article or web page. Once again, I need to decide how much space to put between them and, once again, 1ch feels like an appropriate measurement.

.social-media-list{
  display: flex;
}

.social-media-list > .icon{
  margin-right: 1ch;
}

My conclusion is that percentages and viewport units are good for grids, ems and rems are good for vertical cadence, and ch is good for horizontal cadence.

Browser Support

It’s pretty good! According to MDN, it works in Firefox, Chrome, IE 9, Safari 7, and Opera 20. It does not have support in Android’s stock browser, though, but you could pretty easily use an em-based fallback instead. It feels like 1ch is often (but not always) around the width of half an em (but I’m just eyeballing it).

.class{
  margin: 0.5em;  // Android browser
  margin: 1ch;  // All other modern browsers
}

One Of Many CSS Lengths

I talked about ch at a recent Codepen meetup at Refresh Portland and everybody who talked to me about it said they had never heard of ch before. It turns out, there are actually a lot of units of measure that don’t get used all that often, including ex (the size of a typeface’s x-height), pc (picas), and even in (inches). It seems most designers still like to think in the basic kinds of measurements, but we’re living in a post-pixel world now. Try it out! If you’ve found a good use for an underappreciated CSS length, I’d love to hear about it.

Comments

No comments allowed at this time. Read my commenting policy.

← Older Newer →