This document contains examples in another language or script.
Accesskey n skips to in-page navigation. Skip to the content start
Slide by slide You can view larger versions of the slides by clicking on these icons or the slide images.
Slide text If you want to copy the text on the slides, click on these icons.
Overview A list of headings to help you navigate around the presentation quickly.
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.
<p>Latin latin latin latin latin latin</p>
No CSS
<p>Latin latin latin latin latin latin</p>
<p>Latin latin latin latin latin latin</p>
No CSS
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.
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.
<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>
<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}
<p>Latin <span lang="zh">简体中文</span> latin latin latin</p>
No CSS needed.
<p>Latin <span lang="zh">简体中文</span> latin latin latin</p>
<p>Latin <span lang="zh">简体中文</span> latin latin latin</p>
No CSS
<p>Latin <span lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>
No CSS needed.
<p>Latin <span lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>
<p>Latin <span lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>
??
<p>Latin <span lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>
*[lang="mn"] { block-progression: lr; }
<p>Latin <span lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>
??
<p>Latin <span lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>
??
<p>Latin latin latin latin latin latin</p>
p { block-progression: rl; }
<p>Latin latin latin latin latin latin</p>
??
<p>Latin latin latin latin latin latin</p>
p { block-progression: rl; }
<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.
[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>
<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.
<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>
p { block-progression: rl; }
<p>Latin latin latin latin latin latin</p>
??
<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>
??
<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>
You can't do this in CSS3 Text.
<p>Latin latin latin latin latin latin</p>
??
<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>
??
<p>Latin <span xml:lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>
p { block-progression: rl; }
<p>Latin latin latin latin latin latin</p>
??
<p>Latin <span xml:lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>
p { block-progression: rl; }
<p>Latin latin latin latin latin latin</p>
p { block-progression: lr; }
<p>Latin latin latin latin latin latin</p>
??
<p>Latin latin latin latin latin latin</p>
??
<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.
<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; }
<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; }
<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>
??
<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>
??
<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>
??
<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>
??
<p>Latin <span xml:lang="zh">简体中文</span> latin latin latin</p>
??
<p>Latin <span xml:lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>
??
<p>Latin <span xml:lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>
??
<p>Latin <span xml:lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>
??
<p>Latin <span xml:lang="mn">ᠬᠤᠯᠤᠭᠠᠨᠠ</span> latin latin latin</p>
??
<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>
No CSS
<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>
span { unicode-bidi: embed; direction: rtl; }
<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>
No CSS
<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>
span { unicode-bidi: embed; direction: rtl; }
<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>
No CSS
<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>
span { unicode-bidi: embed; direction: rtl; }
<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>
No CSS
<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>
span { unicode-bidi: embed; direction: rtl; }
<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>
No CSS
<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>
span { unicode-bidi: embed; direction: rtl; }
<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>
No CSS
<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>
span { unicode-bidi: embed; direction: rtl; }
<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>
No CSS
<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>
span { unicode-bidi: embed; direction: rtl; }
<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>
No CSS
<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>
span { unicode-bidi: embed; direction: rtl; }
<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>
No CSS
<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>
span { unicode-bidi: embed; direction: rtl; }
<p>简体中文<span lang="ar">العربية العربية</span>简体中文简体中文</p>
No CSS
<p>简体中文<span lang="ar" dir="rtl">العربية العربية</span>简体中文简体中文</p>
span { unicode-bidi: embed; direction: rtl; }
<p>العربية العربية العربية العربية العربية العربية</p>
No CSS
<p>العربية العربية العربية العربية العربية العربية</p>
p { unicode-bidi: embed; direction: rtl; }
<p>العربية العربية العربية العربية العربية العربية</p>
No CSS
<p>العربية العربية العربية العربية العربية العربية</p>
p { unicode-bidi: embed; direction: rtl; }
<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; }
<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; }
<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; }
<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; }
Author: Richard Ishida, W3C.