This document contains examples in another language or script.

Accesskey n skips to in-page navigation. Skip to the content start

Go to W3C Home PageGo to Architecture Domain home page  Internationalization 
 

Writing direction usage scenarios

NOTE:

The intent of this document is to explore use cases for vertically set text and mixed direction vertical text. The next step on from that will be to establish how one would achieve the illustrated effect in CSS, XSL-FO and SVG (plus some other possible approaches). This should highlight gaps, complications and differences between approaches. Of course, the code samples need to assume a number of approaches in markup. This will hopefully provide a useful frameword for discussion of implementations of the specs relating to CSS, XSL-FO and SVG. It would also serve as a useful base for explaining to authors how to achieve the desired results using each technology.

The CSS, XSL, SVG, etc annotations in this document are still TBD. Do not assume that they say anything sensible at this point!

Look at the pictures only for the time being. Single or small numbers of words stand for longer passages.

Latin

Latin horizontal

CSS3 text

<p>Latin latin latin latin latin latin</p>

No CSS

XSL-FO

<p>Latin latin latin latin latin latin</p>

Elika

<p>Latin latin latin latin latin latin</p>

No CSS

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lh+a (Latin horizontal plus Arabic)

In the examples shown here and elsewhere that contain embedded text in a different direction, assume that the embedded text you see is representative only, and that it represents a sequence of characters that the bidirectional algorithm alone is unable to correctly order (eg. a phrase that ends with an exclamation mark, or more than one directional run).

Also note that the HTML specification describes the expected behaviour of user agents with regard to use of the dir attribute - and CSS is not strictly needed for HTML or XHTML 1.0. It may help to assume that the markup here and elswhere is for XHTML 1.1.

CSS3 text

No CSS

<p>Latin <span lang="ar" dir="rtl">العربية العربية</span> latin latin latin</p>

*[dir="rtl"] { unicode-bidi: embed; direction: rtl; } Note: This is the rule that would be needed in the UA stylesheet for HTML and XHTML. The CSS is built into browsers for these formats and authors should not specify it.

XSL-FO

<p>Latin <span lang="ar">العربية العربية</span> latin latin latin</p>

No CSS

<p>Latin <span lang="ar" style="unicode-bidi: embed; direction: rtl">العربية العربية</span> latin latin latin</p>

Elika

<p>Latin <span lang="ar">العربية العربية</span> latin latin latin</p>

No CSS

<p>Latin <span lang="ar" dir="rtl">العربية العربية</span> latin latin latin</p>

*[dir="rtl"] { unicode-bidi: embed; direction: rtl}

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lh+c (Latin horizontal plus Chinese)

CSS3 text

<p>Latin <span lang="zh">简体中文</span> latin latin latin</p>

No CSS needed.

XSL-FO

<p>Latin <span lang="zh">简体中文</span> latin latin latin</p>

Elika

<p>Latin <span lang="zh">简体中文</span> latin latin latin</p>

No CSS

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lh+mh (Latin horizontal plus Mongolian horizontal)

CSS3 text

<p>Latin <span lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>

No CSS needed.

XSL-FO

<p>Latin <span lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>

Elika

<p>Latin <span lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>

??

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lh+m (Latin horizontal plus Mongolian vertical)

CSS3 text

<p>Latin <span lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>

*[lang="mn"] { block-progression: lr; }

XSL-FO

<p>Latin <span lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>

??

Elika

<p>Latin <span lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>

??

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lvd (Latin vertical down)

CSS3 text

<p>Latin latin latin latin latin latin</p>

p { block-progression: rl; }

XLS-FO text

<p>Latin latin latin latin latin latin</p>

??

Elika

<p>Latin latin latin latin latin latin</p>

p { block-progression: rl; }

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lvd+a

lvd+au (Latin vertical down plus Arabic up)

<p>Latin <span lang="ar" dir="rtl">العربية العربية</span> latin latin latin</p>

p { block-progression: rl; }

*[dir="rtl"] { unicode-bidi: embed; direction: rtl; } Note: This rule is built into browsers for HTML and XHTML and authors should not specify it. This is the rule that would be needed in the UA stylesheet.

XSL-FO

[1] <p>Latin <span lang="ar">العربية العربية</span> latin latin latin</p>

[2] <p>Latin <span lang="ar" style="unicode-bidi: embed; direction: rtl">العربية العربية</span> latin latin latin</p>

Elika

<p>Latin <span lang="ar" dir="rtl">العربية العربية</span> latin latin latin</p>

p { block-progression: rl; }

*[dir="rtl"] { unicode-bidi: embed; direction: rtl; } Note: This rule is built into browsers for HTML and XHTML and authors should not specify it. This is the rule that would be needed in the UA stylesheet.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lvd+cv (Latin vertical down plus Chinese vertical)

CSS3 text

<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>

p { block-progression: rl; }

XLS-FO text

<p>Latin latin latin latin latin latin</p>

??

Elika

<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>

??

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lvd+cd (Latin vertical down plus Chinese down)

CSS3 text

<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>

You can't do this in CSS3 Text.

XLS-FO text

<p>Latin latin latin latin latin latin</p>

??

Elika

<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>

??

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lvd+mv (Latin vertical down plus Mongolian vertical)

CSS3 text

<p>Latin <span xml:lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>

p { block-progression: rl; }

XLS-FO text

<p>Latin latin latin latin latin latin</p>

??

Elika

<p>Latin <span xml:lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>

p { block-progression: rl; }

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lvu (Latin vertical up)

CSS3 text

<p>Latin latin latin latin latin latin</p>

p { block-progression: lr; }

XLS-FO text

<p>Latin latin latin latin latin latin</p>

??

Elika

<p>Latin latin latin latin latin latin</p>

??

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lvu+ad (Latin vertical up plus Arabic down)

CSS3 Text

<p>Latin <span lang="ar" dir="rtl">العربية العربية</span> latin latin latin</p>

p { block-progression: lr; }

*[dir="rtl"] { unicode-bidi: embed; direction: rtl; } Note: This rule is built into browsers for HTML and XHTML and authors should not specify it. This is the rule that would be needed in the UA stylesheet.

XSL-FO

<p>Latin <span lang="ar">العربية العربية</span> latin latin latin</p>

No CSS

<p>Latin <span lang="ar" dir="rtl">العربية العربية</span> latin latin latin</p>

span { unicode-bidi: embed; direction: rtl; }

Elika

<p>Latin <span lang="ar">العربية العربية</span> latin latin latin</p>

No CSS

<p>Latin <span lang="ar" dir="rtl">العربية العربية</span> latin latin latin</p>

span { unicode-bidi: embed; direction: rtl; }

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lvu+c

CSS3 text

<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>

??

XSL-FO

<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>

??

Elika

<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>

??

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lvu+cu

CSS3 text

<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>

??

Elika

<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>

??

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lvu+m

CSS3 text

<p>Latin <span xml:lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>

??

Elika

<p>Latin <span xml:lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>

??

slide Go to individual slides view. Show the text for this slide. Go to Overview.

lvu+mu

CSS3 text

<p>Latin <span xml:lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>

??

Elika

<p>Latin <span xml:lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>

??

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

ch+a

<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>

No CSS

<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>

span { unicode-bidi: embed; direction: rtl; }

Elika

<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>

No CSS

<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>

span { unicode-bidi: embed; direction: rtl; }

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

cv+au

<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>

No CSS

<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>

span { unicode-bidi: embed; direction: rtl; }

Elika

<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>

No CSS

<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>

span { unicode-bidi: embed; direction: rtl; }

slide Go to individual slides view. Show the text for this slide. Go to Overview.

cv+ad

<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>

No CSS

<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>

span { unicode-bidi: embed; direction: rtl; }

Elika

<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>

No CSS

<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>

span { unicode-bidi: embed; direction: rtl; }

slide Go to individual slides view. Show the text for this slide. Go to Overview.

cv+anr

<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>

No CSS

<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>

span { unicode-bidi: embed; direction: rtl; }

Elika

<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>

No CSS

<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>

span { unicode-bidi: embed; direction: rtl; }

slide Go to individual slides view. Show the text for this slide. Go to Overview.

cv+ltcy

<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>

No CSS

<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>

span { unicode-bidi: embed; direction: rtl; }

Elika

<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>

No CSS

<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>

span { unicode-bidi: embed; direction: rtl; }

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

ah

CSS3 Text

<p>العربية العربية العربية العربية العربية العربية</p>

No CSS

<p>العربية العربية العربية العربية العربية العربية</p>

p { unicode-bidi: embed; direction: rtl; }

Elika

<p>العربية العربية العربية العربية العربية العربية</p>

No CSS

<p>العربية العربية العربية العربية العربية العربية</p>

p { unicode-bidi: embed; direction: rtl; }

slide Go to individual slides view. Show the text for this slide. Go to Overview.

ah+l

CSS3 Text

<p>العربية <span xml:lang="en">Latin latin</span> العربية العربية العربية</p>

p { unicode-bidi: embed; direction: rtl; }

<p>العربية <span xml:lang="en">Latin latin</span> العربية العربية العربية</p>

span { unicode-bidi: embed; direction: ltr; }

Elika

<p>العربية <span xml:lang="en">Latin latin</span> العربية العربية العربية</p>

p { unicode-bidi: embed; direction: rtl; }

<p>العربية <span xml:lang="en">Latin latin</span> العربية العربية العربية</p>

span { unicode-bidi: embed; direction: ltr; }

slide Go to individual slides view. Show the text for this slide. Go to Overview.

ah+c

CSS3 Text

<p>العربية <span xml:lang="en">简体中文</span> العربية العربية العربية</p>

p { unicode-bidi: embed; direction: rtl; }

<p>العربية <span xml:lang="en">简体中文</span> العربية العربية العربية</p>

span { unicode-bidi: embed; direction: ltr; }

Elika

<p>العربية <span xml:lang="en">简体中文</span> العربية العربية العربية</p>

p { unicode-bidi: embed; direction: rtl; }

<p>العربية <span xml:lang="en">简体中文</span> العربية العربية العربية</p>

span { unicode-bidi: embed; direction: ltr; }

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

slide Go to individual slides view. Show the text for this slide. Go to Overview.

Author: Richard Ishida, W3C.

Valid XHTML 1.0!
Valid CSS!
Encoded in UTF-8!

Content created 29 April 2005. Last update 2005-04-29 09:37 GMT