Skip to notes.The slides are typically visually-oriented graphics, but the notes contain enough information to understand the tutorial.
Slide

Text direction

CSS3 will enable the use of vertical text, and should do so in a way that makes the choice of vertical or horizontal a purely stylistic decision, ie. you would be able to switch from well-rendered horizontal text to well-rendered vertical text and back with a few simple tweaks to the style sheet but no need to change the markup. You will also be able to mix horizontal and vertical text within the same page.

Key parameters here are the block-progression direction, the inline text direction, and the glyph orientation.

The block-progression direction allows you to specify the direction in which lines of text flow. Top to bottom would be appropriate for horizontal text, since the lines are stacked top to bottom. Right-to-left would be the normal setting for vertical Chinese, Japanese and Korean, where lines progress from the right to the left of the page or block. Left-to-right would be appropriate for a script like Mongolian, which is also vertical but where your eyes start reading from top-left position.

Within a given line it must be possible to specify the inline directionality of text. Right-to-left would be appropriate for scripts such as Arabic and Hebrew. This needs to be interpreted relative to the direction of the block progression.

A writing-mode property has been proposed as a shortcut that combines both block and inline progression into a set of common combinations.

It is then necessary to provide a means to control whether the Latin letters in vertical Japanese appear on their side (like 'Johansson' on the slide), or upright (like 'FIFA' on the slide), and whether text (left-to-right and right-to-left) runs up the vertical line or down.

Some of the more difficult aspects of text direction relate to how one provides the user's preferred way of supporting inline text in vertically set paragraphs. The CSS Working Group is currently discussing how this should work (May 2006).


Version: $Id: Slide0080.html,v 1.3 2006/05/17 16:18:01 rishida Exp $