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:
-
Breaking mixed-script text into separate runs by script.
-
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.
-
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.
-
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.
-
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).
-
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.