Defining ‘ch’

Published 12 years, 7 months past

I’m working my way through a rewrite of Two Salmon (more on that anon), and I just recently came to the ch unit.  Its definition in the latest CSS Values and Units module is as follows:

ch unit

Equal to the advance measure of the “0” (ZERO, U+0030) glyph found in the font used to render it.

…and that’s it.  I had never heard the term “advance measure” before, and a bit of Googling for font "advance measure" only led me to copies of the CSS Values and Units module and some configuration files for the Panda 3D game engine.  So I asked the editor and it turns out that “advance measure” is a CSS-ism that corresponds to the term “advance width”, which I had also never heard before but which yielded way more Google results.  Wikipedia’s entry for “Font” has this definition:

Glyph-level metrics include … the advance width (the proper distance between the glyph’s initial pen position and the next glyph’s initial pen position)…

My question for the font geeks in the room is this:  is that the generally accepted definition for “advance width”?  If not, is there a better definition out there; and if so, where?  I’d like to be able to recommend the best known definition for inclusion in the specification; or, if there’s no agreement as to the best, then at least a good one.  The Wikipedia definition certainly sounds good, assuming it’s accurate.  Is it?

In CSS terms, if I’ve understood things correctly, 1ch is equal to the width of the character box for the glyph for “0”.  In other words, if I were to create a floated element with just a “0” and no whitespace between it and the element’s open and close tags, then the float’s width would be precisely 1ch.  But that’s if I’ve understood things correctly.  If I haven’t, I hope I’ll be corrected soon!

Comments (24)

  1. As I understand it the ‘advance width’ is the sum of the width of the glyph itself plus the space before (its left bearing) and the space after (its right bearing). Any kerning does not affect the advance width but will offset the character.

    I’m guessing that CSS line-spacing will not affect the ch unit value?

  2. Also, what are the letters CH supposed to stand for?

  3. I worked on font metrics in a custom Math renderer application. The “advance width” is a very important feature of font glyphs, which indicate how far from the current glyph you should draw the next one.

    My definition of the “advance width” would be the following one: the “advance width” of a glyph is the horizontal space reserved by that glyph for its drawing. It’s equal to the width of the glyph which don’t interesect with previous and follwing glyphs reserved space. Its value equals the width of the glyph black box + its eventual left and right bearing (which can be negative).

    An illustration can be found on this page (scroll down until the picture show up) : http://msdn.microsoft.com/en-us/library/system.windows.media.glyphtypeface.aspx

  4. Ch unit = Character Unit.
    I may have found something

    So this really means it’s for spacing braille.

  5. FreeType’s docs at http://www.freetype.org/freetype2/docs/glyphs/glyphs-3.html cover this well. The image in that page also explains it visually (sorry, no way to get that URL on the iPad)

    Advance width is how far the pen moves between drawing characters. This does not correspond directly with how wide the character is, though I’m not 100% certain of CSS’ definition of character box width.

    Also, advance width is usually where kerning comes in (strictly speaking, kerning modifies the default advance width of a character). I’m assuming, though, that the CSS ch does not have kerning taken into account, since it’s the default advance width of a 0, not its advance width in relation to another character.

  6. How do you even pronounce this unit? Same as with “church” or “chew”?

    “This element should be 10 tʃ wide.”

  7. In practical terms, how would using ch differ from em?

  8. As far as I can tell there’s no difference if it’s used for the intended purpose, ie spacing monospace and braille type.

  9. The Wikipedia entry is the best so far. The advance is simply a magnitude specified per glyph in the font. It is not a derived property. It is independent of the glyph contents. No two rendering engines will position glyphs in exactly the same location so the exact relationship between advance and position (if any) is a complex one. So…

    this is wrong
    > As I understand it the ‘advance width’ is the sum of the width of the glyph itself plus the space before (its left bearing) and the space after (its right bearing)

    as is this
    > the “advance width” of a glyph is the horizontal space reserved by that glyph for its drawing

    this might be true some of the time, depending on engine implementation
    > Advance width is how far the pen moves between drawing characters

    this might be true, but i don’t see anything requiring that it must be true
    > if I were to create a floated element with just a “0” and no whitespace between it and the element’s open and close tags, then the float’s width would be precisely 1ch

  10. @MikeNGarrett: There is a difference – monospace fonts (of which braille fonts are a subset) all have the quality that their character widths are equal, but the ratio of character width to em box is *not* consistent between all such fonts.

    The ch unit lets you ignore the ratio and just use the width directly, so you know that exactly 40 characters will fit in a “width: 40ch;” box.

  11. @Tab Atkins Jr Very interesting. I had no idea.

  12. @hoops please can you provide a link. http://en.wikipedia.org/wiki/Font defines the advance width as the proper distance between the glyph’s initial pen position and the next glyph’s initial pen position it makes no mention of this being independent of the glyph contents.

    This page about fontforge has some pertinent info but I’ve yet to find a clear definition.

  13. Pingback ::

    [Friday Links] The Move Edition

    […] Defining ‘ch’ […]

  14. ch can also be used to produce a standard feature of typography that has been absent by definition all this time: Tab stops. Try laying out a screenplay without them.

  15. ‘Advance measure’ = ‘advance width’ = distance from the left sidebearing of a glyph to the right sidebearing of a glyph.

    As Tab notes, this is most useful in dealing with monospaced, ‘fixed width’ fonts, and I presume CSS defines ‘ch’ in terms of the width of the zero glyph arbitrarily so that for any font — at least, any font containing a glyph mapped to the zero character — a ‘ch’ value could be determined. Personally, I can’t see any use for ‘ch’ outside of the context of a monospaced font though, since outside of that context it doesn’t relate to much in the design space.

  16. If you don’t just want to go by Wikipedia, another document that mentions the term “advance width” is the TrueType spec.

  17. John Hudson:

    I presume CSS defines ‘ch’ in terms of the width of the zero glyph arbitrarily … Personally, I can’t see any use for ‘ch’ outside of the context of a monospaced font though

    There are several variable-width typefaces in which the digits 0 to 9 all have the same width as each other, so this could be useful in laying out numerical data in many fonts.

  18. Maybe using ch is THE way to ensure proper display of tabular material. You would define the lay-out in ch and it would be font-independent (some people and some browsers override css-font specs).

  19. Personally, I can’t see any use for ‘ch’ outside of the context of a monospaced font though, since outside of that context it doesn’t relate to much in the design space.

    “ch” is a very handy unit when one is working with CJK entities (or any language that uses fullwidth form, for that matter).

  20. Pingback ::

    Novidades no CSS! | xablaudatecnologia

    […] caractere zero (“0″). Algumas considerações muito interessantes sobre o que isso significa podem ser encontradas no blog de Eric Meyers, mas o conceito básico é de que, dada uma fonte com espaçamento uniforme, uma caixa com uma […]

  21. Pingback ::

    7个你可能不认识的CSS单位 - CSS/HTML - AreCoders为序网

    […] ch 单位通常被定义为数字0的宽度。你可以在Eric Meyers的博客里找到关于它的一些有意思的讨论，例如将一个等宽字体的字母”N”的宽度设置为40ch，那么在另一种类型的字体里它却可以包含40个字母。这个单位的传统用途主要是盲文的排版，但是除此之外，肯定还有可以应用他的地方。 […]

  22. Pingback ::

    CSS units – Hardwork beats talent, when talent doesnt, work hard

    […] of the width of the zero character, 0. Some very interesting discussion about what this means can be found on Eric Meyers’s blog, but the basic concept is that, given a monospace font, a box with a width of N character units, […]

  23. Pingback ::

    CSS rem rm 等单位说明 – 成都一零二四科技有限公司

    […] ch单位，或者字符单位被定义为0字符的宽度的“先进的尺寸”。在“Eric Meyer’s的博客”中可以找到一些非常有趣的讨论关于这意味着什么，但是基本的概念是，给定一个等宽字体的字体，一个N个字符单位宽的盒子，比如width：40ch;,可以一直容纳一个有40个字符的应用那个特定字体的字符串。虽然这个特殊规则的传统用途与列出盲文有关，但是这里创造性的可行性一定会超越这些简单的用途。 […]

  24. Pingback ::

    7 единиц измерения CSS, о которых вы могли не знать | Все про сайтостроение

    […] обсуждение того, что это означает, можно найти в блоге Эрика Мейерса, но основная концепция заключается в том, что, […]

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview