← back to unifont.org home

by Ed Trager, 2011.05.20
Updated 2020.06.27

Back in 2011, when Cascading Style Sheets (CSS) 2.1 was still a W3C Proposed Recommendation and when many if not most CSS3 features were yet to be implemented in browsers, I wrote this little experiment demonstrating East Asian vertical text layout. At that time, CSS3's writing-mode directive was not available. As a result, I chose to use CSS3's two-dimensional transform: rotate(...) directive along with Javascript to do the trick.

The idea is very simple: By default, lines in a paragraph of text run from left-to-right with line progression from top-to-bottom. If we rotate the whole paragraph 90 degrees or one-quarter turn clockwise, then the lines run from top-to-bottom with line progression from right-to-left. Now if we place each Chinese or Japanese character inside a span that is rotated one-quarter turn anti-clockwise, then the characters will be upright again! Hover the mouse over the examples below to animate these transformations.

Simple, right? That solves 90% of the problem!

Of course, the devil is in the details of the remaining 10% of the problem. The main areas of focus are:

1. Breaking mixed-script text into separate runs by script.
2. If a run of embedded Latin text is very short, such as one consisting of just one or two digits or a short abbreviation like "cm", then we choose to have the text appear upright as is commonly done in vertical Japanese typography.
3. Longer runs of embedded Latin or other non-CJK left-to-right scripts need to remain rotated a quarter-turn so that the direction of reading within the line is from top-to-bottom.
4. On the other hand, runs of embedded Arabic or Hebrew or other right-to-left scripts need to be rotated in the opposite direction so that the direction of reading within a line of Arabic or Hebrew also is from top to bottom.
5. Paired bracketing punctuation marks such as parentheses and square brackets need to remain rotated. For the sake of simplicity in this proof-of-concept implementation, all paired punctuations marks are broken out into singleton runs of text by the itemizer. This can result in a few extra text runs than would be necessary in a more polished or optimized implementation, but keeps the text run itemizer simple. (Nota bene: This is just a demo, so some paired punctuation may be rotated that is usually not rotated in actual high-quality CJK typography).
6. Finally we attempt to adjust the position of a few common punctuation marks such as the CJK comma and full stop so that the layout will be closer to what is expected in East Asian vertical typography. Since we do not substitute in any vertical presentation characters, we only achieve partial success here. We could do a better job, but at the moment this is only proof-of-concept code, so we want to keep things as simple as possible. (Update: now in 2020, the positioning of rotated punctuation actually looks quite good in the absence of additional positional tweaking).

The jQuery code for this demo, with comments, comprises less than 350 lines:

Click to see Javascript

Click to see CSS

Normal features, such as selecting a range of text using the mouse, work as expected.

Test results using the latest browser versions as of 2011-06-16:

• Firefox: Works as expected.
• Chrome: Fails.
• Safari: Fails.
• Opera: Quite buggy - mostly fails.
• IE 9: Works as expected.

Update as of June 2020

Test results using the latest browser versions as of 2020.06.27^*:

• Firefox: Works as expected.
• Chrome: Works as expected.
• Safari: Works as expected.
• Opera: Works as expected.

^*Microsoft Edge was not tested.

Note that now (in 2020) all major browsers support writing-mode:vertical-rl, as we can see in the following Haiku by Bashō (our example no. 4 below), rendered here using the browser's intrinsic vertical layout capabilities:

古池や蛙飛込む水の音

However, browser support for writing-mode:vertical-rl may still have flaws, depending on one's point of view. In the following example —rendered directly by the browser using the writing-mode:vertical-rl CSS directive— the embedded Arabic is rotated in such a way that it reads from bottom to top, in opposition to the flow of the Chinese text:

阿拉伯语：القرآن‎，意思是“誦讀”

This is a bit curious, but this behavior is consistent across the latest versions of Google Chrome, Safari, Firefox, and Opera. This strongly suggests that the W3C opted for the simplest solution of just "rotating" the BIDI bidirectional algorithm by 90 degrees for vertical layout solutions.

In contrast, our example no. 2 below renders the embedded Arabic so that the reading direction of the Chinese and the Arabic are both from top to bottom.

Which solution is better: ours or the W3C rotated BIDI solution?

In her paper, Robust Vertical Text Layout, the author Fantasai discusses both options for Arabic embedded in Chinese, —along with documentary photographic examples from printed books (below)— and even suggests that one could indeed take advantage of the Chinese vertical layout tradition to ensure that a mixed text containing both Chinese and Arabic would have a consistent reading direction from top to bottom (example on the left below):

Two options for embedding Arabic within vertical Chinese text are shown in printed works. Examples are from Fantasai's paper.

Text layout with mixed scripts is a complex business. I next plan to survey folks who know both an East Asian language as well as Arabic to obtain at least a modicum of empirical evidence regarding which solution is perceived as better.