example of vertical and horizontal layout of Japanese

I put together a simple example with both vertical and horizontal
layout of the same Japanese text. View in IE8 to see the difference:

  http://people.mozilla.org/~jdaggett/tests/tategakitest.html

Screenshot of the result:

  http://people.mozilla.org/~jdaggett/images/tateyokogaki.png

There are several things that are interesting about this.  Note how
the text flows, the vertical text layout doesn't show the start of the
text, because when the text is too long it overflows to the left,
pushing the start of the text off the screen to the right.

Note how the underline on the URL displays, it's rendered to the left
in the vertical layout.  In Japanese text layout this is incorrect, an
emphasis line like this should appear on the right.  For Chinese, from
what I understand, this is correct however, an emphasis line is drawn
on the left.  So if the logical property 'border-after' was used for
underlining a particular range of text, the "flipped" version would
still need to be changed, it would draw to the left in the vertical
text case which would be incorrect for Japanese. Seems like you also
need to define precisely what text-decoration: underline means in the
vertical case.

Cheers,

John Daggett

Received on Monday, 7 June 2010 09:09:35 UTC