CSS Writing Modes Level 3

W3C Last Call Working Draft, 26 November 2013

This version:
Latest version:
Editor’s Draft:
Previous Versions:
www-style@w3.org with subject line “[css-writing-modes] … message topic …”(archives)
Test Suite:
fantasai (Mozilla)
(Rakuten Inc.)
Former Editors:
(Antenna House)
Issue Tracking:


CSS Writing Modes Level 3 defines CSS 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). CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc.

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

This document was edited in place on 23 June 2014 to fix a wrong "Previous Version" link.

Publication as a Last Call Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css-writing-modes” in the subject, preferably like this: “[css-writing-modes] …summary of comment…

This document was produced by the CSS Working Group (part of the Style Activity).

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This specification is a Last Call Working Draft. All persons are encouraged to review this document and send comments to the www-style mailing list as described above. The deadline for comments is 24 December 2013.

The following features are at-risk, and may be dropped during the CR period:

Table of contents

1 Introduction to Writing Modes

CSS Writing Modes Level 3 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).

A writing mode in CSS is determined by the writing-mode, direction, and text-orientation properties. It is defined primarily in terms of its inline base direction and block flow direction:

The inline base direction 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 an element 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.

The block flow direction 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.

A horizontal writing mode is one with horizontal lines of text, i.e. a downward or upward block flow. A vertical writing mode is one with vertical lines of text, i.e. a leftward or rightward block flow.

These terms should not be confused with vertical block flow (which is a downward or upward block flow) and horizontal block flow (which is leftward or rightward block flow). To avoid confusion, CSS specifications avoid this latter set of terms.

Writing systems typically have one or two native writing modes. Some examples are:

The text-orientation component of the writing mode determines the line orientation, and controls details of text layout such as the glyph orientation.

See Unicode Technical Note #22 [UTN22] (HTML version) for a more in-depth introduction to writing modes and vertical text.

1.1 Module Interactions

This module replaces and extends the unicode-bidi and direction features defined in [CSS21] sections 8.6 and 9.10.

1.2 Values

This specification follows the CSS property definition conventions from [CSS21]. Value types not defined in this specification are defined in CSS Level 2 Revision 1 [CSS21]. Other CSS modules may expand the definitions of these value types: for example [CSS3COLOR], when combined with this module, expands the definition of the <color> value type as used in this specification.

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the inherit keyword as their property value. For readability it has not been repeated explicitly.

2 Inline Direction and Bidirectionality

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 bidirectionality, or "bidi" for short.

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


The Unicode standard (Unicode Standard Annex #9) 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.

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 “bidi type Bforced paragraph break. This sequence forms the paragraph unit in the bidirectional algorithm. Additionally, any such sequence forming part or all of the contents of a bidi-isolated inline element also forms a bidi paragraph.

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. If a document language provides markup features to control bidi, authors and users should use those features instead and not specify CSS rules to override them.

In general, the paragraph embedding level is set according to the direction property of the paragraph’s containing block rather than by the heuristic given in steps P2 and P3 of the Unicode algorithm. [UAX9] When the computed unicode-bidi of the paragraph’s containing block is plaintext, however, the Unicode heuristics (rules P2 and P3) are used instead.

The HTML specifications ([HTML401], section 8.2, and [HTML5], section 10.3.5) define bidirectionality behavior for HTML elements.

Because HTML UAs can turn off CSS styling, we advise HTML authors to use the HTML dir attribute and <bdo> element to ensure correct bidirectional layout in the absence of a style sheet.

2.1 Specifying Directionality: the direction property

Value:ltr | rtl
Applies to:all elements
Computed value:specified value
Canonical order:n/a

This property specifies the inline base direction or directionality of any bidi paragraph, embedding, isolate, or override established by the element. (See unicode-bidi.) In addition, it informs the ordering of table column layout, the direction of horizontal overflow, and the default alignment of text within a line, and other layout effects that depend on the element’s inline base direction.

Values for this property have the following meanings:

Left-to-right directionality.
Right-to-left directionality.

The direction property has no effect on bidi reordering when specified on inline elements whose unicode-bidi property’s value is normal, because the element does not open an additional level of embedding with respect to the bidirectional algorithm.

The value of the direction property on the root element is also propagated to the initial containing block and, together with the writing-mode property, determines the document’s principal writing mode. (See below.)

Note that the direction property of the HTML BODY element is not propagated to the viewport. That special behavior only applies to the background and overflow properties.

The direction property, when specified for table column elements, 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

2.2 Embeddings and Overrides: the unicode-bidi property

Value:normal | embed | isolate | bidi-override | isolate-override | plaintext
Applies to:all elements, but see prose
Computed value:specified value

Normally (i.e. when unicode-bidi is normal) an inline element is transparent to the unicode bidi algorithm; content is ordered as if the element’s boundaries were not there. Other values of the unicode-bidi property cause inline elements to create scopes within the algorithm, and to override the intrinsic directionality of text.

The following informative table summarizes the element-internal and element-external effects of unicode-bidi:

Effect of non-normal values of unicode-bidi on inline elements
strong neutral
Inside scoped embed isolate
override bidi-override isolate-override
plaintext plaintext

Values for this property have the following (normative) meanings:

The element does not open an additional level of embedding with respect to the bidirectional algorithm. For inline elements, implicit reordering works across element boundaries.
If the element is inline, this value creates a directional embedding 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 element, reordering is done implicitly. This corresponds to adding a LRE (U+202A), for direction: ltr, or RLE (U+202B), for direction: rtl, at the start of the element and a PDF (U+202C) at the end of the element. This value has no effect on elements that are not inline.
On an inline element, this bidi-isolates 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 forced paragraph break is treated as an isolated sequence: In effect, neither is the content inside the element bidi-affected by the content surrounding the element, nor is the content surrounding the element bidi-affected by the content or specified directionality of the element. However, forced paragraph breaks within the element still create a corresponding break in the containing paragraph.

In Unicode 6.3 and beyond, this will correspond to adding an LRI (U+2066), for direction: ltr, or RLI (U+2067), for direction: rtl, at the start of the element, and a PDI (U+2069) at the end of the element.

This value has no effect on elements that are not inline.

This value puts the element’s immediate content in a directional override. For an inline, this means that the element acts like a directional embedding 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. This corresponds to adding a LRO (U+202D), for direction: ltr, or RLO (U+202E), for direction: rtl, at the start of the element and a PDF (U+202C) at the end of the element. If the element is a block container, the override is applied to an anonymous inline element that surrounds all of its content.
This combines the isolation behavior of isolate with the directional override behavior of bidi-override: to surrounding content, it is equivalent to isolate, but within the element content is ordered as if bidi-override were specified.

This value behaves as isolate except that for the purposes of the Unicode bidirectional algorithm, the base directionality of each of the element’s bidi paragraphs (if a block container) or isolated sequences (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 element).

In Unicode 6.3 and beyond, for inline elements this will correspond to adding an FSI (U+2068) at the start of the element, and a PDI (U+2069) at the end of the element.

Because the unicode-bidi property does not inherit, setting bidi-override or plaintext on a block element will not affect any descendant blocks. Therefore these values are best used on blocks and inlines that do not contain any block-level structures.

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.

The final order of characters within each bidi paragraph is the same as if the bidi control codes had been added as described 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.

In this process, replaced elements 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. All other atomic inline-level boxes are treated as neutral characters always.

If an inline element is broken around a bidi paragraph boundary (e.g. if split by a block or forced paragraph break), then the bidi control codes assigned to the end of the element are added before the interruption and the codes assigned to the start of the element are added after it. (In other words, any embedding levels or overrides started by the element are closed at the paragraph break and reopened on the other side of it.)

For example, where <BR/> is a forced paragraph break the bidi ordering is identical between




for all values of unicode-bidi on inline elements <i1> and <i2>.

Because the Unicode algorithm has a limit of 61 levels of embedding, care should be taken not to use unicode-bidi with a value other than normal unless appropriate. In particular, a value of inherit should be used with extreme caution. 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 inline (see example below).

2.3 Example of Bidirectional Text

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.

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 in logical backing store order.

<section dir=rtl>
  <para>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</para>
  <para>HEBREW6 <emphasis>HEBREW7</emphasis> HEBREW8</para>
<section dir=ltr>
  <para>english9 english10 english11 HEBREW12 HEBREW13</para>
  <para>english14 english15 english16</para>
  <para>english17 <quote dir=rtl>HEBREW18 english19 HEBREW20</quote></para>

Since this is arbitrary XML, the style sheet is responsible for setting the writing direction. This is the style sheet:

/* Rules for bidi */
[dir=ltr] {direction: rtl;}
[dir=rtl] {direction: ltr;}
quote     {unicode-bidi: isolate;}

/* Rules for presentation */
section, para  {display: block;}
emphasis       {font-weight: bold;}

The first <section> element is a block with a right-to-left base direction, the second <section> element is a block with a left-to-right base direction. The <para>s are blocks that inherit the base direction from their parents. Thus, the first two <para>s are read starting at the top right, the final three are read starting at the top left.

The <emphasis> 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. The <quote> element, on the other hand, creates an isolated sequence with the given internal directionality.

The formatting of this text might look like this if the line length is long:

           5WERBEH 4WERBEH english3 2WERBEH 1WERBEH

                            8WERBEH 7WERBEH 6WERBEH

english9 english10 english11 13WERBEH 12WERBEH

english14 english15 english16

english17 20WERBEH english19 18WERBEH

Note that the <quote> embedding causes HEBREW18 to be to the right of english19.

If lines have to be broken, it might be more like this:

  -EH 4WERBEH english3


english9 english10 en-
glish11 12WERBEH

english14 english15

english17 18WERBEH
20WERBEH english19

Because HEBREW18 must be read before english19, it is on the line above english19. Just breaking the long line from the earlier formatting would not have worked. Note also that the first syllable from english19 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.

2.4 Box model for inline elements in bidirectional context

Since bidi reordering can split apart and reorder text that is logically contiguous, bidirectional text can cause an inline box to be split and reordered within a line.

Note that in order to be able to flow inline boxes in a uniform direction (either entirely left-to-right or entirely right-to-left), anonymous inline boxes may have to be created.

For each line box, UAs must take the inline boxes generated for each element and render the margins, borders and padding in visual order (not logical order). The start-most box on the first line box in which the element appears has the start edge’s margin, border, and padding; and the end-most box on the last line box in which the element appears has the end edge’s margin, border, and padding. For example, in the horizontal-tb writing mode:

Analogous rules hold for vertical writing modes.

The box-decoration-break property can override this behavior to draw box decorations on both sides of each box. [CSS3BG]

3 Introduction to Vertical Text

This subsection is non-normative.

In addition to extensions to CSS2.1’s support for bidirectional text, this module introduces the rules and properties needed to support vertical text layout in CSS.

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.

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.

Comparison of vertical and horizontal Japanese: iBunko application (iOS)

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.

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.

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:

A dictionary definition for ヴィルス
                 might write the English word 'virus' rotated 90° clockwise,
                 but stack the letters of the initialisms 'RNA' and 'DNA' upright.

Examples of Latin in vertical Japanese: Daijirin Viewer 1.4 (iOS)

In some special cases such as two-digit numbers in dates, text is fit compactly into a single vertical character box:

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
                 “for Mac 2011”, where the date is rotated to
                 match the rotated Latin.

Mac Fan, December 2010, p.49

Layouts often involve a mixture of vertical and horizontal elements:

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.

Mixture of vertical and horizontal elements

Vertical text layouts also need to handle bidirectional text layout; clockwise-rotated Arabic, for example, is laid out bottom-to-top.

3.1 Block Flow Direction: the writing-mode property

Value:horizontal-tb | vertical-rl | vertical-lr
Applies to:All elements except table row groups, table column groups, table rows, and table columns
Computed value:specified value
Canonical order:n/a

This property specifies whether lines of text are laid out horizontally or vertically and the direction in which blocks progress. Possible values:

Top-to-bottom block flow direction. The writing mode is horizontal.
Right-to-left block flow direction. The writing mode is vertical.
Left-to-right block flow direction. The writing mode is vertical.

The writing-mode property specifies the block flow direction, which determines the progression of block-level boxes in a block formatting context; the progression of line boxes in a block container that contains inlines; the progression 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 writing mode) is horizontal or vertical. The text-orientation property then determines how text is laid out within the line box.

The principal writing mode of the document is determined by the writing-mode and direction values specified on the root element. This writing mode is used, for example, to determine the default page progression direction. (See [CSS3PAGE].) Like direction, the writing-mode value of the root element is also propagated to the initial containing block and sets the block flow direction of the initial block formatting context.

Note that the writing-mode property of the HTML BODY element is not propagated to the viewport. That special behavior only applies to the background and overflow properties.

If an element has a different block flow direction than its containing block:

The content of replaced elements do not rotate due to the writing mode: images, for example, remain upright. However 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.

In the following example, two block elements (1 and 3) separated by an image (2) are presented in various flow writing modes.

Here is a diagram of horizontal writing mode (writing-mode: horizontal-tb):

Diagram of horizontal layout: blocks 1, 2, and 3 are stacked top-to-bottom

Here is a diagram for the right-to-left vertical writing mode commonly used in East Asia (writing-mode: vertical-rl):

Diagram of a right-to-left vertical layout: blocks 1, 2,
                  and 3 are arranged side by side from right to left

And finally, here is a diagram for the left-to-right vertical writing mode used for Manchu and Mongolian (writing-mode: vertical-lr):

Diagram of left-to-right vertical layout: blocks 1, 2,
                  and 3 are arranged side by side from left to right

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.

  form { writing-mode: vertical-rl; }
<p><label>姓名 <input value="艾俐俐"></label>
<p><label>语文 <select><option>English

Screenshot of vertical layout: the input element is
                laid lengthwise from top to bottom and its contents
                rendered in a vertical writing 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.

In this example, writing-mode sets the list markers upright using the ::marker pseudo-element. Vertical alignment ensures that longer numbers will still align with the right of the first line of text. [CSS3LIST]

::marker { writing-mode: horizontal-tb;
            vertical-align: text-top;
            color: blue; }

Diagram showing list markers of '1.', '2.', '3.' sitting
                   upright atop sideways vertical Latin list item text.

Example of horizontal list markers in a vertical list

3.1.1 SVG1.1 writing-mode Values

SVG1.1 [SVG11] defines some additional values: lr, lr-tb, rl, rl-tb, tb, and tb-rl.

These values are deprecated in any context except SVG1 documents. Implementations that wish to support these values in the context of CSS must treat them as follows:

SVG1/Obsolete CSS
lr horizontal-tb
tb vertical-rl

The SVG1.1 values were also present in an older revision of the CSS writing-mode specification, which is obsoleted by this specification. The additional tb-lr value of that revision is replaced by vertical-lr.

In SVG1.1, these values set the inline progression direction, in other words, the direction the current text position advances each time a glyph is added. This is a geometric process that happens after bidi reordering, and thus has no effect on the interpretation of the direction property (which is independent of writing-mode). (See Relationship with bidirectionality. [SVG11])

There are varying interpretations on whether this process causes "writing-mode: rl" to merely shift the text string or reverse the order of all glyphs in the text.

4 Inline-level Alignment

When different kinds of inline-level content are placed together on a line, the baselines of the content and the settings of the vertical-align property control how they are aligned in the transverse direction of the line box. This section discusses what baselines are, how to find them, and how they are used together with the vertical-align property to determine the alignment of inline-level content.

4.1 Introduction to Baselines

This section is non-normative.

A baseline is a line along the inline axis of a line box along which individual glyphs of text are aligned. Baselines guide the design of glyphs in a font (for example, the bottom of most alphabetic glyphs typically align with the alphabetic baseline), and they guide the alignment of glyphs from different fonts or font sizes when typesetting.

[Picture of alphabetic text in two font sizes with the baseline and emboxes indicated.]

Different writing systems prefer different baseline tables.

Latin prefers the alphabetic baseline, on top of which most
                 letters rest, though some have descenders that dangle below it.
                 Indic scripts are sometimes typeset with a hanging baseline,
                 since their glyph shapes appear to be hanging from a
                 horizontal line.
                 Han-based systems, whose glyphs are designed to fill a square,
                 tend to align on their bottoms.

Preferred baselines in various writing systems

A well-constructed font contains a baseline table, which indicates the position of one or more baselines within the font’s design coordinate space. (The design coordinate space is scaled with the font size.)

In a well-designed mixed-script font, the glyphs are positioned in the coordinate space to harmonize with one another when typeset together. The baseline table is then constructed to match the shape of the glyphs, each baseline positioned to match the glyphs from its preferred scripts.

The baseline table is a property of the font, and the positions of the various baselines apply to all glyphs in the font.

Different baseline tables can be provided for alignment in horizontal and vertical text. UAs should use the vertical tables in vertical writing modes and the horizontal tables otherwise.

4.2 Text Baselines

In this specification, only the following baselines are considered:

The alphabetic baseline, which typically aligns with the bottom of uppercase Latin glyphs.
The central baseline, which typically crosses the center of the em box. If the font is missing this baseline, it is assumed to be halfway between the ascender (over) and descender (under) edges of the em box.

In vertical writing mode, the central baseline is used as the dominant baseline when text-orientation is mixed or upright. Otherwise the alphabetic baseline is used.

A future CSS module will deal with baselines in more detail and allow the choice of other dominant baselines and alignment options.

4.3 Atomic Inline Baselines

If an atomic inline (such as an inline-block, inline-table, or replaced inline element) is not capable of providing its own baseline information, then the UA synthesizes a baseline table thus:

The alphabetic baseline is assumed to be at the under margin edge.
The central baseline is assumed to be halfway between the under and over margin edges of the box.

4.4 Baseline Alignment

The dominant baseline (which can change based on the writing mode) is used in CSS for alignment in two cases:

5 Introduction to Vertical Text Layout

Each writing system has one or more native orientations. Modern scripts can therefore be classified into three orientational categories:

Scripts that have horizontal, but not vertical, native orientation. Includes: Latin, Arabic, Hebrew, Devanagari
Scripts that have vertical, but not horizontal, native orientation. Includes: Mongolian, Phags Pa
Scripts that have both vertical and horizontal native orientation. Includes: Han, Hangul, Japanese Kana

A vertical script is one that has a native vertical orientation: i.e. one that is either vertical-only or that is bi-orientational. A horizontal script is one that has a native horizontal orientation: i.e. one that is either horizontal-only or that is bi-orientational. (See Appendix B for a categorization of scripts by native orientation.)

A Venn diagram of these distinctions would show two circles:
                     one labelled 'vertical', the other 'horizontal'. The overlapped
                     region would represent the bi-orientational scripts, while
                     horizontal-only and vertical-only scripts would occupy their
                     respective circles' exclusive regions.

In modern typographic systems, all glyphs are assigned a horizontal orientation, which is used when laying out text horizontally. To lay out vertical text, the UA needs to transform the text from its horizontal orientation. This transformation is the bi-orientational transform, and there are two types:

Rotate the glyph from horizontal to vertical Rotate the glyph from horizontal to vertical
Translate the glyph from horizontal to vertical Translate the glyph from horizontal to vertical

Scripts with a native vertical orientation have an intrinsic bi-orientational transform, which orients them correctly in vertical text: most CJK (Chinese/Japanese/Korean) characters translate, that is, they are always upright. Characters from other scripts, such as Mongolian, rotate.

Scripts without a native vertical orientation can be either rotated (set sideways) or translated (set upright): the transform used is a stylistic preference depending on the text’s usage, rather than a matter of correctness. The text-orientation property’s mixed and upright values are provided to specify rotation vs. translation of horizontal-only text.

The sideways-left, sideways-right, and sideways values of text-orientation are provided for decorative layout effects and to work around limitations in CSS support for bottom-to-top scripts.

5.1 Orienting Text: the text-orientation property

Value:mixed | upright | sideways-right | sideways-left | sideways | use-glyph-orientation
Applies to:all elements except table row groups, rows, column groups, and columns
Computed value:specified value
Canonical order:n/a

This property specifies the orientation of text within a line. Current values only have an effect in vertical writing modes; the property has no effect on elements in horizontal writing modes.

For readability, the term character is used in place of extended grapheme cluster in this section. See Characters and Properties for further details.

Values have the following meanings:


In vertical writing modes, characters from horizontal-only scripts are set sideways, i.e. 90° clockwise from their standard orientation in horizontal text. Characters from vertical scripts are set with their intrinsic orientation. See Vertical Orientations for further details.

This value is typical for layout of primarily vertical-script text.


In vertical writing modes, characters from horizontal-only scripts are rendered upright, i.e. in their standard horizontal orientation. Characters from vertical scripts are set with their intrinsic orientation and shaped normally. See Vertical Orientations for further details.

For the purposes of bidi reordering, this value causes all characters to be treated as strong LTR. This value causes the used value of direction to be ltr.


In vertical writing modes, this causes text to be set as if in a horizontal layout, but rotated 90° clockwise.


In vertical writing modes, this causes text to be set as if in a horizontal layout, but rotated 90° counter-clockwise.

If set on a non-replaced inline whose parent is not sideways-left, this forces bidi isolation: the normal and embed values of unicode-bidi compute to isolate, and bidi-override computes to isolate-override. Layout of text is exactly as for sideways-right except that the baseline table of each of the element’s inline boxes is mirrored around a vertical axis along the center of its content box and text layout is rotated 180° to match. The positions of text decorations propagated from an ancestor inline (including the block container’s root inline) are not mirrored, but any text decorations introduced by the element are positioned using the mirrored baseline table.

Similarly, if an inline child of the element has a text-orientation value other than sideways-left, an analogous transformation (and bidi isolation) is applied.


This value is equivalent to sideways-right in vertical-rl writing mode and equivalent to sideways-left in vertical-lr writing mode. It can be useful when setting horizontal script text vertically in a primarily horizontal-only document.


[SVG11] defines glyph-orientation-vertical and glyph-orientation-horizontal properties that were intended to control text orientation. These properties are deprecated and do not apply to non-SVG elements. If an implementation supports these properties, the use-glyph-orientation value when set on SVG elements indicates that the SVG glyph-orientation-vertical and glyph-orientation-horizontal behavior control the layout of text. Such UAs must set text-orientation: use-glyph-orientation on all SVG text content elements in their default UA style sheet for SVG.

In all other contexts, and for implementations that do not support the glyph orientation properties, the use-glyph-orientation behavior is the same as for mixed.

This value is at-risk and may be dropped during CR.

text-orientation: mixed text-orientation: upright text-orientation: sideways-left text-orientation: sideways-right
mixed upright sideways-left sideways-right

text-orientation values (writing-mode is vertical-rl)

In the following example, the root element of a horizontal-only document is set to use sideways. In the rest of the document, the author can just set writing-mode without worrying about whether the text is vertical-rl or vertical-lr.

  :root { text-orientation: sideways; }
  caption { caption-side: left; writing-mode: vertical-lr; }
  thead th { writing-mode: vertical-lr; }
  h1.banner { position: absolute; top: 0; right: 0; writing-mode: vertical-rl; }

Changing the value of this property may affect inline-level alignment. Refer to Text Baselines for more details.

5.1.1 Vertical Typesetting and Font Features

When typesetting text in mixed and upright orientations:

upright characters
Are typeset upright with vertical font metrics. The UA must synthesize vertical font metrics for fonts that lack them. (This specification does not define heuristics for synthesizing such metrics.) Additionally, font features (such as alternate glyphs and other transformation) intended for use in vertical typesetting must be used. (E.g. the OpenType vert feature must be enabled.) Furthermore, characters from horizontal cursive scripts (such as Arabic) are shaped in their isolated forms when typeset upright.

Note that even when typeset "upright", some glyphs should appear rotated. For example, dashes and enclosing punctuation should be oriented relative to the inline axis. In OpenType, this is typically handled by glyph substitution, although not all fonts have alternate glyphs for all relevant codepoints. (East Asian fonts usually provide alternates for East Asian codepoints, but Western fonts typically lack any vertical typesetting features and East Asian fonts typically lack vertical substitutions for Western codepoints.) Unicode published draft data on which characters should appear sideways as the SVO property in this data file; however, this property has been abandoned for the current revision of [UTR50].

Characters which are classified as Tr or Tu in [UTR50] are expected to have alternate glyphs or positioning for typesetting upright in vertical text. In the case of Tr characters, if such vertical alternate glyphs are missing from the font, the UA may wish to [RFC6919] (but is not expected to) synthesize the missing glyphs by typesetting them sideways etc.

sideways characters
Are typeset rotated 90° sideways with horizontal metrics, and vertical typesetting features are not used. However, if the font has features meant to be enabled for sideways text that is typeset in vertical lines (e.g. to adjust brush stroke angles or alignment), those features are used. (An example of such a feature would be the proposed vrtr OpenType font feature.)

All text in sideways, sideways-right, and sideways-left orientations is typeset using horizontal font metrics and the normal set of features used for horizontal text runs. Vertical metrics, vertical glyph variations, and any other features meant for text typeset in vertical lines are not used.

5.1.2 Mixed Vertical Orientations

[UTR50] defines the Vertical_Orientation property for the default character orientation of mixed-orientation vertical text. When text-orientation is mixed, the UA must typeset a character upright if its orientation property is U, Tu, or Tr; or typeset it sideways (90° clockwise from horizontal) if its orientation property is R.

Note that UTR50 does not handle inherently bottom-to-top scripts, so they will not be typeset correctly with mixed orientation. Use sideways-left for such scripts.

The OpenType vrt2 feature, which is intended for mixed-orientation typesetting, is not used by CSS. It delegates the responsibility for orienting glyphs to the font designer. CSS instead dictates the orientation through [UTR50] and orients glyphs by typesetting them sideways or upright as appropriate.

6 Abstract Box Terminology

CSS2.1 [CSS21] defines the box layout model of CSS in detail, but only for the horizontal-tb writing mode. Layout is analogous in writing modes other than horizontal-tb; however directional and dimensional terms in CSS2.1 must be abstracted and remapped appropriately.

This section defines abstract directional and dimensional terms and their mappings in order to define box layout for other writing modes, and to provide terminology for future specs to define their layout concepts abstractly. (The next section explains how to apply them to CSS2.1 layout calculations and how to handle orthogonal flows.) Although they derive from the behavior of text, these abstract mappings exist even for boxes that do not contain any line boxes: they are calculated directly from the values of the writing-mode, text-orientation, and direction properties.

There are three sets of directional terms in CSS:

Interpreted relative to the page, independent of writing mode. The physical directions are left, right, top, and bottom.
Interpreted relative to the flow of content. The flow-relative directions are start and end, or block-start, block-end, inline-start, and inline-end if the dimension is also ambiguous.
Interpreted relative to the orientation of the line box. The line-relative directions are line-left, line-right, over, and under.

The physical dimensions are width and height, which correspond to measurements along the x-axis (vertical dimension) and y-axis (horizontal dimension), respectively. Abstract dimensions are identical in both flow-relative and line-relative terms, so there is only one set of these terms.

Note: [CSS3-FLEXBOX] also defines flex-relative terms, which are used in describing flex layout.

6.1 Abstract Dimensions

The abstract dimensions are defined below:

block dimension
The dimension perpendicular to the flow of text within a line, i.e. the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes.
inline dimension
The dimension parallel to the flow of text within a line, i.e. the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes.
block axis
The axis in the block dimension, i.e. the vertical axis in horizontal writing modes and the horizontal axis in vertical writing modes.
inline axis
The axis in the inline dimension, i.e. the horizontal axis in horizontal writing modes and the vertical axis in vertical writing modes.
extent or logical height
A measurement in the block dimension: refers to the physical height (vertical dimension) in horizontal writing modes, and to the physical width (horizontal dimension) in vertical writing modes.
measure or logical width
A measurement in the inline dimension: refers to the physical width (horizontal dimension) in horizontal writing modes, and to the physical height (vertical dimension) in vertical writing modes. (The term measure derives from its use in typography.)

6.2 Flow-relative Directions

The flow-relative directions, block-start, block-end, inline-start, and inline-end, are defined relative to the flow of content on the page. In an LTR horizontal-tb writing mode, they correspond to the top, bottom, left, and right directions, respectively. They are defined as follows:

Nominally the side that comes earlier in the block progression, as determined by the writing-mode property: the physical top in horizontal-tb mode, the right in vertical-rl, and the left in vertical-lr.
The side opposite block-start.
Nominally the side from which text of its inline base direction will start. For boxes with a used direction value of ltr, this means the line-left side. For boxes with a used direction value of rtl, this means the line-right side.
The side opposite start.

Where unambiguous (or dual-meaning), the terms start and end are used in place of block-start/inline-start and block-end/inline-end, respectively.

Note that while determining the block-start and block-end sides of a box depends only on the writing-mode property, determining the inline-start and inline-end sides of a box depends not only on the writing-mode property but also the direction and text-orientation properties.

An English (LTR-TB) block:

              <----- width / measure  ----->

                         top side/
                      block-start side
              +------------------------------+                  A
  left side/  |   ---inline direction --->   |  right side/     |
inline-start side |  |                           |  inline-end side |
              |  | block      * horizontal * |                height/
              |  | direction  *writing mode* |                extent
              |  V                           |                  |
              +------------------------------+                  V
                         bottom side/
                        block-end side

A vertical Japanese block (TTB-RL):

              <----- width / extent ------>

                         top side/
                     inline-start side
              +------------------------------+                  A
  left side/  |    <---block direction---    |  right side/     |
  block-end side  |                           |  | block-start side |
              |  *  vertical  *     inline|  |                height/
              |  *writing mode*  direction|  |                measure
              |                           V  |                  |
              +------------------------------+                  V
                        bottom side/
                       inline-end side

6.3 Line-relative Directions

The line orientation determines which side of a line box is the logical “top” (ascender side). It is given by a combination of text-orientation and writing-mode. Usually the line-relative “top” corresponds to the block-start side, but this is not always the case: in Mongolian typesetting (and thus by default in vertical-lr writing modes), the line-relative “top” corresponds to the block-end side. Hence the need for distinct terminology.

Mongolian mixed with English

A primarily Mongolian document, such as the one above, is written in vertical lines stacking left to right, but lays its Latin text with the tops of the glyphs towards the right. This makes the text run in the same inline direction as Mongolian (top-to-bottom) and face the same direction it does in other East Asian layouts (which have vertical lines stacking right to left), but the glyphs' tops are facing the bottom of the line stack rather than the top, which in an English paragraph would be upside-down. (See this Diagram of Mongolian Text Layout.)

In addition to a line-relative “top” and “bottom” to map things like 'vertical-align: top', CSS also needs to refer to a line-relative “left” and “right” in order to map things like text-align: left. Thus there are four line-relative directions, which are defined relative to the line orientation as follows:

Nominally the side that corresponds to the ascender side or “top” side of a line box. (The side overlines are typically drawn on.)
Opposite of over: the line-relative “bottom” or descender side. (The side underlines are typically drawn on.)
Nominally the side from which LTR text would start.
Nominally the side from which RTL text would start. (Opposite of line-left.)

See the table below for the exact mappings between physical and line-relative directions.

Line orientation compass

Line orientation compass

Typical orientation in vertical

Typical orientation in vertical

Line orientation with ‘text-orientation: sideways-left’

Line orientation with text-orientation: sideways-left

6.4 Abstract-to-Physical Mappings

The following table summarizes the abstract-to-physical mappings:

Abstract-Physical Mapping
writing-mode horizontal-tb vertical-rl vertical-lr
text-orientation sideways-left *right sideways-left *right
direction ltr rtl ltr rtl ltr rtl ltr rtl ltr rtl
extent height width
measure width height
block-start top right left
block-end bottom left right
inline-start left right bottom top top bottom bottom top top bottom
inline-end right left top bottom bottom top top bottom bottom top
over top left right left right
under bottom right left right left
line-left left bottom top bottom top
line-right right top bottom top bottom

7 Abstract Box Layout

7.1 Principles of Layout in Vertical Writing Modes

CSS box layout in vertical writing modes is analogous to layout in the horizontal writing modes, following the principles outlined below:

Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes. Likewise, layout calculation rules (such as those in CSS2.1, Section 10.6) that apply to the vertical dimension in horizontal writing modes instead apply to the horizontal dimension in vertical writing modes. Thus:

For example, in vertical writing modes, table rows are vertical and table columns are horizontal. In a vertical-rl mixed rtl table, the first column would be on the bottom (the inline-start side), and the first row on the right (the block-start side). The table’s margin-right and margin-left would collapse with margins before (on the right) and after (on the left) the table, respectively, and if the table had auto values for margin-top and margin-bottom it would be centered vertically within its block flow.

Diagram of a vertical-rl mixed rtl table in a
        vertical block formatting context, showing the ordering of rows,
        cells, and columns as described above.

Table in vertical-rl RTL writing mode

For features such as text alignment, floating, and list marker positioning, that primarily reference the left or right sides of the line box or its longitudinal parallels and therefore have no top or bottom equivalent, the line left and line right sides are used as the reference for the left and right sides respectively.

Likewise for features such as underlining, overlining, and baseline alignment (the unfortunately-named vertical-align), that primarily reference the top or bottom sides of the linebox or its transversal parallels and therefore have no left or right equivalent, the over and under sides are used as the reference for the top and bottom sides respectively.

The details of these mappings are provided below.

7.2 Dimensional Mapping

Certain properties behave logically as follows:

The height properties (height, min-height, and max-height) refer to the physical height, and the width properties (width, min-width, and max-width) refer to the physical width. However, the rules used to calculate box dimensions and positions are logical.

For example, the calculation rules in CSS2.1 Section 10.3 are used for the inline dimension measurements: they apply to the measure (which could be either the physical width or physical height) and to the inline-start and inline-end margins, padding, and border. Likewise the calculation rules in CSS2.1 Section 10.6 are used in the block dimension: they apply to the extent and to the block-start and block-end margins, padding, and border. [CSS21]

As a corollary, percentages on the margin and padding properties, which are always calculated with respect to the containing block width in CSS2.1, are calculated with respect to the measure of the containing block in CSS3.

7.3 Orthogonal Flows

When an element has a different writing-mode from its containing block two cases are possible:

When an element has a writing mode that is perpendicular to its containing block it is said to be in, or establish, an orthogonal flow.

To handle this case, CSS layout calculations are divided into two phases: sizing a box, and positioning the box within its flow.

Since auto margins are resolved consistent with the containing block’s writing mode, a box establishing an orthogonal flow can, once sized, be aligned or centered within its containing block just like other block-level elements by using auto margins.

For example, if a vertical block is placed inside a horizontal block, then when calculating the physical height (which is the measure) of the child block the physical height of the parent block is used as the child’s containing block measure, even though the physical height is the extent, not the measure, of the parent block.

On the other hand, because the containing block is in a horizontal writing mode, the vertical margins on the child participate in margin-collapsing, even though they are in the inline-axis of the child, and horizontal auto margins will expand to fill the containing block, even though they are in the block-axis of the child.

Add a picture.

7.3.1 Auto-sizing in Orthogonal Flows

It is common in CSS for a containing block to have a definite measure, but not a definite extent. This typically happens in CSS2.1 when a containing block has an auto height, for example: its width is given by the calculations in 10.3.3, but its extent depends on its contents. In such cases the available measure is defined as the measure of the containing block; but the available extent, which would otherwise be the extent of the containing block, is infinite.

Putting a box in an orthogonal flow allows the opposite to happen: for the available extent to be defined, but the available measure to be indefinite. In such cases a percentage of the containing block measure cannot be defined, and inline-axis computations cannot be resolved. In these cases, the initial containing block’s size is used as a fallback variable in place of the available measure for calculations that require a definite available measure.

This section needs careful review for whether it is a) correct and b) sensible.

7.3.2 Auto-sizing Block Containers in Orthogonal Flows

If an element establishing an orthogonal flow is a block container or multi-column element, for the case where the element’s extent or available extent is definite but the element’s measure is auto:

  1. If column-count and column-width are both auto, calculate the used column-width as: min(max-content, max(min-content, min(fill-available, fill-fallback))), where:
    the min-content measure of the element
    the max-content measure of the element
    the fill-available fit into the element’s containing block’s size in the element’s inline axis
    the fill-available fit into the initial containing block’s size in the element’s inline axis

    See [CSS3-SIZING] for further details.

  2. If the columns' extent is indefinite, the fill-available extent of the element is used.
  3. The used column-count then follows from filling the resulting columns with the element’s content.

The used measure of the resulting multi-column element is then calculated: if the content neither line-wraps nor fragments within the multi-column element, then the used measure is the max-content measure of the element’s contents; else it is calculated from the used column-width, column-count, and column-gap.

The used extent of the element is either the used column extent (if multiple columns were used) or the max-content extent of the content.

This automatically triggers multi-column flow so that overflowing content, instead of continuing off the side of the containing block, is wrapped into columns in the flow direction of the containing block, thus avoiding T-shaped documents.

If the UA does not support CSS Multi-column Layout [CSS3COL], the UA may instead calculate the element’s measure assuming an infinite extent, thus laying out its contents into a single column. Note that this can, however, result in content that is clipped or otherwise inaccessible.

7.3.3 Auto-sizing Orthogonal Flows

In order to limit the length of lines, block containers have special auto-sizing behavior when their available measure is infinite (which typically occurs when they establish an orthogonal flow).

Other layout models simply shrink-wrap (as floats do) into the infinite available measure; but pass through the infinite limit to block containers they contain:

7.3.4 Fragmenting Orthogonal Flows

This section is informative.

With regards to fragmentation, the rules in CSS2.1 still hold in vertical writing modes and orthogonal flows: break opportunities do not occur inside line boxes, only between them. UAs that support [CSS3COL] may break in the (potentially zero-width) gap between columns, however.

Note that if content spills outside the pagination stream established by the root element, the UA is not required to print such content. Authors wishing to mix writing modes with long streams of text are thus encouraged to use CSS columns to keep all content flowing in the document’s pagination direction.

In other words, if your document would require two scrollbars on the screen it probably won’t all print. Fix your layout, e.g. by using columns so that it all scrolls (and therefore paginates) in one direction if you want to make sure it’ll all print. T-shaped documents tend not to print well.

7.4 Flow-Relative Mappings

Flow-relative directions are calculated with respect to the writing mode of the containing block of the element and used to abstract layout rules related to the box properties (margins, borders, padding) and any properties related to positioning the box within its containing block (float, clear, top, bottom, left, right) For inline-level elements, the writing mode of the parent element is used instead.

For example, the margin that is dropped when a box’s inline dimension is over-constrained is the end margin as determined by the writing mode of the containing block.

The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin. Similarly the block-start padding and border are substituted for the top padding and border, and the block-end padding and border substituted for the bottom padding and border. Note this means only block-start and block-end margins ever collapse.

Flow-relative directions are calculated with respect to the writing mode of the element and used to abstract layout related to the element’s contents:

7.5 Line-Relative Mappings

The line-relative directions are over, under, line-left, and line-right. In an LTR horizontal-tb writing mode, they correspond to the top, bottom, left, and right directions, respectively.

The line-right and line-left directions are calculated with respect to the writing mode of the element and used to interpret the left and right values of the following properties:

The line-right and line-left directions are calculated with respect to the writing mode of the containing block of the element and used to interpret the left and right values of the following properties:

The over and under directions are calculated with respect to the writing mode of the element and used to define the interpretation of the "top" (over edge) and "bottom" (under edge) of the line box as follows:

7.6 Purely Physical Mappings

The following values are purely physical in their definitions and do not respond to changes in writing mode:

7.7 Table Caption Mappings: the caption-side keywords

New values:block-start | block-end

This module introduces two new values to the caption-side property: block-start and block-end, which position the caption before and after the table box, respectively. For tables with horizontal-tb writing mode, they are equivalent to the existing top and bottom values, respectively. [CSS21]

For implementations that support the top-outside and bottom-outside model, corresponding start-outside and end-outside are similarly introduced.

Implementations that support the top and bottom values of the caption-side property but do not support side captions (i.e. left and right captions in horizontal writing modes) must treat both top and bottom as block-start, when the table is in a vertical writing mode.

For implementations that do support side captions (i.e. the left and right values from the obsolete CSS 2.0 specification [CSS2]), this module also introduces the inline-start and inline-end values, which behave similarly and which position the caption on the inline-start and inline-end sides of the table box, calculated with respect to the writing mode of the table element. For such implementations, the top and bottom values must place the caption on the top and bottom sides of the table box, respectively.

The CSS2.0 side caption model had some problems and will likely have a different definition in CSS3.

8 Page Flow: the page progression direction

In paged media CSS2.1 classifies all pages as either left or right pages. The page progression direction, which determines whether the left or right page in a spread is first in the flow and whether the first page is by default a left or right page, depends on the writing direction as follows:

(Unless otherwise overridden, the first page of a document begins on the second half of a spread, e.g. on the right page in a left-to-right page progression.)

9 Glyph Composition

9.1 Horizontal-in-Vertical Composition: the text-combine-horizontal property

Value:none | all | [ digits <integer>? ]
Applies to:non-replaced inline elements
Computed value:specified keyword, plus integer if digits
Canonical order:n/a

Better (more obvious + easier to type) name for this?

This property specifies the combination of multiple characters into the space of a single character. If the combined text is wider than 1em, the UA must fit the contents within 1em, see below. The resulting composition is treated as a single upright glyph for the purposes of layout and decoration. This property only has an effect in vertical writing modes. Values have the following meanings:

No special processing.
Attempt to typeset horizontally all consecutive characters within the element such that they take up the space of a single character within the vertical line box.
digits <integer>?
Attempt to typeset horizontally each maximal sequence of consecutive ASCII digits (U+0030–U+0039) that has as many or fewer characters than the specified integer such that it takes up the space of a single character within the vertical line box. If the integer is omitted, it computes to 2. Integers outside the range 2-4 are invalid.

In East Asian documents, the text-combine-horizontal effect is often used to display Latin-based strings such as components of a date or letters of an initialism, always in a horizontal writing mode regardless of the writing mode of the line:

Diagram of tate-chu-yoko, showing the two digits of a date
                   set halfwidth side-by-side in a vertical column of text

Example of horizontal-in-vertical tate-chu-yoko

The figure is the result of the rules

date { text-combine-horizontal: digits 2; }

and the following markup:


In Japanese, this effect is known as tate-chu-yoko.

The following example shows that applying text-combine-horizontal: digits 2 to an entire document, rather than to a segment with a known type of numeric content, can have unintended consequences:


Rendering of the above markup with 'text-combine-horizontal: digits':
                   the first two digits of the number are rendered as tate-chu-yoko
                   while the rest of the number is rendered sideways.

Example of mis-applied tate-chu-yoko

9.1.1 Text Run Rules

To avoid complexity in the rendering and layout, text-combine-horizontal can only combine plain text: consecutive characters that are not interrupted by an element boundary.

However, because the property inherits, the UA must ensure that the contents of the element effecting the combination are not part of an otherwise-combinable sequence that happens to begin or end outside the element; if so, then the text is laid out normally, as if text-combine-horizontal were none. To avoid combining only part of a sequence: if the boundary of a potentially-combinable run is due only to one or more inline element boundaries, the UA must inspect any characters that appear immediately before and immediately after the run, and if these characters would, without the intervening element, form a sequence that would (if it were not too long) combine, then the candidate run does not combine.

The above paragraph is at-risk. Comments from implementors are welcome.

For example, given the rule

tcy { text-combine-horizontal: digits 4; }

if the following markup were given:


no text would combine: the 12 and 34 both share an ancestor with the same text-combine-horizontal value, and therefore are considered part of a sequence of four combinable digits interrupted by an element boundary. However in these cases:


The 34 would combine, because the 12 immediately previous does not share with the 34 an ancestor with a common text-combine-horizontal, and therefore the 34 is considered to be the entirety of a sequence of two combinable digits.

If we used the rule

tcy { text-combine-horizontal: all; }

the same results would occur: the first case not combining because 1234 forms a sequence of four combinable characters interrupted by an element boundary, and the second combining 34 because it forms the entirety of a sequence of two combinable characters.

Note that the value of text-combine-horizontal (all or digits) only affects which types of characters can be combined and what is the maximum length of a combinable sequence. It does not otherwise change behavior.

9.1.2 Layout Rules

When combining text as for text-combine-horizontal: all, the glyphs of the combined text are composed horizontally (ignoring letter-spacing and any forced line breaks, but using the specified font settings), similar to the contents of an inline-box with a horizontal writing mode and a line-height of 1em. The effective size of the composition is assumed to be 1em square; anything outside the square is not measured for layout purposes. The UA should center the glyphs horizontally and vertically within the measured 1em square.

The baseline of the resulting composition must be chosen such that the square is centered between the text-over and text-under baselines of its parent inline box prior to any baseline alignment shift (vertical-align). For bidi reordering, the composition is treated the same as a character with text-orientation: upright. For line breaking before and after the composition, it is treated as a regular inline with its actual contents. For other text layout purposes, e.g. emphasis marks, text-decoration, spacing, etc. the resulting composition is treated as a single glyph representing the Object Replacement Character U+FFFC.

9.1.3 Compression Rules

The UA must ensure that the combined advance width of the composition fits within 1em by compressing the combined text if necessary. (This does not necessarily mean that the glyphs will fit within 1em, as some glyphs are designed to draw outside their geometric boundaries.) OpenType implementations must use width-specific variants (OpenType features hwid/twid/qwid) to compress text in cases where those variants are available for all characters in the composition. Otherwise, the UA may use any means to compress the text, including substituting half-width, third-width, and/or quarter-width glyphs provided by the font, using other font features designed to compress text horizontally, scaling the text geometrically, or any combination thereof.

For example, a simple OpenType-based implementation might compress the text as follows:

  1. Enable 1/n-width glyphs for combined text of n characters. (I.e. Use OpenType hwid for 2 characters, twid for 3 characters, etc.) Note that the number of characters ≠ number of Unicode codepoints!
  2. Horizontally scale the result to 1em if it is not yet 1em or narrower.

A different implementation that utilizes OpenType layout features might compose the text first with normal glyphs to see if that fits, then substitute in half-width or third-width forms as available and necessary, possibly adjusting its approach or combining it with scaling operations depending on the available glyph substitutions.

In some fonts, the ideographic glyphs are given a compressed design such that they are 1em wide but shorter than 1em tall. To accommodate such fonts, the UA may vertically scale the the composition to match the advance height of 水 U+6C34. Full-width Characters

In order to preserve typographic color when compressing the text to 1em, when the combined text consists of more than one character, then any full-width characters must first be converted to their non-full-width equivalents by reversing the algorithm defined for text-transform: full-width in [CSS3TEXT] before applying other compression techniques.

For example, an author might apply both text-transform and text-combine-horizontal to a date set in vertical text.

date { text-combine-horizontal: digits 2; text-transform: full-width; }

Suppose this style rule is applied to a date such as.


The "2010" is too long to be combined (4 digits), but the "2" and "23" will be affected. Since "23" is more than one character, it will not be affected by text-transform: full-width. However since the "2" is only one character, it will be transformed to a fullwidth "2". Since the "2010" was not combined, its digits, too, will be transformed to fullwidth "2010"; and being fullwidth, they will be typeset upright, giving the following result:


Properties that affect glyph selection, such as the font-variant and font-feature-settings properties defined in [CSS3-FONTS], can potentially affect the selection of variants for characters included in combined text runs. Authors are advised to use these properties with care when text-combine-horizontal is also used.


Changes since the November 2012 CSS Writing Modes Module Level 3 WD

Changes since the May 2012 CSS Writing Modes Module Level 3 WD

Major changes include:

Changes since the September 2011 CSS Writing Modes Module Level 3 WD

Major changes include:


John Daggett, Martin Heijdra, Laurentiu Iancu, Yasuo Kida, Tatsuo Kobayashi, Toshi Kobayashi, Ken Lunde, Nat McCully, Eric Muller, Paul Nelson, Kenzou Onozawa, Dwayne Robinson, Michel Suignard, Taro Yamamoto, Steve Zilles

Appendix A. Characters and Properties

Unicode defines three codepoint-level properties that are referenced in CSS Writing Modes:

General Category
Defined in [UAX44] and given as the General_Category property in the Unicode Character Database [UAX44].
Defined in [UAX24] and given as the Script property in the Unicode Character Database [UAX44]. (UAs should include any ScriptExtensions.txt assignments in this mapping.)
Vertical Orientation
Defined in [UTR50] as the Vertical_Orientation property and given in the UTR50 data file.

In several sections (as noted), the term character is defined as extended grapheme cluster per [UAX29]. It is roughly equivalent to what a language user considers to be a character or a basic unit of the script (which might not be a single Unicode codepoint). The UA may further tailor this definition as appropriate to match typographic convention. For example, when typesetting upright, Tibetan tsek and shad marks are kept with the preceding letters, rather than treated as an independent cluster.

Appendix B: Bidi Rules for HTML 4

The style sheet rules that would achieve the bidi behaviors specified in [HTML401] for the HTML Strict doctype are given below:

/* HTML dir attribute creates an embedding */
*[dir="ltr"]    { direction: ltr; unicode-bidi: embed; }
*[dir="rtl"]    { direction: rtl; unicode-bidi: embed; }

/* BDO element creates an override */
bdo[dir="ltr"]  { direction: ltr; unicode-bidi: bidi-override; }
bdo[dir="rtl"]  { direction: rtl; unicode-bidi: bidi-override; }

/* HTML4.01:8.2.6 - preserve bidi behavior if 'display' is changed */
html, body,
div, address, blockquote, p,
ul, ol, li, dl, dt, dd,
fieldset, form,
h1, h2, h3, h4, h5, h6,
{ unicode-bidi: isolate; }

Appendix C: Vertical Scripts in Unicode

This section is informative.

This appendix lists the vertical and bi-orientational scripts in Unicode 6.0 [UNICODE] and their transformation from horizontal to vertical orientation. Any script not listed explicitly is assumed to be horizontal-only. The script classification of Unicode characters is given by [UAX24].

Vertical Scripts in Unicode
Code Name Transform (Clockwise) Vertical Intrinsic Direction
Bopo Bopomofo ttb
Egyp Egyptian Hieroglyphs ttb
Hira Hiragana ttb
Kana Katakana ttb
Hani Han ttb
Hang Hangul ttb
Merc Meroitic Cursive ttb
Mero Meroitic Hieroglyphs ttb
Mong Mongolian 90° ttb
Ogam Ogham -90° btt
Orkh Old Turkic -90° ttb
Phag Phags Pa 90° ttb
Yiii Yi ttb

Exceptions: For the purposes of this specification, all fullwidth (F) and wide (W) characters are treated as belonging to a vertical script, and halfwidth characters (H) are treated as belonging ot a horizontal script. [UAX11]

CSS3 Writing Modes cannot correctly handle either Ogham or Old Turkic. It is recommended that text-orientation: sideways-left be used to typeset these scripts. A future version of CSS may define automatic handling of these scripts.

Note that for vertical-only characters (such as Mongolian and Phags Pa letters), the glyphs in the Unicode code charts are shown in their vertical orientation. In horizontal text, they are typeset in a 90° counter-clockwise rotation from this orientation.


Document conventions

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words "for example" or are set apart from the normative text with class="example", like this:

This is an example of an informative example.

Informative notes begin with the word "Note" and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

Conformance classes

Conformance to this specification is defined for three conformance classes:

style sheet
A CSS style sheet.
A UA that interprets the semantics of a style sheet and renders documents that use them.
authoring tool
A UA that writes a style sheet.

A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.

Partial implementations

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

Experimental implementations

To avoid clashes with future CSS features, the CSS2.1 specification reserves a prefixed syntax for proprietary and experimental extensions to CSS.

Prior to a specification reaching the Candidate Recommendation stage in the W3C process, all implementations of a CSS feature are considered experimental. The CSS Working Group recommends that implementations use a vendor-prefixed syntax for such features, including those in W3C Working Drafts. This avoids incompatibilities with future changes in the draft.

Non-experimental implementations

Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec.

To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.

Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.


Normative References

Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607
Tab Atkins Jr.; Elika J. Etemad. CSS Intrinsic & Extrinsic Sizing Module Level 3. 27 September 2012. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2012/WD-css3-sizing-20120927/
Bert Bos; Elika J. Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 24 July 2012. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2012/CR-css3-background-20120724/
Håkon Wium Lie. CSS Multi-column Layout Module. 12 April 2011. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2011/CR-css3-multicol-20110412
Elika J. Etemad; Koji Ishii. CSS Text Module Level 3. 13 November 2012. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2012/WD-css3-text-20121113/
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. URL: http://www.ietf.org/rfc/rfc2119.txt
R. Barnes; S. Kent; E. Rescorla. Further Key Words for Use in RFCs to Indicate Requirement Levels. April 1 2013. URL: http://www.ietf.org/rfc/rfc6919.txt
Erik Dahlström; et al. Scalable Vector Graphics (SVG) 1.1 (Second Edition). 16 August 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-SVG11-20110816/
Asmus Freytag. East Asian Width. 17 January 2012. URL: http://www.unicode.org/reports/tr11/
Mark Davis; Ken Whistler. Unicode Script Property. 13 January 2012. URL: http://www.unicode.org/reports/tr24/
Mark Davis. Unicode Text Segmentation. 12 September 2012. URL: http://www.unicode.org/reports/tr29/
Mark Davis; Ken Whistler. Unicode Character Database. 23 January 2012. URL: http://www.unicode.org/reports/tr44/
Mark Davis. Unicode Bidirectional Algorithm. 16 January 2012. URL: http://www.unicode.org/reports/tr9/
The Unicode Consortium. The Unicode Standard. 2012. Defined by: The Unicode Standard, Version 6.2.0 (Mountain View, CA: The Unicode Consortium, 2012. ISBN 978-1-936213-07-8), as updated from time to time by the publication of new versions URL: http://www.unicode.org/standard/versions/enumeratedversions.html
Koji Ishii. Unicode Properties for Vertical Text Layout. 31 August 2013. URL: http://www.unicode.org/reports/tr50/

Informative References

Ian Jacobs; et al. Cascading Style Sheets, level 2 (CSS2) Specification. 11 April 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-CSS2-20080411
Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. CSS Flexible Box Layout Module. 18 September 2012. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/
Tantek Çelik; Chris Lilley; L. David Baron. CSS Color Module Level 3. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-css3-color-20110607
Tab Atkins Jr.. CSS Lists and Counters Module Level 3. 24 May 2011. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2011/WD-css3-lists-20110524
Melinda Grant; et al. CSS Paged Media Module Level 3. 14 March 2013. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2013/WD-css3-page-20130314/
Dave Raggett; Arnaud Le Hors; Ian Jacobs. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
Robin Berjon; et al. HTML5. 6 August 2013. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2013/CR-html5-20130806/
Elika J. Etemad. Robust Vertical Text Layout. 25 April 2005. URL: http://unicode.org/notes/tn22/


Property index

NameValueInitialApplies toInh.%agesMediaAnimatableCanonical orderComputed value
directionltr | rtlltrall elementsyesn/avisualnon/aspecified value
unicode-bidinormal | embed | isolate | bidi-override | isolate-override | plaintextnormalall elements, but see prosenon/avisualspecified value
writing-modehorizontal-tb | vertical-rl | vertical-lrhorizontal-tbAll elements except table row groups, table column groups, table rows, and table columnsyesn/avisualnon/aspecified value
text-orientationmixed | upright | sideways-right | sideways-left | sideways | use-glyph-orientationmixedall elements except table row groups, rows, column groups, and columnsyesn/avisualnon/aspecified value
text-combine-horizontalnone | all | [ digits <integer>? ]nonenon-replaced inline elementsyesn/avisualnon/aspecified keyword, plus integer if digits

Issues Index

Add a picture.
This section needs careful review for whether it is a) correct and b) sensible.
Better (more obvious + easier to type) name for this?