Vertical Text Layout in a few hundred lines of jQuery

by Ed Trager, 2011.05.20

This is my little experiment demonstrating East Asian vertical text layout in modern browsers using CSS3's two-dimensional transform directives, and in particular the rotate directive.

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!

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.

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

Click to see Javascript

Click to see CSS

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