<pre class='metadata'>

Title: CSS Writing Modes Level 4

Shortname: css-writing-modes

Level: 4

Status: ED

Test Suite: http://test.csswg.org/suites/css-writing-modes-3_dev/nightly-unstable/

Work Status: Testing

Group: csswg

ED: https://drafts.csswg.org/css-writing-modes-4/

TR: https://www.w3.org/TR/css-writing-modes-4/

Previous Version: https://www.w3.org/TR/2019/CR-css-writing-modes-4-20190730/

Previous Version: https://www.w3.org/TR/2018/CR-css-writing-modes-4-20180524/

Issue Tracking: Tracker http://www.w3.org/Style/CSS/Tracker/products/30

Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400

Editor: Koji Ishii, Google, kojiishi@gmail.com, w3cid 45369

Former Editor: Shinyu Murakami, Antenna House, murakami@antenna.co.jp

Former Editor: Paul Nelson, Microsoft, paulnel@microsoft.com

Former Editor: Michel Suignard, Microsoft, michelsu@microsoft.com

Abstract: CSS Writing Modes Level 4 defines CSS support for various writing modes and their combinations, including left-to-right and right-to-left text ordering as well as horizontal and vertical orientations.

At Risk: The look-ahead/look-behind sequencing rules for 'text-combine-upright'.

At Risk: <a href="#auto-multicol">Automatic multi-column behavior</a> of orthogonal flows.

Ignored Terms: glyph orientation, *-left, *-right, *-top, *-bottom, text-combine-mode, root inline box, … message topic …, glyph-orientation-horizontal

Link Defaults: css2 (property) display/min-height/max-height/min-width/max-width/clip/left/right/bottom/top, css-text-3 (property) letter-spacing, css-text-decor-3 (property) text-decoration, svg2 (property) glyph-orientation-vertical/glyph-orientation-horizontal

</pre>

<pre class=link-defaults>

spec:css2; type:property; text:float

spec:css2; type:property; text:clear

spec:css-break-3; type:dfn; text:fragment

spec:css-text-3; type:dfn; text:character

</pre>

<style>

object { vertical-align: middle; }

.sidebar { float: right; background: #eee; border: solid gray; margin: 1em; }

@media (prefers-color-scheme: dark) { .sidebar { background: var(--borderedblock-bg, #eee); } }

.sidebar .figure { margin: 1em; }

.sidebar object { margin: 0 auto; display: block; }

.figurepair { display: table; margin: 1em auto; }

.figurepair .figure { display: table-cell; padding-left: .5em; padding-right: .5em; }

h2, .example { clear: both; }

.figure img,

.figure object,

.example img,

dd img { max-width: 100%; display: block; margin: 1em auto; }

div.figure table {

margin:auto;

}

pre.ascii-art {

display: table; /* shrinkwrap */

margin: 1em auto;

line-height: normal;

}

</style>

<h2 id="text-flow">

Introduction to Writing Modes</h2>

<p>CSS Writing Modes Level 4 defines CSS features to support for various international

writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left

(e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and

vertical (e.g. Asian scripts).</p>

<p>A <dfn export>writing mode</dfn> in CSS is determined by the 'writing-mode',

'direction', and 'text-orientation' properties. It is defined primarily

in terms of its <a>inline base direction</a> and <a>block flow direction</a>:

<div class="sidebar">

<div class="figure right">

<a href="diagrams/text-flow-vectors-tb.svg">

<img src="diagrams/text-flow-vectors-tb.png" class="landscape"

alt="Text flowing left to right,

Latin glyphs set upright,

and lines stacked top to bottom"></a>

<p class="caption">Latin-based writing mode

</div>

<div class="figure left">

<a href="diagrams/text-flow-vectors-lr-reverse.svg">

<img src="diagrams/text-flow-vectors-lr-reverse.png" class="landscape"

alt="Text flowing top to bottom,

Latin glyphs tipped sideways to the right (rotated 90&deg; clockwise),

and lines stacked left to right"></a>

<p class="caption">Mongolian-based writing mode

</div>

<div class="figure right">

<a href="diagrams/text-flow-vectors-tb.svg">

<img src="diagrams/text-flow-vectors-tb.png" class="landscape"

alt="Text flowing left to right,

Latin glyphs set upright,

and lines stacked top to bottom"></a>

<a href="diagrams/text-flow-vectors-rl.svg">

<img src="diagrams/text-flow-vectors-rl.png" class="landscape"

alt="Text flowing top to bottom,

Latin glyphs tipped sideways to the right (rotated 90&deg; clockwise),

and lines stacked right to left"></a>

<p class="caption">Han-based writing modes

</div>

</div>

<p>The <dfn export>inline base direction</dfn> is the primary direction in which

content is ordered on a line and defines on which sides the “start”

and “end” of a line are. The 'direction' property specifies the

inline base direction of a box and, together with the 'unicode-bidi'

property and the inherent directionality of any text content, determines

the ordering of inline-level content within a line.

<p>The <dfn export>block flow direction</dfn> is the direction in which

block-level boxes stack and the direction in which line boxes stack

within a block container. The 'writing-mode' property determines the

block flow direction.</p>

<p>Writing systems typically have one or two native writing modes. Some

examples are:

<ul>

<li>Latin-based systems are typically written using a left-to-right inline

direction with a downward (top-to-bottom) block flow direction.

<li>Arabic-based systems are typically written using a right-to-left

inline direction with a downward (top-to-bottom) block flow direction.

<li>Mongolian-based systems are typically written using a top-to-bottom

inline direction with a rightward (left-to-right) block flow direction.

<li>Han-based systems are commonly written using a left-to-right inline direction

with a downward (top-to-bottom) block flow direction, <strong>or</strong>

a top-to-bottom inline direction with a leftward (right-to-left) block

flow direction. Many magazines and newspapers will mix these two writing

modes on the same page.

</ul>

<p>A <dfn export>horizontal writing mode</dfn>

is one with horizontal lines of text,

i.e. a downward or upward block flow.

A <dfn export>vertical writing mode</dfn>

is one with vertical lines of text,

i.e. a leftward or rightward block flow.

<p class="note">These terms should not be confused with

<dfn noexport>vertical block flow</dfn>

(which is a downward or upward block flow)

and <dfn noexport>horizontal block flow</dfn>

(which is leftward or rightward block flow).

To avoid confusion, CSS specifications avoid this latter set of terms.

<p>The <dfn export>typographic mode</dfn> determines whether to use

typographic conventions specific to vertical flow for <a>vertical scripts</a>

(<dfn export>vertical typographic mode</dfn>)

or to use the typographic conventions of [=horizontal writing modes=]

(<dfn export>horizontal typographic mode</dfn>).

This concept distinguishes vertical typesetting

from rotated horizontal typesetting.

<p>The 'text-orientation' component of the writing mode

controls the <a>glyph orientation</a>

in [=vertical typographic modes=],

dictating whether a particular [=typographic character unit=]

is [=typeset upright=] or [=typeset sideways=].

<p class="note">See Unicode Technical Note #22 [[UTN22]]

(<a href="http://fantasai.inkedblade.net/style/discuss/vertical-text/paper">HTML version</a>)

for a more in-depth introduction to writing modes and vertical text.

<h3 id="placement">

Module Interactions</h3>

<p>This module replaces and extends the 'unicode-bidi' and 'direction'

features defined in [[!CSS2]] sections 8.6 and 9.10.

The interaction of its features

with other text operations

in setting lines of text

is described in [[css-text-3#order]].

<p>The <a>computed values</a> of the

'writing-mode', 'direction', and 'text-orientation' properties

(even on elements to which these properties themselves don't apply [[CSS-CASCADE-4]])

are broadly able to influence the computed values of other, unrelated properties

through calculations such as

the computation of <a>font-relative lengths</a>

or the cascade of <a href="http://www.w3.org/TR/css-logical-1/">flow-relative properties</a>

which purposefully depend on the computed <a>writing mode</a>

or on font metrics that can depend on the <a>writing mode</a>.

<h3 id="values">

Value Definitions and Terminology</h3>

This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]

using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].

Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]].

Combination with other CSS modules may expand the definitions of these value types.

In addition to the property-specific values listed in their definitions,

all properties defined in this specification

also accept the <a>CSS-wide keywords</a> as their property value.

For readability they have not been repeated explicitly.

<p>Other important terminology and concepts used in this specification

are defined in [[!CSS2]] and [[!CSS-TEXT-3]].

<span id="bidi"></span>

<h2 id="text-direction">

Inline Direction and Bidirectionality</h2>

<p>While the characters in most scripts are written from left to right,

certain scripts are written from right to left. In some documents,

in particular those written with the Arabic or Hebrew script, and in

some mixed-language contexts, text in a single (visually displayed)

block may appear with mixed directionality. This phenomenon is called

<dfn export>bidirectionality</dfn>, or "bidi" for short.</p>

<div class="figure">

<p><img src="diagrams/bidi.png"

alt="An example of bidirectional text is a Latin name in an Arabic

sentence. The sentence overall is typeset right-to-left, but

the letters in the Latin word in the middle are typeset

left-to-right.">

<p class="caption">Bidirectionality</p>

</div>

<p>The Unicode standard (<a href="http://www.unicode.org/reports/tr9/">Unicode Standard Annex #9</a>) defines a complex

algorithm for determining the proper ordering of bidirectional text. The

algorithm consists of an implicit part based on character properties,

as well as explicit controls for embeddings and overrides. CSS relies

on this algorithm to achieve proper bidirectional rendering.

<p>Two CSS properties, 'direction' and 'unicode-bidi',

provide explicit embedding, isolation, and override controls in the CSS layer.

Because the base directionality of a text depends on the structure and

semantics of the document, the 'direction' and 'unicode-bidi' properties

should in most cases be used only to map bidi information in the markup

to its corresponding CSS styles.

<p class="note">

The HTML specifications ([[HTML401]], section 8.2, and [[HTML/rendering#bidi-rendering]]) define

bidirectionality behavior for HTML elements.</p>

<p class="advisement">

<strong>If a document language provides markup features to control

bidi, authors and users should use those features instead</strong>

and not specify CSS rules to override them.

<h3 id="direction">

Specifying Directionality: the 'direction' property</h3>

<pre class='propdef'>

Name: direction

Value: ltr | rtl

Initial: ltr

Applies to: all elements

Inherited: yes

Percentages: n/a

Computed value: specified value

Animation type: not animatable

Canonical order: n/a

</pre>

<p class="advisement">Because HTML UAs can turn off CSS styling,

<strong>we recommend HTML authors to use the HTML <code>dir</code> attribute and &lt;bdo&gt; element</strong>

to ensure correct bidirectional layout in the absence of a style sheet.

<strong>Authors <em>should not</em> use 'direction' in HTML documents.</strong>

<p>This property specifies the <a>inline base direction</a> or directionality

of any bidi paragraph, embedding, isolate, or override established by the box.

(See 'unicode-bidi'.) <!-- except plaintext -->

In addition, it informs the ordering of

<a href="https://www.w3.org/TR/CSS2/tables.html">table</a> column layout,

the direction of horizontal <a href="https://www.w3.org/TR/CSS2/visufx.html#overflow">overflow</a>,

and the default alignment of text within a line, and other layout effects

that depend on the box's inline base direction.</p>

<p>Values for this property have the following meanings:</p>

<dl dfn-for=direction dfn-type=value>

<dt><dfn>ltr</dfn></dt>

<dd>This value sets <a>inline base direction</a> (bidi directionality)

to <a>line-left</a>-to-<a>line-right</a>.

<dt><dfn>rtl</dfn></dt>

<dd>This value sets <a>inline base direction</a> (bidi directionality)

to <a>line-right</a>-to-<a>line-left</a>.

</dl>

<p class="note">The 'direction' property has no effect on bidi reordering

when specified on inline boxes whose 'unicode-bidi' value is ''unicode-bidi/normal'',

because the box does not open an additional level

of embedding with respect to the bidirectional algorithm.</p>

<p class="note">The 'direction'

property, when specified for table column boxes, is not inherited by

cells in the column since columns are not the ancestors of the cells in

the document tree. Thus, CSS cannot easily capture the "dir" attribute

inheritance rules described in [[HTML401]], section 11.3.2.1.

<h3 id="unicode-bidi">

Embeddings and Overrides: the 'unicode-bidi' property</h3>

<pre class='propdef'>

Name: unicode-bidi

Value: normal | embed | isolate | bidi-override | isolate-override | plaintext

Initial: normal

Applies to: all elements, but see prose

Inherited: no

Percentages: n/a

Computed value: specified value

Animation type: not animatable

</pre>

<p class="advisement">Because HTML UAs can turn off CSS styling,

<strong>we recommend HTML authors to use the HTML <code>dir</code> attribute, &lt;bdo&gt; element,

and appropriate distinction of text-level vs. grouping-level HTML element types</strong>

to ensure correct bidirectional layout in the absence of a style sheet.

<strong>Authors <em>should not</em> use 'unicode-bidi' in HTML documents.</strong>

<p>Normally (i.e. when 'unicode-bidi' is ''normal'')

an inline box is transparent to the unicode bidi algorithm;

content is ordered as if the box's boundaries were not there.

Other values of the 'unicode-bidi' property cause inline boxes

to create scopes within the algorithm,

and to override the intrinsic directionality of text.

<p>The following informative table summarizes the box-internal and

box-external effects of 'unicode-bidi':

<table class="data">

<caption>Effect of non-''normal'' values of 'unicode-bidi' on inline boxes</caption>

<colgroup span=2></colgroup>

<colgroup span=2></colgroup>

<thead>

<tr><th colspan=2 rowspan=2>

<th colspan=2 scope=rowgroup><abbr title="To surrounding contents, the box behaves as if its boundary were...">Outside</abbr>

<tr><th><abbr title="a strong character of the box's 'direction'.">strong</abbr>

<th><abbr title="a neutral character.">neutral</abbr>

</thead>

<tbody>

<tr><th rowspan=3 scope=colgroup><abbr title="Within the box, content is ordered as if...">Inside</abbr>

<th><abbr title="the box's boundaries were strong characters of the box's 'direction'.">scoped</abbr>

<td>''embed''

<td>''isolate''

<tr><th><abbr title="all text consisted of strong characters of the box's 'direction'.">override</abbr>

<td>''bidi-override''

<td>''isolate-override''

<tr><th><abbr title="the box were a standalone paragraph ordered using UAX9 heuristics.">plaintext</abbr>

<td>&mdash;

<td>''plaintext''

</tbody>

</table>

<p>Values for this property have the following (normative) meanings:</p>

<dl>

<dt><dfn value for=unicode-bidi>normal</dfn></dt>

<dd>The box does not open an additional level of embedding with

respect to the bidirectional algorithm. For inline boxes,

implicit reordering works across box boundaries.</dd>

<dt><dfn value for=unicode-bidi>embed</dfn></dt>

<dd>If the box is inline, this value creates a <dfn export>directional embedding</dfn>

by opening an additional level of embedding with respect to the bidirectional algorithm.

The direction of this embedding level is given by the 'direction'

property. Inside the box, reordering is done implicitly.

<p class="note">This value has no effect on boxes that are not inline.

<dt><dfn value for=unicode-bidi>isolate</dfn></dt>

<dd>On an inline box, this <dfn export id=bidi-isolate lt="bidi-isolate|bidi-isolated|bidi isolation|isolation">bidi-isolates</dfn> its contents.

This is similar to a directional embedding (and increases the embedding level accordingly)

except that each sequence of inline-level boxes

uninterrupted by any block boundary or <a>forced paragraph break</a>

is treated as an <dfn>isolated sequence</dfn>:

<ul>

<li>the content within the sequence is ordered

as if inside an independent paragraph

with the base directionality specified by the box's 'direction' property.

<li>for the purpose of bidi resolution in its containing bidi paragraph,

the sequence is treated as if it were a single Object Replacement Character (U+FFFC).

</ul>

In effect, neither is the content inside the box bidi-affected

by the content surrounding the box,

nor is the content surrounding the box bidi-affected by the

content or specified directionality of the box.

However, <a>forced paragraph breaks</a> within the box still create

a corresponding break in the containing paragraph.

<p class="note">This value has no effect on boxes that are not inline.

<dt><dfn value for=unicode-bidi>bidi-override</dfn></dt>

<dd>This value puts the box's immediate inline content in a <dfn export>directional override</dfn>.

For an inline, this means that the box acts like a <a>directional embedding</a>

in the bidirectional algorithm,

except that reordering within it is strictly in sequence according to the

'direction' property; the implicit part of the bidirectional algorithm

is ignored.

For a block container, the override is applied

to an anonymous inline box that surrounds all of its content.

<dt><dfn value for=unicode-bidi>isolate-override</dfn></dt>

<dd>This combines the <a>isolation</a> behavior of ''isolate''

with the <a>directional override</a> behavior of ''bidi-override'':

to surrounding content, it is equivalent to ''isolate'',

but within the box content is ordered as if ''bidi-override'' were specified.

It effectively nests a <a>directional override</a> inside an <a>isolated sequence</a>.

<dt><dfn value for=unicode-bidi>plaintext</dfn></dt>

<dd><p>This value behaves as ''isolate'' except that for the purposes of

the Unicode bidirectional algorithm, the base directionality of each

of the box's <a>bidi paragraphs</a> (if a block container)

or <a>isolated sequences</a> (if an inline)

is determined by following the heuristic in rules P2 and P3

of the Unicode bidirectional algorithm

(rather than by using the 'direction' property of the box).

</dl>

<p>Following Unicode Bidirectional Algorithm clause HL3 [[!UAX9]],

values other than ''normal''

effectively insert the corresponding Unicode bidi control codes

into the text stream at the start and end of the inline element

before passing the paragraph to the Unicode bidirectional algorithm for reordering.

(See [[#bidi-control-codes]].)

<table class="data" id="bidi-control-codes-injection-table">

<caption>Bidi control codes injected by 'unicode-bidi'

at the start/end of ''display: inline'' boxes</caption>

<colgroup span=1></colgroup>

<colgroup span=2></colgroup>

<colgroup span=2></colgroup>

<thead>

<tr><th rowspan=3 scope=col>'unicode-bidi' value

<th colspan=4>'direction' value

<tr>

<th colspan=2>''ltr''

<th colspan=2>''rtl''

<tr>

<th>start

<th>end

<th>start

<th>end

<tbody>

<tr>

<th scope=row>''normal''

<td>&mdash;

<td>&mdash;

<td>&mdash;

<td>&mdash;

<tr>

<th scope=row>''embed''

<td>LRE (U+202A)

<td>PDF (U+202C)

<td>RLE (U+202B)

<td>PDF (U+202C)

<tr>

<th scope=row>''isolate''

<td>LRI (U+2066)

<td>PDI (U+2069)

<td>RLI (U+2067)

<td>PDI (U+2069)

<tr>

<th scope=row>''bidi-override''*

<td>LRO (U+202D)

<td>PDF (U+202C)

<td>RLO (U+202E)

<td>PDF (U+202C)

<tr>

<th scope=row>''isolate-override''*

<td>FSI,LRO (U+2068,U+202D)

<td>PDF,PDI (U+202C,U+2069)

<td>FSI,RLO (U+2068,U+202E)

<td>PDF,PDI (U+202C,U+2069)

<tr>

<th scope=row>''plaintext''

<td>FSI (U+2068)

<td>PDI (U+2069)

<td>FSI (U+2068)

<td>PDI (U+2069)

<tfoot>

<tr>

<td colspan=5>

<small>* The LRO/RLO+PDF pairs are also applied

to the <a>root inline box</a> of a <a>block container</a>

if these values of 'unicode-bidi'

were specified on the <a>block container</a>.

</table>

<p class=note>Because the 'unicode-bidi' property does not inherit,

setting ''bidi-override'' or ''plaintext'' on a block box will

not affect any descendant blocks. Therefore these values are best

used on blocks and inlines that do not contain any block-level

structures.

<p class=note>Note that 'unicode-bidi' does not affect the 'direction'

property even in the case of ''plaintext'', and thus does not affect

'direction'-dependent layout calculations.

<p class=note>

Because the Unicode algorithm has a limit of 125 levels of embedding,

care should be taken not to overuse 'unicode-bidi' values other than ''normal''.

In particular, a value of ''inherit''

should be used with extreme caution in deeply nested inline markup.

However, for elements that are,

in general, intended to be displayed as blocks, a setting of

''unicode-bidi: isolate'' is preferred to keep the element together

in case the 'display' is changed to ''display/inline''

(see example below).

<h3 id="bidi-example">

Example of Bidirectional Text</h3>

<p>The following example shows an XML document with bidirectional

text. It illustrates an important design principle: document language

designers should take bidi into account both in the language proper

(elements and attributes) and in any accompanying style sheets. The

style sheets should be designed so that bidi rules are separate from

other style rules, and such rules should not be overridden by other

style sheets so that the document language's bidi behavior is preserved.</p>

<div class="example">

<p>In this example, lowercase letters stand for inherently left-to-right

characters and uppercase letters represent inherently right-to-left

characters. The text stream is shown below in logical backing store order.</p>

<pre class="xml-example">

&lt;section dir=rtl&gt;

&lt;para&gt;HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5&lt;/para&gt;

&lt;para&gt;HEBREW6 &lt;emphasis&gt;HEBREW7&lt;/emphasis&gt; HEBREW8&lt;/para&gt;

&lt;/section&gt;

&lt;section dir=ltr&gt;

&lt;para&gt;english9 english10 english11 HEBREW12 HEBREW13&lt;/para&gt;

&lt;para&gt;english14 english15 english16&lt;/para&gt;

&lt;para&gt;english17 &lt;quote dir=rtl&gt;HEBREW18 english19 HEBREW20&lt;/quote&gt;&lt;/para&gt;

&lt;/section&gt;

</pre>

<p>Since this is arbitrary XML, the style sheet is responsible for

setting the writing direction. This is the style sheet:</p>

<pre>

/* Rules for bidi */

[dir=rtl] {direction: rtl; unicode-bidi: isolate; }

[dir=ltr] {direction: ltr; unicode-bidi: isolate; }

/* Rules for presentation */

section, para {display: block;}

emphasis {font-weight: bold;}

quote {font-style: italic;}

</pre>

<p>If the line length is long,

the formatting of this text might look like this:</p>

<pre class="ascii-art">

5WERBEH 4WERBEH english3 2WERBEH 1WERBEH

8WERBEH <b>7WERBEH</b> 6WERBEH

english9 english10 english11 13WERBEH 12WERBEH

english14 english15 english16

english17 <i lt=''>20WERBEH english19 18WERBEH</i>

</pre>

<p>The first <code>&lt;section></code> element is a block with a right-to-left base direction,

the second <code>&lt;section></code> element is a block with a left-to-right base direction.

The <code>&lt;para></code>s are blocks that inherit the base direction from their parents.

Thus, the first two <code>&lt;para></code>s are read starting at the top right,

the final three are read starting at the top left.</p>

<p>The <code>&lt;emphasis></code> element is inline-level,

and since its value for 'unicode-bidi' is ''normal'' (the initial value),

it has no effect on the ordering of the text.

<p>The <code>&lt;quote></code> element, on the other hand,

creates an <a>isolated sequence</a> with the given internal directionality.

Note that this causes <samp>HEBREW18</samp> to be to the right of <samp>english19</samp>.

<p>If lines have to be broken, the same text might format like this:</p>

<pre class="ascii-art">

<!-- --> 2WERBEH 1WERBEH

<!-- --> -EH 4WERBEH english3

<!-- --> 5WERB

<!-- --> -EH <b>7WERBEH</b> 6WERBEH

<!-- --> 8WERB

<!-- -->english9 english10 en-

<!-- -->glish11 12WERBEH

<!-- -->13WERBEH

<!-- -->english14 english15

<!-- -->english16

<!-- -->english17 <i lt=''>18WERBEH

<!-- -->20WERBEH english19</i>

</pre>

<p>Notice that because <samp>HEBREW18</samp> must be read before <samp>english19</samp>,

it is on the line above <samp>english19</samp>.

Just breaking the long line from the earlier formatting would not have worked.

<p>Note also that the first syllable from <samp>english19</samp>

might have fit on the previous line,

but hyphenation of left-to-right words in a right-to-left context, and vice versa,

is usually suppressed to avoid having to display a hyphen in the middle of a line.

</div><!-- example -->

<h3 id="bidi-algo">

Applying the Bidirectional Reordering Algorithm</h3>

<p>User agents that support bidirectional text must apply the Unicode

bidirectional algorithm to every sequence of inline-level boxes uninterrupted

by any block boundary or

&ldquo;<a href="http://www.unicode.org/reports/tr9/#Bidirectional_Character_Types">bidi type B</a>&rdquo;

<dfn export>forced paragraph break</dfn>.

This sequence forms the <dfn export lt="bidi paragraph">paragraph</dfn> unit

in the bidirectional algorithm.

<h4 id="bidi-para-direction">

Bidi Paragraph Embedding Levels</h4>

<p>In CSS,

the paragraph embedding level must be set

(following <a href="http://www.unicode.org/reports/tr9/#HL1">UAX9 clause HL1</a>)

according to the 'direction' property of the paragraph's containing block

rather than by the heuristic given in steps

<a href="http://www.unicode.org/reports/tr9/#P2">P2</a> and

<a href="http://www.unicode.org/reports/tr9/#P2">P3</a>

of the Unicode algorithm.

<p>There is, however, one exception:

when the computed 'unicode-bidi' of the paragraph's containing block is ''plaintext'',

the Unicode heuristics in P2 and P3 are used as described in [[!UAX9]],

without the HL1 override.

<h4 id="bidi-control-codes">

CSS&ndash;Unicode Bidi Control Translation, Text Reordering</h4>

<p>The final order of characters within each <a>bidi paragraph</a> is the

same as if the bidi control codes had been added as described for 'unicode-bidi' (above),

markup had been stripped, and the resulting character sequence had

been passed to an implementation of the Unicode bidirectional

algorithm for plain text that produced the same line-breaks as the

styled text.

<p class="note">

Note that bidi control codes in the source text are still honored,

and might not correspond to the document tree structure.

This can split inlines or interfere with bidi start/end control pairing

in interesting ways.

<h4 id="bidi-atomic-inlines">

Bidi Treatment of Atomic Inlines</h4>

<p>In this process, <a>replaced elements</a> with ''display: inline''

are treated as neutral characters,

unless their 'unicode-bidi' property is either ''embed'' or ''bidi-override'',

in which case they are treated as strong characters

in the 'direction' specified for the element.

(This is so that, in case the replaced element falls back to rendering inlined text content,

its bidi effect on the surrounding text is consistent with its replaced rendering.)

<p>All other atomic inline-level boxes are treated as neutral characters

always.</p>

<h4 id="bidi-embedding-breaks">

Paragraph Breaks Within Embeddings and Isolates</h4>

<p>If an inline box is broken around a <a>bidi paragraph</a> boundary

(e.g. if split by a block or <a>forced paragraph break</a>),

then the <a href="http://www.unicode.org/reports/tr9/#HL3">HL3</a> bidi control codes assigned to the end of the box

are also added before the interruption

and the codes assigned to the start of the box are also added after it.

(In other words, any embedding levels, isolates, or overrides started by the box

are closed at the paragraph break and reopened on the other side of it.)

<div class="example">

<p>For example, where &lt;BR/&gt; is a <a>forced paragraph break</a>

the bidi ordering is identical between

<pre>&lt;para>...&lt;i1>&lt;i2>...&lt;BR/>...&lt;/i2>&lt;/i1>...&lt;/para></pre>

<p>and

<pre>&lt;para>...&lt;i1>&lt;i2>...&lt;/i2>&lt;/i1>&lt;BR/>&lt;i1>&lt;i2>...&lt;/i2>&lt;/i1>...&lt;/para></pre>

<p>for all values of 'unicode-bidi' on inline elements &lt;i1&gt; and &lt;i2&gt;.

</div>

<p class="note">

Note that this behavior is applied by CSS for CSS-declared bidi controls

applied to the box tree;

it does not apply to Unicode's bidi formatting controls,

which are defined to terminate their effect at the end of the bidi paragraph.

<h4 id="bidi-box-model">

Reordering-induced Box Fragmentation</h4>

<p>Since bidi reordering can split apart and reorder text

that is logically contiguous,

bidirectional text can cause an <a>inline box</a> containing such text

to be split and its fragments reordered within a line.

<h5 id="bidi-fragmentation">

Conditions of Reordering-induced Box Fragmentation</h5>

<p>

When bidi reordering would split apart an inline box

due to intervening content,

the inline box is considered to be broken into multiple <a>box fragments</a>.

[[CSS-BREAK-3]]

The box is considered to be thus <a>fragmented</a>

if it would be divided by intervening content on an infinitely long line,

even if line breaking happens to result in both <a>box fragments</a>

being placed adjacent to each other on the line.

In such cases, the nearest common ancestor of text in the two <a>box fragments</a>

(which determines certain aspects of text formatting

such as <a spec="css-text">tracking</a> and <a href="https://www.w3.org/TR/css-text/#text-justify-property">justification</a>

between the two <a>box fragments</a>, see [[CSS-TEXT-3]])

is considered to be the nearest common ancestor of the two <a>box fragments</a>,

not the <a>inline box</a> itself.

However, an <a>inline box</a> is not considered to be broken

into multiple <a>box fragments</a> due to bidi reordering

if no intervening content would force it to split.

(These rules maintain the integrity of an <a>inline box</a> where possible,

while keeping bidi-induced fragmentation stable

across variations in line-breaking.)

<!-- See https://github.com/w3c/csswg-drafts/issues/1509 -->

<div class="example">

In the following example, where lowercase letters represent LTR letters

and uppercase letters represent RTL letters,

bidi reordering causes the <code>&lt;em></code>’s <a>inline box</a>

to be divided into two <a>box fragments</a>

separated by text outside the <code>&lt;em></code>.

Source code (logical order):

<pre>&lt;p>here is &lt;em>some MIXED&lt;/em> TEXT.&lt;/p></pre>

Rendering (visual order) in a wide containing block, resulting in two inline box fragments separated by external content:

<pre>here is <em style="border: 1px solid; border-right: 1px dashed red">some </em>TXET <em style="border: 1px solid; border-left: 1px dashed red">DEXIM</em>.</pre>

Rendering (visual order) in a narrow containing block, resulting in two inline box fragments placed adjacent to each other:

<pre>

here is <em style="border: 1px solid; border-right: 1px dashed red">some </em><em style="border: 1px solid; border-left: 1px dashed red">DEXIM</em>

TXET.

</pre>

</div>

<div class="example">

By contrast, in this example,

where the mixed-direction phrase is kept together with an isolation,

only one fragment is generated--

the surrounding content will never split the <code>&lt;em></code>’s <a>inline box</a>

even inside an infinitely-long containing block:

Source code (logical order):

<pre>&lt;p>here is &lt;em dir=rtl>some MIXED&lt;/em> TEXT.&lt;/p></pre>

Rendering (visual order) in a wide containing block, resulting in one fragment:

<pre>here is <em style="border: 1px solid; ">some DEXIM</em> TXET.</pre>

Rendering (visual order) in a narrow containing block, resulting in one fragment:

<pre>

here is <em style="border: 1px solid; ">some DEXIM</em>

TXET.

</pre>

</div>

<h5 id="bidi-fragment-boxes">

Box Model of Reordering-induced Box Fragments</h5>

<!-- CSS2.1 8.6 -->

<p>For each line box, UAs must take the fragments of each inline box

and assign the margins, borders and padding in visual order (not logical order).

The <a>start</a>-most fragment on the first line box in which the box appears

has the <a>start</a> edge's margin, border, and padding;

and the end-most fragment on the last line box in which the box appears

has the <a>end</a> edge's margin, border, and padding.

For example, in the ''horizontal-tb'' writing mode:

<ul>

<li>When the parent's 'direction' property is ''ltr'',

the left-most box fragment on the first line box in which the box appears

has the left margin, left border and left padding,

and the right-most box fragment on the last line box in which the box appears

has the right padding, right border and right margin.

<li>When the parent's 'direction' property is ''rtl'',

the right-most fragment of the first line box in which the box appears

has the right padding, right border and right margin,

and the left-most fragment of the last line box in which the box appears

has the left margin, left border and left padding.

</ul>

<p>Analogous rules hold for vertical writing modes.</p>

<p class="note">The 'box-decoration-break' property can override this behavior

to draw box decorations on both sides of each fragment. [[!CSS-BREAK-3]]

<h2 id="vertical-modes">

Vertical Writing Modes</h2>

<p>In addition to extensions to CSS2.1&rsquo;s support for bidirectional text,

this module introduces the rules and properties needed to support vertical

text layout in CSS.

<h3 id="vertical-intro">

Introduction to Vertical Writing</h3>

<p><em>This subsection is non-normative.</em></p>

<p>Unlike languages that use the Latin script which are primarily laid out

horizontally, Asian languages such as Chinese and Japanese can be laid out

vertically. The Japanese example below shows the same text laid out

horizontally and vertically. In the horizontal case, text is read

from left to right, top to bottom. For the vertical case, the text is

read top to bottom, right to left.

Indentation from the left edge in the left-to-right horizontal case

translates to indentation from the top edge in the top-to-bottom vertical

case.

<div class="figure">

<p><img src="images/vert-horiz-comparison.png"

alt="A comparison of horizontal and vertical Japanese shows that

although the lines rotate, the characters remain upright.

Some glyphs, however change: a period mark shifts from the

bottom left of its glyph box to the top right. Running

headers, however, may remain

laid out horizontally across the top of the page."></p>

<p class="caption">Comparison of vertical and horizontal Japanese: iBunko application (iOS)</p>

</div>

<p class="note">For Chinese and Japanese lines are ordered either right

to left or top to bottom, while for Mongolian and Manchu lines are

ordered left to right.</p>

<p>The change from horizontal to vertical writing can affect not just the

layout, but also the typesetting. For example, the position of a punctuation

mark within its spacing box can change from the horizontal to the

vertical case, and in some cases alternate glyphs are used.

<p>Vertical text that includes Latin script text or text from other scripts

normally displayed horizontally can display that text in a number of

ways. For example, Latin words can be rotated sideways, or each letter

can be oriented upright:

<div class="figure">

<p><img src="images/vert-latin-layouts.png"

alt="A dictionary definition for &#x30F4;&#x30A3;&#x30EB;&#x30B9;

might write the English word 'virus' rotated 90&deg; clockwise,

but stack the letters of the initialisms 'RNA' and 'DNA' upright."></p>

<p class="caption">Examples of Latin in vertical Japanese: Daijirin Viewer 1.4 (iOS)

</div>

<p>In some special cases such as two-digit numbers in dates, text is fit

compactly into a single vertical character box:

<div class="figure" id="fig-mac">

<p><img src="images/vert-number-layouts.png"

alt="An excerpt from MacFan shows several possible vertical layouts

for numbers: the two-digit month and day are written as

horizontal-in-vertical blocks; the years are written with

each character upright; except in the English phrase

&ldquo;for Mac 2011&rdquo;, where the date is rotated to

match the rotated Latin."></p>

<p class="caption">Mac Fan, December 2010, p.49</p>

</div>

<p>Layouts often involve a mixture of vertical and horizontal elements:

<div class="figure">

<p><img src="images/vert-horiz-combination.png"

alt="Magazines often mix horizontal and vertical layout; for

example, using one orientation for the main article text

and a different one for sidebar or illustrative content."></p>

<p class="caption">Mixture of vertical and horizontal elements</p>

</div>

<p>Vertical text layouts also need to handle bidirectional text layout;

clockwise-rotated Arabic, for example, is laid out bottom-to-top.

<h3 id="block-flow">

Block Flow Direction: the 'writing-mode' property</h3>

<pre class='propdef'>

Name: writing-mode

Value: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Initial: horizontal-tb

Applies to: All elements except table row groups, table column groups, table rows, table columns, ruby base containers, ruby annotation containers

Inherited: yes

Percentages: n/a

Computed value: specified value

Animation type: not animatable

Canonical order: n/a

</pre>

<p>This property specifies whether lines of text are laid out horizontally

or vertically and the direction in which blocks progress. Possible

values:</p>

<dl dfn-for=writing-mode dfn-type=value>

<dt><dfn>horizontal-tb</dfn></dt>

<dd>Top-to-bottom <a>block flow direction</a>.

Both the <a>writing mode</a> and the <a>typographic mode</a> are horizontal.</dd>

<dt><dfn>vertical-rl</dfn></dt>

<dd>Right-to-left <a>block flow direction</a>.

Both the <a>writing mode</a> and the <a>typographic mode</a> are vertical.</dd>

<dt><dfn>vertical-lr</dfn></dt>

<dd>Left-to-right <a>block flow direction</a>.

Both the <a>writing mode</a> and the <a>typographic mode</a> are vertical.</dd>

<dt><dfn>sideways-rl</dfn></dt>

<dd>Right-to-left <a>block flow direction</a>.

The <a>writing mode</a> is vertical, while the <a>typographic mode</a> is horizontal.

<dt><dfn>sideways-lr</dfn></dt>

<dd>Left-to-right <a>block flow direction</a>.

The <a>writing mode</a> is vertical, while the <a>typographic mode</a> is horizontal.

</dl>

<p>The 'writing-mode' property specifies the <a>block flow direction</a>,

which determines the ordering direction of block-level boxes in a block formatting context;

the ordering direction of line boxes in a block container that contains inlines;

the ordering direction of rows in a table; etc.

By virtue of determining the stacking direction of line boxes,

the 'writing-mode' property also determines whether the line boxes' orientation (and thus the <a>writing mode</a>)

is horizontal or vertical.

The 'text-orientation' property then determines how text is laid out within the line box.

<p>The content of <a>replaced elements</a> do not rotate due to the writing mode:

images and external content such as from <code>&lt;iframe></code>s, for example, remain upright,

and the <a>default object size</a> of 300px&times;150px does not re-orient.

However embedded replaced content involving text

(such as MathML content or form elements)

should match the replaced element's writing mode and line orientation

if the UA supports such a vertical writing mode for the replaced content.

<div class="example">

<p>In the following example, two block elements (1 and 3) separated

by an image (2) are presented in various flow writing modes.</p>

<p>Here is a diagram of horizontal writing mode (<code>writing-mode: horizontal-tb</code>):</p>

<p><img alt="Diagram of horizontal layout: blocks 1, 2, and 3 are stacked top-to-bottom"

src="images/horizontal.png" width="219" height="300" ></p>

<p>Here is a diagram for the right-to-left vertical writing mode commonly

used in East Asia (<code>writing-mode: vertical-rl</code>):</p>

<p><img alt="Diagram of a right-to-left vertical layout: blocks 1, 2,

and 3 are arranged side by side from right to left"

src="images/vertical-rl.png" height="191" width="297" ></p>

<p>And finally, here is a diagram for the left-to-right vertical

writing mode used for Manchu and Mongolian (<code>writing-mode: vertical-lr</code>):</p>

<p><img alt="Diagram of left-to-right vertical layout: blocks 1, 2,

and 3 are arranged side by side from left to right"

src="images/vertical-lr.png" height="191" width="300" ></p>

</div>

<div class="example">

<p>In the following example, some form controls are rendered inside

a block with ''vertical-rl'' writing mode. The form controls are

rendered to match the writing mode.

<pre>

<!-- -->&lt;style>

<!-- --> form { writing-mode: vertical-rl; }

<!-- -->&lt;/style>

<!-- -->...

<!-- -->&lt;form>

<!-- -->&lt;p>&lt;label>姓名&#x3000;&lt;input value="艾俐俐">&lt;/label>

<!-- -->&lt;p>&lt;label>语言&#x3000;&lt;select>&lt;option>English

<!-- --> &lt;option>français

<!-- --> &lt;option>فارسی

<!-- --> &lt;option>中文

<!-- --> &lt;option>日本語&lt;/select>&lt;/label>

<!-- -->&lt;/form></pre>

<p><img alt="Screenshot of vertical layout: the input element is

laid lengthwise from top to bottom and its contents

rendered in a vertical typographic mode, matching the

labels outside it. The drop-down selection control

after it slides out to the side (towards the after

edge of the block) rather than downward as it would

in horizontal writing modes."

src="images/vertical-form.png"></p>

</div>

<p>If a box has a different 'writing-mode' value than its parent box

(i.e. nearest ancestor without ''display: contents''):

<ul>

<li>If the box would otherwise become an <a>in-flow</a> box

with a computed 'display' of ''display/inline'',

its 'display' computes instead to ''inline-block''.

<li>If the box is a <a>block container</a>,

then it establishes an <a lt="independent formatting context">independent</a>

<a>block formatting context</a>.

<li>More generally, if its specified <a>inner display type</a> is ''flow'',

then its computed <a>inner display type</a> becomes ''flow-root''. [[!CSS-DISPLAY-3]]

</ul>

<div class="note" id="embedded-svg-inheritance">

<p>As all other inherited CSS properties do,

the 'writing-mode' property inherits to SVG elements inlined

(rather than linked) into the source document.

This could cause unintentional side effects when, for example,

an SVG image designed only for horizontal flow was embedded into a vertical flow document.

<p>Authors can prevent this from happening by adding the following rule:

<div class="example">

<pre>svg { writing-mode: initial; }</pre>

</div>