W3C home > Mailing lists > Public > www-style@w3.org > March 2011

[css3-text] text-transform:fullwidth for symbols, punctuation, or white spaces

From: Koji Ishii <kojiishi@gluesoft.co.jp>
Date: Mon, 14 Mar 2011 22:52:19 -0400
To: "www-style@w3.org" <www-style@w3.org>
Message-ID: <A592E245B36A8949BDB0A302B375FB4E0AB2BFBA8F@MAILR001.mail.lan>
As a question was raised at CSSWG F2F[1] that if text-transform:fullwidth[2] should transform symbols, punctuation, or white spaces, I'm going to write use cases of the value here to give you all an idea why CSS should transform all characters to fullwidth counterpart where available, not only letters and numbers.

As mentioned at the F2F, using fullwidth form is a stylistic choice for East Asian authors. Using the style gives:
1. Narrow characters more consistent visuals, sizes, and line break properties as ideographic and other native characters.
2. Narrow characters more consistent pitch as ideographic and other native characters (although it's not guaranteed in proportional fonts.)
3. More line break opportunities and therefore it can reduce the risk to expand lines. In East Asian typography, expansion is not considered a good typography in general.
4. Upright orientations for narrow characters in vertical flow.
5. Sometimes glyphs need to be altered in vertical flow, but most fonts have vertical alternate glyphs only for fullwidth form, and therefore gives better results than text-orientation:upright[3].

When authors prefer these benefits, they use all narrow characters in fullwidth form, not only letters and numbers.

One example is when you want to render "M9.0"[4]. The decimal point should be consistent with the letters and numbers, and should use vertical alternate glyph in vertical flow. The example also contains ":" and "%" rendered in fullwidth as well.

You can see an interesting use case of the value here. When links to articles are placed on the top page of the site, they use narrow form, probably to save real estate, and list of article titles does not have to worry about line breaks. This gives an idea that the source data uses narrow form, but it is transformed to fullwidth on render.

This style is commonly used in newspapers where the length of lines is short, but it can be also used in magazines and books. One example is an electric magazine called "on-deck"[5]. Again, you can see the TOC at the site top page uses narrow form, while inside the magazines they use fullwidth form.

Whether to transform white spaces or not was discussed in Japanese ML too, but if the space character of "iPod touch" was not transformed to fullwidth, it gives inconsistent visuals and loses item 1 and 2 mentioned above. You can see the "on-deck" magazine mentioned above transforms space characters as well.

I hope this answers to the question, but if anyone has any further questions or opinions, I appreciate your feedback.

[1] http://lists.w3.org/Archives/Public/www-style/2011Mar/0307.html
[2] http://dev.w3.org/csswg/css3-text/#text-transform
[3] http://dev.w3.org/csswg/css3-writing-modes/#text-orientation
[4] http://mainichi.jp/select/weathernews/20110311/archive/news/2011/03/13/20110313k0000e040052000c.html
[5] http://on-deck.jp/

Received on Tuesday, 15 March 2011 02:53:14 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:57 UTC