Re: example of vertical and horizontal layout of Japanese

John Daggett <jdaggett@mozilla.com> wrote on 2010/06/07 18:08:27
> 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.

See the definition of the text-underline-position property of CSS3 Text:
http://dev.w3.org/csswg/css3-text/#text-underline-position

| Name:  text-underline-position
| Value: auto | before-edge | alphabetic | after-edge
| Initial: auto
|...
| auto
|     ... In vertical line layout, if the language is set to Japanese
|     or Korean, the underline should be aligned as for before-edge.

Japanese ebook readers that can switch writing modes render underline
this way.

Almost all text layout softwares that support Japanese layout can
switch writing modes (horizontal or vertical) and the underline position
is automaticaly adjusted, the indents and spaces between blocks
are writing mode relatively defined. We can use same settings for
both writing modes and only small refinement is needed.
margin-start (starting indent) and margin-before (space before block)
are very natural for us.


Best regards,

-- 
ζ‘δΈŠ ηœŸι›„ (MURAKAMI Shinyu)
http://twitter.com/MurakamiShinyu
Antenna House Formatter:
http://www.antenna.co.jp/AHF/
http://www.antennahouse.com

Received on Monday, 7 June 2010 10:08:55 UTC