Copyright © 2012 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
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).
Inherently bottom-to-top scripts are not handled in this version. See [UTN22] for an explanation of relevant issues.
This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don't cite this document other than as 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 “css3-writing-modes” in the subject, preferably like this: “[css3-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.
The following features are at-risk and may be dropped during CR:
use-glyph-orientation
’ of ‘text-orientation
’
digits
’, ‘numeric
’, ‘alpha
’, ‘latin
’, and ‘alphanumeric
’
values of ‘text-combine-horizontal
’.
text-combine-mode
’ property
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.
This module replaces and extends the ‘unicode-bidi
’ and ‘direction
’ features
defined in [CSS21]
sections 8.6 and 9.10.
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.
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.
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 B” forced 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 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 element immediately containing the paragraph rather than by
the heuristic given in steps P2 and P3 of the Unicode algorithm. [UAX9] When the computed
‘unicode-bidi
’ of the element immediately
containing the paragraph is ‘plaintext
’, however, the Unicode heuristics are
used instead. An element immediately contains
a bidi paragraph if the element itself, but none of its descendants, both
contains the entire bidi paragraph and is a block container or bidi-isolating inline.
The HTML specifications ([HTML401], section 8.2, and [HTML5], section 10.3.5) define bidirectionality behavior for HTML elements. The HTML 4 specification also contains more information on bidirectionality issues.
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.
direction
’
propertyName: | direction |
---|---|
Value: | ltr | rtl |
Initial: | ltr |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
This property specifies the inline base direction or directionality of
any bidi paragraph, embedding, 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:
The ‘direction
’ property has no effect on bidi
reordering when specified on inline elements whose ‘unicode-bidi
’
property's value is ‘normal
’.
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
11.3.2.1.
unicode-bidi
’ propertyName: | 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 |
Media: | visual |
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 it were not there. The
‘unicode-bidi
’ property allows 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
’:
Outside | ||||
---|---|---|---|---|
strong | neutral | |||
Inside | scoped | ‘embed ’
| ‘isolate ’
| |
override | ‘bidi-override ’
| ‘isolate-override ’
| ||
plaintext | — | ‘plaintext ’
|
Values for this property have the following (normative) meanings:
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.
direction
’ property.
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.
isolate
’
with the 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 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).
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 in 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 corresponding to the end of the element are added before the interruption and the codes corresponding 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.)
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).
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.
<HEBREW>
<PAR>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</PAR>
<PAR>HEBREW6 <EMPH>HEBREW7</EMPH> HEBREW8</PAR>
</HEBREW>
<ENGLISH>
<PAR>english9 english10 english11 HEBREW12 HEBREW13</PAR>
<PAR>english14 english15 english16</PAR>
<PAR>english17 <HE-QUO>HEBREW18 english19 HEBREW20</HE-QUO></PAR>
</ENGLISH>
Since this is arbitrary XML, the style sheet is responsible for setting the writing direction. This is the style sheet:
/* Rules for bidi */ HEBREW, HE-QUO {direction: rtl; unicode-bidi: embed;} ENGLISH {direction: ltr; unicode-bidi: embed;} /* Rules for presentation */ HEBREW, ENGLISH, PAR {display: block;} EMPH {font-weight: bold;}
The HEBREW element is a block with a right-to-left base direction, the ENGLISH element is a block with a left-to-right base direction. The PARs are blocks that inherit the base direction from their parents. Thus, the first two PARs are read starting at the top right, the final three are read starting at the top left. Please note that HEBREW and ENGLISH are chosen as element names for explicitness only; in general, element names should convey structure without reference to language.
The EMPH 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 HE-QUO element, on the other hand,
creates an embedding.
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 HE-QUO embedding causes HEBREW18 to be to the right of english19.
If lines have to be broken, it might be more like this:
2WERBEH 1WERBEH -EH 4WERBEH english3 5WERB -EH 7WERBEH 6WERBEH 8WERB english9 english10 en- glish11 12WERBEH 13WERBEH english14 english15 english16 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.
Since bidi reordering can split apart and reorder text that is logically contiguous, bidirectional text can cause an inline boxes 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:
direction
’ property is ‘ltr
’, the left-most generated
box of the first line box in which the element appears has the left
margin, left border and left padding, and the right-most generated box of
the last line box in which the element appears has the right padding,
right border and right margin.
direction
’ property is ‘rtl
’, the right-most generated
box of the first line box in which the element appears has the right
padding, right border and right margin, and the left-most generated box
of the last line box in which the element appears has the left margin,
left border and left padding.
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]
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.
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:
In some special cases such as two-digit numbers in dates, text is fit compactly into a single vertical character box:
Layouts often involve a 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.
writing-mode
’ propertyName: | writing-mode |
---|---|
Value: | horizontal-tb | vertical-rl | vertical-lr |
Initial: | horizontal-tb |
Applies to: | All elements except table row groups, table column groups, table rows, and table columns |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
This property specifies whether lines of text are laid out horizontally or vertically and the direction in which blocks progress. Possible values:
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:
display
’ of ‘inline
’,
its ‘display
’ computes to ‘inline-block
’. [CSS21]
display
’ of ‘run-in
’,
its ‘display
’ computes to ‘block
’. [CSS21]
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
):
Here is a diagram for the right-to-left vertical writing mode commonly
used in East Asia (writing-mode: vertical-rl
):
And finally, here is a diagram for the left-to-right vertical writing
mode used for Manchu and Mongolian (writing-mode:
vertical-lr
):
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.
<style> form { writing-mode: vertical-rl; } </style> ... <form> <p><label>姓名 <input value="艾俐俐"></label> <p><label>语文 <select><option>English <option>français <option>فارسی <option>中文 <option>日本语</select></label> </form>
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; }
writing-mode
’
ValuesSVG1.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 ’
|
‘lr-tb ’
| |
‘rl ’
| |
‘tb ’
| ‘vertical-rl ’
|
‘tb-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.
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.
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.
Different writing systems prefer different baseline tables.
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.)
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.
In this specification, only the following baselines are considered:
In vertical writing mode, the central
baseline is used as the dominant baseline when ‘text-orientation
’ is ‘mixed-right
’ 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.
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 dominant baseline (which can change based on the writing mode) is used in CSS for alignment in two cases:
vertical-align
’ value of ‘baseline
’, child is aligned
to the parent by matching the parent's dominant baseline to the same
baseline in the child. (E.g. if the parent's dominant baseline is
alphabetic, then the child's alphabetic baseline is matched to the
parent's alphabetic baseline, even if the child's dominant baseline is
something else.) For values of ‘sub
’, ‘super
’, ‘<length>
’,
and ‘<percentage>
’, the baselines are
aligned as for ‘baseline
’, but the child is shifted according to
the offset given by its ‘vertical-align
’
value.
Given following sample markup:
<p><span class="outer">Ap <span class="inner">ji</span></span></p>
And the following style rule:
span.inner { font-size: .75em; }
The baseline tables of the parent (.outer
) and the child
(.inner
) will not match up due to the font size
difference. Since the dominant baseline is the alphabetic baseline, the
child box is aligned to its parent by matching up their alphabetic
baselines.
If we assign ‘vertical-align: super
’ to
the .inner
element from the example above, the same rules
are used to align the .inner
child to its parent; the only
difference is in addition to the baseline alignment, the child is
shifted to the superscript position.
span.inner { vertical-align: super; font-size: .75em; }
Each writing system has one or more native orientations. Modern scripts can therefore be classified into three orientational categories:
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.)
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:
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-right
’ 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.
text-orientation
’ propertyName: | text-orientation |
---|---|
Value: | mixed-right | upright | sideways-right | sideways-left | sideways | use-glyph-orientation |
Initial: | mixed-right |
Applies to: | all elements except table row groups, rows, column groups, and columns |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
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 ‘bidi-override isolate
’. Layout of text is exactly as
for ‘sideways-right
’ except that the text content and
baseline table of each of the element's inline boxes is mirrored around
a vertical axis along the center of its content box. 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: 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-right
’.
This value is at-risk and may be dropped during CR.
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.
This data file defines two properties in UCD format [UAX44]:
mixed-right
’.
upright
’.
The UA must render a character upright
if the value is ‘U
’, or sideways (90°
clockwise from horizontal) if ‘R
’.
if ((HO = "L") and (VO = "U")) then VOsimple := "R" else if (VO in ["U", "T", "Tu", "Tr"]) then VOsimple := "U" else if (VO = "R") then VOsimple := "R"
from draft #5 of [UTR50] with a few changes that were discussed with UTC.
Going forward, CSS Writing Modes will be tracking changes in [UTR50], and thus converging with (rather than diverging from) Unicode.
When typesetting text in vertical writing modes:
mixed-right
’ and ‘upright
’ modes are typeset 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)
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.
mixed-right
’ and ‘upright
’ modes are typeset 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.
Propose ‘svrt
’ as an
OpenType substitution feature that is applied to rotated horizontal text
in vertical text runs, to handle these cases.
sideways
’, ‘sideways-right
’, and ‘sideways-left
’ modes
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.
This section needs additional work. Suggestions are welcome.
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:
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.
The abstract dimensions are defined below:
The flow-relative directions, head, foot, start, and 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:
writing-mode
’ property: the physical top in
‘horizontal-tb
’
mode, the right in ‘vertical-rl
’, and the left in ‘vertical-lr
’.
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.
Note that while determining the head and foot sides of
a box depends only on the ‘writing-mode
’ property, determining the start and 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/ head side +------------------------------+ A left side/ | ---inline direction ---> | right side/ | start side | | | end side | | | block * horizontal * | height/ | | direction *writing mode* | extent | V | | +------------------------------+ V bottom side/ foot side
A vertical Japanese block (TTB-RL):
<----- width / extent ------> top side/ start side +------------------------------+ A left side/ | <---block direction--- | right side/ | foot side | | | head side | | * vertical * inline| | height/ | *writing mode* direction| | measure | V | | +------------------------------+ V bottom side/ end side
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 head 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 foot side. Hence the need for distinct
terminology.
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:
See the table below for the exact mappings between physical and line-relative directions.
The following table summarizes the abstract-to-physical mappings:
‘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 | ||||||||
head | top | right | left | |||||||
foot | bottom | left | right | |||||||
start | left | right | bottom | top | top | bottom | bottom | top | top | bottom |
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 |
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:
Layout rules that refer to the width use the height instead, and vice versa.
Layout rules that refer to the ‘*-left
’ and
‘*-right
’ box properties (border, margin,
padding) use ‘*-top
’ and ‘*-bottom
’ instead, and vice versa. Which side of the
box the property applies to doesn't change: only which values are inputs
to which layout calculations changes. The ‘margin-left
’ property still affects the lefthand
margin, for example; however in a ‘vertical-rl
’ writing mode it takes part in margin
collapsing in place of ‘margin-bottom
’.
Layout rules that depend on the ‘direction
’ property to choose between left
and right (e.g. overflow, overconstraint resolution, the initial value
for ‘text-align
’, table column ordering)
are abstracted to the start and end sides and applied appropriately.
For example, in vertical writing modes, table rows are vertical and
table columns are horizontal. In a ‘vertical-rl
’ ‘mixed-right
’ ‘rtl
’ table, the first column would be on the
bottom (the start side), and the first row on the right (the head 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.
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.
Certain properties behave logically as follows:
border-spacing
’ property represent spacing
between columns and rows respectively, not necessarily the horizontal and
vertical spacing respectively. [CSS21]
line-height
’ property always
refers to the logical height. [CSS21]
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 the start and 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 head and foot 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.
When an element has a different ‘writing-mode
’ from its containing block two
cases are possible:
vertical-rl
’ and ‘vertical-lr
’).
horizontal-tb
’
and ‘vertical-rl
’).
To handle the second case, CSS layout calculations are divided into two phases: sizing a box, and positioning the box within its flow. In the sizing phase—calculating the width and height of the box—the dimensions of the box and the containing block are mapped to the measure and extent and calculations performed accordingly using the writing mode of the element. In the positioning phase—calculating the positioning offsets, margins, borders, and padding—the dimensions of the box and its containing block are mapped to the measure and extent and calculations performed according to the writing mode of the containing block.
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.
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.
It is common in CSS for a containing block to have a defined measure,
but not a defined 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.
Orthogonal flows allow 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.
If the computed measure of an element establishing an orthogonal flow is
‘auto
’, then the used measure is calculated as
the fit-content (shrink-to-fit) size
using a fill-available fit into the
minimum of the available measure
(when definite) and the fallback available
measure. In other words, the calculation becomes max(min-content, min(max-content, fill-available, fill-fallback))
(where fill-available is dropped when
indefinite).
If the UA supports CSS Multi-column Layout [CSS3COL], then for the case where
the element's extent or available extent is defined but the element's
measure is ‘auto
’:
column-count
’ and ‘column-width
’ are both ‘auto
’, a used ‘column-width
’ is calculated for the element as
the fill-available measure
using the minimum of the available
measure (when definite) and the fallback available measure as the available measure.
The used measure of the resulting multi-column element is then calculated: if the content neither wraps nor paginates 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 should behave the same as the auto-sizing algorithm defined in the previous section, except 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.
This section is informative.
With regards to pagination, the rules in CSS2.1 still hold in vertical writing modes and orthogonal flows: page 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.
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 head margin substituted for the top margin and the foot margin substituted for the bottom margin. Similarly the head padding and border are substituted for the top padding and border, and the foot padding and border substituted for the bottom padding and border. Note this means only head and foot 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:
text-align
’
property aligns to the start edge of the line box.
text-indent
’ property indents
from the start edge of the line box.
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:
text-align
’ property [CSS21]
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:
vertical-align
’ property, the
"top" of the line box is the over edge; the "bottom" of the line box is
the under edge. Positive length and percentage values shift the baseline
towards the over edge. [CSS21]
text-decoration
’ property,
the underline is drawn on the under side of the text; the overline is
drawn on the over side of the text. [CSS21] Note that
the CSS Text Module defines this in more detail and provides additional
controls for controlling the position of underlines and overlines. [CSS3TEXT]
The following values are purely physical in their definitions and do not respond to changes in writing mode:
rect()
’ notation of the ‘clip
’ property [CSS21]
box-shadow
’ and
‘text-shadow
’ properties
caption-side
’ keywordsProperty: | ‘caption-side ’
|
---|---|
New Values: | ‘head ’ | ‘foot ’
|
Initial: | head |
Applies to: | same as CSS2.1 |
Inherited: | same as CSS2.1 |
Percentages: | same as CSS2.1 |
Media: | same as CSS2.1 |
Computed value: | specified value |
This module introduces two new values to the ‘caption-side
’ property: ‘head
’ and ‘foot
’, 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 ‘head-outside
’ and ‘foot-outside
’ will be 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
‘top
’ and ‘bottom
’
as ‘head
’, 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 ‘start
’ and ‘end
’ values, which behave
similarly and which position the caption on the start and 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.
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:
writing-mode
’ is
‘vertical-rl
’ or if
the root element's ‘writing-mode
’ is ‘horizontal-tb
’ and its
‘direction
’ is
‘rtl
’.
writing-mode
’ is
‘vertical-lr
’ or if
the root element's ‘writing-mode
’ is ‘horizontal-tb
’ and its
‘direction
’ is
‘ltr
’.
(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.)
text-combine-horizontal
’ propertyName: | text-combine-horizontal |
---|---|
Value: | none | all | [ [ numeric <integer> | digits <integer> ] || [ alpha <integer> | latin <integer> ] || alphanumeric <integer> ] |
Initial: | none |
Applies to: | non-replaced inline elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
This property allows the combination of multiple characters into the space of a single character. This property only has an effect in vertical writing modes. Values have the following meanings:
text-combine-horizontal: none
’ on
the element and any descendants.
text-combine-horizontal: all
’. For this property, a
horizontal number is any character
belonging to a Number category (N*) that does not belong to a vertical script.
text-combine-horizontal: all
’.
This definition could replace ‘numeric
’ as a simplification. However, it doesn't
handle e.g. roman numerals.
text-combine-horizontal: all
’. For this property, a
horizontal letter is any character
belonging to a Letter category (L*) that does not belong to a vertical script.
text-combine-horizontal:
all
’. For this property, a Latin
letter is any character belonging to a Letter category (L*) that
also belongs to the Latin script.
This definition could replace ‘alpha
’ as a simplification. However, it wouldn't work
for greek or mixtures of greek and latin (e.g. μm).
text-combine-horizontal: all
’.
All values except ‘all
’ and
‘none
’ are marked at-risk. Which ones should we
take to CR?
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:
The figure is the result of the rules
date { text-combine-horizontal: digits 2; }
and the following markup:
<date>平成20年4月16日に</date>
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:
<p>あれは10,000円ですよ!</p>
When combining text as for ‘text-combine-horizontal:
all
’, the glyphs of the combined text are stacked horizontally
(without line breaks, letter-spacing, etc., 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 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. For text layout purposes, e.g. bidi
ordering, line-breaking, emphasis marks, text-decoration, etc. the
resulting composition is treated as a single glyph representing the Object
Replacement Character U+FFFC.
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 contents of the composition to match the advance height of 水 U+6C34.
The automatic text combinations are determined before ‘text-transform
’ is applied. Any CSS fullwidth
transformations (‘text-transform: full-width
’
[CSS3TEXT] or
‘font-variant-east-asian-width: full-width
’ [CSS3-FONTS])
are turned off for combined text of more than one character.
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.
<date>2010年2月23日</date>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:
2 0 1 0 年 2 月 23 日
text-combine-mode
’ propertyName: | text-combine-mode |
---|---|
Value: | auto | compress | [ no-compress || use-glyphs ] |
Initial: | auto |
Applies to: | non-replaced inline elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
This property controls how multiple characters are combined into the
space of a single character when specified to do so via ‘text-combine-horizontal
’. Values have the
following meanings:
Since even fonts that have fractional-width glyphs available do not
have such glyphs for all characters, the UA must ensure the expected
advance width for ‘use-glyphs
’ by either
compressing or padding (equally on both sides) each glyph individually
if it does not match the required advance width. (This step does not
apply if ‘no-compress
’ is specified.)
use-glyphs
’, however, this indicates to perform glyph
substitution if possible per ‘use-glyphs
’ but
not to compress the glyphs if they do not fit the size requirements. This
value may cause the glyphs to overflow the line significantly.
Major changes include:
unicode-bidi
’ value of ‘isolate bidi-override
’ with single keyword ‘isolate-override
’.
Major changes include:
upright-right
’ value of ‘text-orientation
’ to ‘mixed-right
’.
auto
’
sizes.
digits
’ to ‘numeric
’ and ‘ascii-digits
’
to ‘digits
’ for ‘text-combine-horizontal
’.
text-combine-horizontal
’ and ‘text-transform
’.
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 to CSS Writing Modes Level 3 is defined for three conformance classes:
A style sheet is conformant to CSS Writing Modes Level 3 if all of its declarations that use properties defined in this module have values that are valid according to the generic CSS grammar and the individual grammars of each property as given in this module.
A renderer is conformant to CSS Writing Modes Level 3 if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by CSS Writing Modes Level 3 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 CSS Writing Modes Level 3 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.
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.
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.
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.
For this specification to be advanced to Proposed Recommendation, there must be at least two independent, interoperable implementations of each feature. Each feature may be implemented by a different set of products, there is no requirement that all features be implemented by a single product. For the purposes of this criterion, we define the following terms:
The specification will remain Candidate Recommendation for at least six months.
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
Unicode defines three codepoint-level properties that are referenced in CSS Writing Modes:
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.
Unicode defines properties for characters, but for ‘text-orientation
’, it is necessary to
determine the properties of a grapheme cluster. For the purposes of CSS
Writing Modes, the properties of a grapheme cluster are given by its base
character—except in two cases:
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; }
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].
Code | Name | Transform (Clockwise) | Vertical Intrinsic Direction |
---|---|---|---|
Bopo | Bopomofo | 0° | ttb |
Egyp | Egyptian Hieroglyphs | 0° | ttb |
Hira | Hiragana | 0° | ttb |
Kana | Katakana | 0° | ttb |
Hani | Han | 0° | ttb |
Hang | Hangul | 0° | ttb |
Merc | Meroitic Cursive | 0° | ttb |
Mero | Meroitic Hieroglyphs | 0° | ttb |
Mong | Mongolian | 90° | ttb |
Ogam | Ogham | -90° | btt |
Orkh | Old Turkic | -90° | ttb |
Phag | Phags Pa | 90° | ttb |
Yiii | Yi | 0° | 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.
This section is normative.
CSS layout has several different concepts of automatic sizing that are used in various layout calculations. This section defines some more precise terminology to help connect the layout behaviors of this spec to the calculations used in other modules, and some new keywords for the width and height properties to allow authors to assign elements the dimensions resulting from these size calculations.
For the purposes of these definitions, a definite size is one that can be determined without measuring content, i.e. is a <length>, a size of the initial containing block, or a <percentage> that is resolved against a definite size. An indefinite size is one that is not definite. An indefinite available size is essentially infinite.
Properties: | ‘width ’, ‘min-width ’, ‘max-width ’, ‘height ’, ‘min-height ’, ‘max-height ’
|
---|---|
New Values: | ‘min-content ’
| ‘max-content ’ |
‘fill-available ’ | ‘fit-content ’
|
Initial: | as defined in [CSS21] |
Applies to: | as defined in [CSS21] |
Inherited: | as defined in [CSS21] |
Percentages: | as defined in [CSS21] |
Media: | as defined in [CSS21] |
Computed value: | specified value if keyword specified, else as defined in [CSS21] |
There are four types of automatically-determined sizes in CSS (which are represented in the width and height properties by the keywords defined above):
There have been some suggestions on improving this
definition for extents, see dbaron‘s message and tab
’s
message.
max(min-content, min(max-content, fill-available))
if the
available measure is finite, and as the max-content measure otherwise. The fit-content extent is calculated from the
same expression applied to the block dimension.
For the layout models in CSS2.1, both the min-content extent and max-content extent of non-replaced elements
are defined as the content extent as defined (for horizontal writing
modes) in CSS2.1§10.6.3
and CSS2.1§17.5.3
for elements with ‘height: auto
’.
For replaced elements, the min-content
and max-content sizes are the same and
correspond used size of the replaced element according to the ‘auto
’ width and height calculations.
The min-content and max-content sizes of a multi-column element are undefined per [CSS3COL]. A future specification may define them.
Property: | ‘column-width ’
|
---|---|
New Values: | ‘min-content ’
| ‘max-content ’ |
‘fill-available ’ | ‘fit-content ’
|
Initial: | as defined in [CSS3COL] |
Applies to: | as defined in [CSS3COL] |
Inherited: | as defined in [CSS3COL] |
Percentages: | as defined in [CSS3COL] |
Media: | as defined in [CSS3COL] |
Computed value: | specified value if keyword specified, else as defined in [CSS3COL] |
When used as values for ‘column-width
’, the new keywords specify the
optimal column width:
min-content
’
max-content
’
fill-available
’
fit-content
’
max(min-content, min(max-content, fill-available))
.
Property | Values | Initial | Applies to | Inh. | Percentages | Media |
---|---|---|---|---|---|---|
direction | ltr | rtl | ltr | all elements | yes | N/A | visual |
‘caption-side’ | ‘head’ | ‘foot’ | head | same as CSS2.1 | same as CSS2.1 | same as CSS2.1 | same as CSS2.1 |
‘column-width’ | ‘min-content’ | ‘max-content’ | ‘fill-available’ | ‘fit-content’ | as defined in [CSS3COL] | as defined in [CSS3COL] | as defined in [CSS3COL] | as defined in [CSS3COL] | as defined in [CSS3COL] |
‘width’, ‘min-width’, ‘max-width’, ‘height’, ‘min-height’, ‘max-height’ | ‘min-content’ | ‘max-content’ | ‘fill-available’ | ‘fit-content’ | as defined in [CSS21] | as defined in [CSS21] | as defined in [CSS21] | as defined in [CSS21] | as defined in [CSS21] |
text-combine-horizontal | none | all | [ [ numeric <integer> | digits <integer> ] || [ alpha <integer> | latin <integer> ] || alphanumeric <integer> ] | none | non-replaced inline elements | yes | N/A | visual |
text-combine-mode | auto | compress | [ no-compress || use-glyphs ] | auto | non-replaced inline elements | yes | N/A | visual |
text-orientation | mixed-right | upright | sideways-right | sideways-left | sideways | use-glyph-orientation | mixed-right | all elements except table row groups, rows, column groups, and columns | yes | N/A | visual |
unicode-bidi | normal | embed | isolate | bidi-override | isolate-override | plaintext | normal | all elements, but see prose | no | N/A | visual |
writing-mode | horizontal-tb | vertical-rl | vertical-lr | horizontal-tb | All elements except table row groups, table column groups, table rows, and table columns | yes | N/A | visual |