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:
The jQuery code for this demo, with comments, comprises less than 350 lines:
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:
Test results using the latest browser versions as of 2020.06.27*:
*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.