direction
’
property
●2.2. Embeddings
and Overrides: the ‘unicode-b
idi
’ property
●2.3. Example of
Bidirectional Text
●2.4. Box model
for inline elements in bidirectional context
●3. Introduction to
Vertical Text
●3.1. Block Flow
Direction: the ‘writing-
mode
’
property
●4. Inline-level
Alignment
●4.1.
Introduction to Baselines
●4.2. Text
Baselines
●4.2.1.
Baselines in TrueType/OpenType fonts
●4.3. Atomic
Inline Baselines
●4.4.
Baseline Alignment
●5. Introduction
to Intrinsic Text Layout
●5.1. Orienting
Text: the ‘te
xt-
ori
ent
ati
on
’
property
●5.1.1.
Vertical Typesetting
●6. Abstract Box
Terminology
●6.1.
Logical Dimensions
●6.2.
Abstract and Physical Directions
●6.3.
Line-relative Directions
●6.4.
Flow-relative Directions
●6.5.
Abstract-to-Physical Mappings
●7. Abstract Box
Layout
●7.1. Principles
of Layout in Vertical Writing Modes
●7.2.
Dimensional Mapping
●7.3.
Orthogonal Flows
●7.3.1.
Auto-sizing in Orthogonal Flows
●7.3.2.
Multi-column Layout in Orthogonal Flows
●7.3.3.
Paginating Orthogonal Flows
●7.4.
Flow-Relative Mappings
●7.5.
Line-Relative Mappings
●7.6. Purely
Physical Mappings
●7.7. Table Caption
Mappings: the ‘cap
tio
n-s
ide
’
keywords
●8. Page Flow: the
page progression direction
●9. Glyph
Composition: the ‘tex
t-c
omb
ine
’
property
●Changes
●Changes from the April 2011
CSS Writing Modes Module Level 3 WD
●Acknowledgements
●Appendix A: Bidi Rules for HTML
●Appendix B:
Bi-orientational Transformations
●Appendix C:
Vertical Typesetting Synthesis
●Appendix D: Intrinsic
Dimensions
●Intrinsic Sizes in
Multi-column Layout
●References
●Normative
references
●Other references
●Property Index
wr
iti
ng-
mod
e
’, ‘d
ire
cti
on
’, and
‘tex
t-o
rie
nta
tio
n
’ properties. It is
defined primarily in terms of its inline base direction and block flow direction:
d
ire
cti
on
’
property specifies the inline base direction of an element and, together
with the ‘u
nic
ode
-bi
di
’ 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 ‘wri
tin
g-m
ode
’
property determines the block flow direction.
Ahorizontal 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, the CSS specifications avoid this latter set of terms.
Writing systems typically have one or two native writing modes. Some
examples are:
●Latin-based systems are typically written using a left-to-right inline
direction with a downward (top-to-bottom) block flow direction.
●Arabic-based systems are typically written using a right-to-left
inline direction with a downward (top-to-bottom) block flow direction.
●Mongolian-based systems are typically written using a top-to-bottom
inline direction with a rightward (left-to-right) block flow direction.
●Han-based systems are commonly written using a left-to-right inline
direction with a downward (top-to-bottom) block flow direction,
ora top-to-bottom inline direction with a leftward
(right-to-left) block flow direction. Many magazines and newspapers will
mix these two writing modes on the same page.
The ‘t
ext
-or
ien
tat
ion
’ component of the writing
mode determines the line
orientation and the typesetting mode, 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.
u
nic
ode
-bi
di
’
and ‘dir
ect
ion
’ features defined in [CSS21] sections 8.6
and 9.10.
cl
ass
="e
xam
ple
"
, 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 c
las
s="
not
e"
, like this:
Note, this is an informative note.
با Unicode بنویس.
<----- ------> <-
<================
Bidirectionality
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. The ‘dir
ect
ion
’
and ‘un
ico
de-
bid
i
’ properties allow
authors to specify how the elements and attributes of a document language
map to this algorithm.
User agents that support bidirectional text must apply the Unicode
bidirectional algorithm to every sequence of inline boxes uninterrupted by
a forced (bidi
class B) paragraph break or block boundary. This sequence forms the
paragraph unit in the bidirectional algorithm.
Except when the ‘p
lai
nte
xt
’ value of ‘u
nic
ode
-bi
di
’
is in effect, the paragraph embedding level is set according to the value
of the ‘d
ire
cti
on
’ property of the paragraph's
element rather than by the heuristic given in steps P2 and P3 of the
Unicode algorithm. The paragraph's element is usually the containing
block, but in the case of a paragraph contained by bidi isolation it is the isolating inline element instead.
Because the base directionality of a text depends on the structure and
semantics of the document, the ‘dir
ect
ion
’ and ‘un
ico
de-
bid
i
’
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 and not specify CSS rules to override them.
The HTML 4 specification ([HTML401], section 8.2) defines
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 ‘d
ir
’
attribute and <bdo> element to ensure correct bidirectional layout
in the absence of a style sheet.
dir
ect
ion
’ property
Name: | direction |
---|---|
Value: | ltr | rtl |
Initial: | ltr |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
un
ico
de-
bid
i
’)
for the Unicode bidirectional algorithm. In addition, it affects the
ordering of table
column layout, the direction of horizontal overflow, and
the default alignment of text within a line, and other things that depend
on the base inline base direction.
Values for this property have the following meanings:
ltr
Left-to-right directionality.
rtl
Right-to-left directionality.
The ‘d
ire
cti
on
’ property has no effect on bidi
reordering when specified on inline elements whose ‘uni
cod
e-b
idi
’
property's value is ‘n
orm
al
’.
The value of the ‘dir
ect
ion
’ property on the root element is
also propagated to the initial containing block and, together with the
‘wr
iti
ng-
mod
e
’ property, determines the
document's principal writing mode. (See below.)
Note that the ‘dir
ect
ion
’ property of the HTML BODY
element is not propagated to the viewport. That special behavior
only applies to the background and overflow properties.
The ‘d
ire
cti
on
’ 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.
u
nic
ode
-bi
di
’ property
Name: | unicode-bidi |
---|---|
Value: | normal | embed | [ isolate || [ plaintext | bidi-override ] ] |
Initial: | normal |
Applies to: | all elements, but see prose |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
di
rec
tio
n
’ property. Inside the element,
reordering is done implicitly. This corresponds to adding a LRE (U+202A),
for ‘dir
ect
ion
: l
tr
’, or RLE (U+202B),
for ‘di
rec
tio
n:
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.
isolate
For the purposes of the Unicode bidirectional algorithm, the contents
of the element are considered to be inside a separate, independent
paragraph, and for the purpose of bidi resolution in its containing bidi
paragraph (if any), the element itself is treated as if it were an Object
Replacement Character (U+FFFC). (If the element is broken across multiple
lines, then each box of the element is treated as an Object Replacement
Character.)
plaintext
For the purposes of the Unicode bidirectional algorithm, the base
directionality of each bidi paragraph for which the element forms the
containing block is determined not by the element's computed ‘dir
ect
ion
’ as
usual, but by following rules P2 and P3 of the Unicode bidirectional
algorithm. For inline elements, this value is equivalent to ‘iso
lat
e
’.
bidi-override
For inline elements this creates an override. For block-container
elements this creates an override for inline-level descendants not within
another block container element. This means that inside the element,
reordering is strictly in sequence according to the ‘dir
ect
ion
’
property; the implicit part of the bidirectional algorithm is ignored.
This corresponds to adding a LRO (U+202D), for ‘dir
ect
ion
: l
tr
’, or RLO (U+202E), for ‘di
rec
tio
n:
rtl
’, at the start of the element and a
PDF (U+202C) at the end of the element.
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 ‘di
spl
ay:
in
lin
e
’ are treated as neutral characters, unless their
‘uni
cod
e-b
idi
’ property has a value other
than ‘n
orm
al
’, in which case they are treated as
strong characters in the ‘di
rec
tio
n
’ 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 ‘uni
cod
e-b
idi
’ with a value other
than ‘nor
mal
’ unless appropriate. In particular,
a value of ‘in
her
it
’ should be
used with extreme caution. However, for elements that are, in general,
intended to be displayed as blocks, a setting of ‘u
nic
ode
-bi
di:
is
ola
te
’ is preferred to keep the
element together in case display is changed to inline (see example below).
<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 ‘
u
nic
ode
-bi
di
’ is ‘n
orm
al
’ (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 18WERBEHNote 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 english19Because 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.
hor
izo
nta
l-t
b
’ writing mode:
●When the element's ‘d
ire
cti
on
’ property is ‘l
tr
’, 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.
●When the element's ‘d
ire
cti
on
’ property is ‘r
tl
’, 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 model here seems
backwards when the element breaks across lines...
The ‘b
ox-
dec
ora
tio
n-b
rea
k
’ property can override
this behavior to draw box decorations on both sides of each box. [CSS3BG]
wr
iti
ng-
mod
e
’ property
Name: | 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 |
lr
’,
‘l
r-t
b
’, ‘rl
’, ‘rl
-tb
’,
‘tb
’, and ‘tb-
rl
’. These values are deprecated in any
context except SVG1 documents. Implementations that wish to support them
in the context of CSS must treat these values as follows:
SVG1 | CSS |
---|---|
lr | horizontal-tb |
lr-tb | |
rl | |
tb | vertical-rl |
tb-rl |
dir
ect
ion
’ property (which is independent
of ‘wr
iti
ng-
mod
e
’). (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.
The ‘w
rit
ing
-mo
de
’ property determines the
direction of block flow. This determines the progression of block-level
boxes in a block formatting context; the progression of line boxes in a
block container that contains inlines; and the progression of rows in a
table. By virtue of determining the stacking direction of line boxes, the
‘wri
tin
g-m
ode
’ property also determines
whether line boxes and thus the writing mode is horizontal or vertical.
When set on the root element, the ‘w
rit
ing
-mo
de
’ property together with the
‘d
ire
cti
on
’ property determines the principal writing mode of the document.
This writing mode is used, for example, to determine the default page
progression direction. (See [CSS3PAGE].) The ‘wr
iti
ng-
mod
e
’
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 ‘wri
tin
g-m
ode
’ 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:
●If the element has a specified ‘d
isp
lay
’ of ‘inl
ine
’, its ‘d
isp
lay
’ computes to ‘inl
ine
-bl
ock
’. [CSS21]
●If the element has a specified ‘d
isp
lay
’ of ‘run
-in
’, its ‘d
isp
lay
’ computes to ‘blo
ck
’. [CSS21]
If such an element is a block container, then it establishes a new block
formatting context.
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 (wr
iti
ng-
mod
e:
hor
izo
nta
l-t
b
):
wri
tin
g-m
ode
: v
ert
ica
l-r
l
):
wr
iti
ng-
mod
e:
ver
tic
al-
lr
):
ve
rti
cal
-al
ign
’ 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 ‘ver
tic
al-
ali
gn
’
property to determine the alignment of inline-level content.
<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 (
.
out
er
) and the child
(.i
nne
r
) 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.
ve
rti
cal
-al
ign
’: ‘ba
sel
ine
’,
‘su
b
’, ‘s
upe
r
’, <length>, <percentage>. In
the latter cases, the baselines are aligned as for ‘ba
sel
ine
’, but the
child is shifted according to the offset given by its ‘ver
tic
al-
ali
gn
’ value.
If we assign ‘v
ert
ica
l-a
lig
n:
sup
er
’ to the .
inn
er
element from the example
above, the same rules are used to align the .
inn
er
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; }
tex
t-o
rie
nta
tio
n
’ property's ‘ver
tic
al-
rig
ht
’
and ‘upr
igh
t
’
values are provided to specify rotation vs. translation of horizontal-only
text.
The ‘r
ota
te-
lef
t
’, ‘r
ota
te-
rig
ht
’, and
‘rot
ate
-no
rma
l
’ values of ‘t
ext
-or
ien
tat
ion
’ are provided for
decorative layout effects and to work around limitations in CSS support
for bottom-to-top scripts.
Ideally, punctuation should be either sideways or upright
depending on whether the primary script is horizontal-only or vertical.
However, this information (which, like the base directionality, is a
property of the content) is not available to us. (UTN 22 used the concept
of a vertical directionality, given via ‘dir
ect
ion
’ or the HTML d
ir
attribute to handle this issue.) The current spec works around this by
using the East Asian Width property; but this approach only works if
vertical scripts do not share punctuation with horizontal-only scripts.
te
xt-
ori
ent
ati
on
’ property
Name: | text-orientation |
---|---|
Value: | vertical-right | upright | rotate-right | rotate-left | rotate-normal | auto |
Initial: | vertical-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 |
di
rec
tio
n
’ to be ‘lt
r
’.
In vertical writing modes, this value puts the element in a
vertical typographic mode.
rotate-right
In vertical writing modes, this causes text to be set as if in a
horizontal layout (using horizontal glyph variants and metrics), but
rotated 90° clockwise. This value puts the element in a
horizontal typographic mode.
rotate-left
In vertical writing modes, this causes text to be set as if in a
horizontal layout (using horizontal glyph variants and metrics), but
rotated 90° counter-clockwise. This value puts the element in a
horizontal typographic mode.
If set on a non-replaced inline whose parent is not ‘r
ota
te-
lef
t
’, this
forces ‘i
sol
ate
’ to be added to the computed value of
‘un
ico
de-
bid
i
’. Layout of text is exactly
as for ‘r
ota
te-
rig
ht
’ 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 ‘tex
t-o
rie
nta
tio
n
’ value other than
‘rot
ate
-le
ft
’, an analogous transformation is
applied.
rotate-normal
This value is equivalent to ‘r
ota
te-
rig
ht
’ in ‘v
ert
ica
l-r
l
’
writing mode and equivalent to ‘r
ota
te-
lef
t
’ in ‘ve
rti
cal
-lr
’
writing mode. It can be useful when setting horizontal script text
vertically in a primarily horizontal-only document.
auto
[SVG11] defines
‘gl
yph
-or
ien
tat
ion
-ve
rti
cal
’ and
‘gl
yph
-or
ien
tat
ion
-ho
riz
ont
al
’
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 ‘aut
o
’ value when set on
SVG elements indicates that the SVG ‘gl
yph
-or
ien
tat
ion
-ve
rti
cal
’ and ‘gl
yph
-or
ien
tat
ion
-ho
riz
ont
al
’ behavior
control the layout of text. Such UAs must set ‘t
ext
-or
ien
tat
ion
: a
uto
’ 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 ‘aut
o
’ behavior is the same as for ‘v
ert
ica
l-r
igh
t
’.
rot
ate
-no
rma
l
’. In the rest of the document,
the author can just set ‘wr
iti
ng-
mod
e
’ without worrying about
whether the text is ‘v
ert
ica
l-r
l
’ or ‘ve
rti
cal
-lr
’.
:root { text-orientation: rotate-normal; } 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; }
ve
rti
cal
-ri
ght
’) or set upright (for ‘upr
igh
t
’) depending on
the ‘te
xt-
ori
ent
ati
on
’ property.
The orientation of characters belonging to the Common, Inherited, and
Unknown script categories may be UA- or font-dependent in vertical
typographic modes:
If the font and font system support mixed-orientation typesetting, the
UA should rely on that feature to set ‘v
ert
ica
l-r
igh
t
’
text. Similarly if the font and font system support upright typesetting
then the UA should rely on that feature to set ‘upr
igh
t
’ text.
If the UA needs to synthesize such features (e.g. if an OpenType font
has only the ve
rt
but not the vrt
2
feature),
then the settings in Appendix
C are recommended.
hor
izo
nta
l-t
b
’ writing mode. CSS box layout in
writing modes other than ‘hor
izo
nta
l-t
b
’ is analogous to the box layout
defined in CSS2.1 if directions and dimensions are 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.
w
rit
ing
-mo
de
’,
‘t
ext
-or
ien
tat
ion
’, and ‘d
ire
cti
on
’
properties.
w
rit
ing
-mo
de
’
determines whether the line is oriented horizontally or vertically, it
doesn't say anything about how the contents within the line are arranged.
The line-relative directions are
over, under,
line-left, and line-right. The line orientation, which is given by a
combination of ‘te
xt-
ori
ent
ati
on
’ and ‘wri
tin
g-m
ode
’,
determines which side of the line is the "top" and thus which sides are
under (ascender side) and over
(descender side) the line. The line orientation also affects the
interpretation of alignment (‘ver
tic
al-
ali
gn
’) in the transverse dimension
of the line.
In addition to its over and under sides, a line box, even a
vertically-oriented one, also has a "left" and "right" side, which we will
call the line-left and line-right sides of the box (as distinct
from the physical left and physical right sides of the box). The line-left edge of a box is nominally the edge from
which LTR text would start. The line-right edge of a box is nominally the edge from
which RTL text would start. Depending on
the ‘wri
tin
g-m
ode
’ and ‘te
xt-
ori
ent
ati
on
’ properties, the
line-left side of a box could be on the physical left, top, or bottom.
t
ext
-or
ien
tat
ion
: r
ota
te-
lef
t
’
Note also that while the over and
under directions often map to the same
directions as before and after
respectively, this mapping is reversed for some combinations of ‘wr
iti
ng-
mod
e
’
and ‘t
ext
-or
ien
tat
ion
’.
hor
izo
nta
l-t
b
’ writing mode, they correspond to
the top, bottom, left, and right directions, respectively.
The before edge of a box is nominally the edge that
comes earlier in the block progression, as determined by the ‘w
rit
ing
-mo
de
’
property. Similarly the after edge is the edge that
comes later in the progression.
The start edge of a box is nominally the edge from
which text of its inline base direction will start. For boxes with a used
‘dir
ect
ion
’ value of ‘ltr
’, this means the line-left edge. For boxes with a used
‘dir
ect
ion
’ value of ‘rtl
’, this means the line-right edge. The edge opposite the start
edge is the end edge.
Note that while determining the before and after
edges of a box depends only on the ‘wr
iti
ng-
mod
e
’ property, determining the start and end edges of
a box depends not only on the ‘w
rit
ing
-mo
de
’ property but also the
‘dir
ect
ion
’ and ‘te
xt-
ori
ent
ati
on
’ properties.
An English (LTR-TB) block:
<----- width / measure -----> top side/ before side +------------------------------+ A left side/ | ---inline direction ---> | right side/ | start side | | | end side | | | block * horizontal * | height/ | | direction *writing mode* | extent | V | | +------------------------------+ V bottom side/ after sideA vertical Japanese block (TTB-RL):
<----- width / extent ------> top side/ start side +------------------------------+ A left side/ | <---block direction--- | right side/ | after side | | | before side | | * vertical * inline| | height/ | *writing mode* direction| | measure | V | | +------------------------------+ V bottom side/ end side
‘writing-mode ’
| ‘horizontal-tb ’
| ‘vertical-rl ’
| ‘vertical-lr ’
| |||||||
---|---|---|---|---|---|---|---|---|---|---|
‘text-orientation ’
| — | ‘rotate-left ’
| *right | ‘rotate-left ’
| *right | |||||
‘direction ’
| ‘ltr ’
| ‘rtl ’
| ‘ltr ’
| ‘rtl ’
| ‘ltr ’
| ‘rtl ’
| ‘ltr ’
| ‘rtl ’
| ‘ltr ’
| ‘rtl ’
|
extent | height | width | ||||||||
measure | width | height | ||||||||
before | top | right | left | |||||||
after | 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 |
*
-le
ft
’ and ‘*-r
igh
t
’ box properties (border, margin, padding)
use ‘*-t
op
’ and ‘*-b
ott
om
’ 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 ‘m
arg
in-
lef
t
’
property still affects the lefthand margin, for example; however in a
‘ve
rti
cal
-rl
’ writing mode it takes part in
margin collapsing in place of ‘mar
gin
-bo
tto
m
’.
Layout rules that depend on the ‘dir
ect
ion
’ property to choose between
left and right (e.g. overflow, overconstraint resolution, the initial
value for ‘tex
t-a
lig
n
’, 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 ‘ve
rti
cal
-rl
’ ‘ver
tic
al-
rig
ht
’
‘r
tl
’ table, the
first column would be on the bottom (the start side), and the first row
on the right (the before side). The table's ‘mar
gin
-le
ft
’ and ‘mar
gin
-ri
ght
’ would collapse with margins
before (on the left) and after (on the right) the table, respectively,
and if the table had ‘a
uto
’ values for ‘m
arg
in-
top
’ and ‘ma
rgi
n-b
ott
om
’ it would be centered
vertically within its block flow.
ve
rti
cal
-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 ‘v
ert
ica
l-a
lig
n
’), 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.
bor
der
-sp
aci
ng
’ property represent spacing
between columns and rows respectively, not necessarily the horizontal and
vertical spacing respectively. [CSS21]
●The ‘l
ine
-he
igh
t
’ property
always refers to the logical height. [CSS21]
The height properties (‘hei
ght
’,
‘mi
n-h
eig
ht
’, and ‘max
-he
igh
t
’) refer to the physical height, and
the width properties (‘wi
dth
’,
‘mi
n-w
idt
h
’, and ‘max
-wi
dth
’) 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 before and after 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.
wri
tin
g-m
ode
’ from its containing block
two cases are possible:
●The two writing modes are parallel to each other. (For example,
‘ve
rti
cal
-rl
’ and ‘ve
rti
cal
-lr
’).
●The two writing modes are perpendicular to each other. (For example,
‘ho
riz
ont
al-
tb
’ and ‘ver
tic
al-
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 to calculate
the measure of the child's containing block, 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 ‘au
to
’ 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
infinite. In such cases a percentage of the containing block measure
cannot be defined, and thus the initial containing block's size is used
instead as a fallback measure to
calculate such percentages.
a
uto
’, then the
used measure is calculated as the fit-content (shrink-to-fit) size using the
initial containing block's size as the available measure.
aut
o
’:
(一)If ‘co
lum
n-c
oun
t
’ and
‘c
olu
mn-
wid
th
’ are both ‘a
uto
’, a used ‘c
olu
mn-
wid
th
’ is calculated for the element
as the fill-available
measure using the fallback
measure as the available
measure.
(二)If the columns' extent is not fixed, the fill-available extent of the
element is used.
(三)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 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.
f
loa
t
’, ‘c
lea
r
’, ‘t
op
’, ‘b
ott
om
’, ‘l
eft
’, ‘ri
ght
’) 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 before margin
substituted for the top margin and the after margin substituted
for the bottom margin. Similarly the before padding and border are
substituted for the top padding and border, and the after padding and
border substituted for the bottom padding and border. Note this means only
before and after 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:
●The initial value of the ‘t
ext
-al
ign
’ property aligns to the start edge
of the line box.
●The ‘t
ext
-in
den
t
’ property
indents from the start edge of the line box.
●For tables, the ordering of columns begins on the start side of the
table, and the ordering of rows begins on the before side of the table.
hor
izo
nta
l-t
b
’
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 ‘le
ft
’ and ‘rig
ht
’ values of the
following properties:
●the ‘t
ext
-al
ign
’ 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 ‘le
ft
’ and ‘rig
ht
’ values of the following properties:
●the ‘f
loa
t
’ property [CSS21]
●the ‘c
lea
r
’ property [CSS21]
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:
●For the ‘ver
tic
al-
ali
gn
’
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]
●For the ‘tex
t-d
eco
rat
ion
’
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]
r
ect
()
’ notation of the
‘cli
p
’ property [CSS21]
●the background properties [CSS21] [CSS3BG]
●the border-image properties [CSS3BG]
●the offsets of the ‘b
ox-
sha
dow
’ and ‘te
xt-
sha
dow
’ properties
cap
tio
n-s
ide
’ keywords
Property: | ‘caption-side ’
|
---|---|
New Values: | ‘before ’ |
‘after ’
|
Initial: | before |
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 |
ca
pti
on-
sid
e
’ property: ‘b
efo
re
’ and ‘aft
er
’, which position the
caption before and after the table box, respectively. For tables with
‘hor
izo
nta
l-t
b
’ writing mode, they are
equivalent to the existing ‘t
op
’ and ‘bot
tom
’ values, respectively. [CSS21]
For implementations that support the ‘t
op-
out
sid
e
’ and ‘b
ott
om-
out
sid
e
’ model, corresponding
‘be
for
e-o
uts
ide
’ and ‘af
ter
-ou
tsi
de
’ will be similarly introduced.
Implementations that support the ‘to
p
’ and ‘b
ott
om
’ values of the ‘ca
pti
on-
sid
e
’ property but do not support side
captions (i.e. ‘le
ft
’ and ‘rig
ht
’ captions in horizontal writing modes)
must treat ‘top
’ and
‘bo
tto
m
’ as
‘be
for
e
’, when
the table is in a vertical writing mode.
For implementations that do support side captions (i.e. the ‘lef
t
’ and ‘r
igh
t
’ values from the
obsolete CSS 2.0 specification [CSS2]), this module also introduces
the ‘sta
rt
’ 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 ‘t
op
’ and ‘bot
tom
’ 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.
wr
iti
ng-
mod
e
’
is ‘ve
rti
cal
-rl
’ or if the root element's
‘wr
iti
ng-
mod
e
’ is ‘ho
riz
ont
al-
tb
’ and
its ‘di
rec
tio
n
’ is ‘rt
l
’.
●The page progression is left-to-right if the root element's ‘wr
iti
ng-
mod
e
’
is ‘ve
rti
cal
-lr
’ or if the root element's
‘wr
iti
ng-
mod
e
’ is ‘ho
riz
ont
al-
tb
’ and
its ‘di
rec
tio
n
’ is ‘lt
r
’.
(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.)
tex
t-c
omb
ine
’ property
Name: | text-combine |
---|---|
Value: | none | [ horizontal <number>?] |
Initial: | none |
Applies to: | non-replaced inline elements |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
no
ne
’.
In East Asian documents, the ‘tex
t-c
omb
ine
:
h
ori
zon
tal
’ 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:
.num { text-combine: horizontal; }and the following markup:
平成<span class="num">20</span>年 <span class="num">4</span>月 <span class="num">16</span>日にIn Japanese, this effect is known as tate-chu-yoko.
un
ico
de-
bid
i
’ syntax to disallow
questionable combinations.
●Clarified box model for inline elements in
bidirectional context and added an issue on which box decorations are
drawn when it breaks across lines.
●Rewrote vertical typesetting rules
and added an appendix with
details instead of relying only on the East Asian Width property.
●Clarified and corrected orthogonal
flows section.
●Simplified definitions of flow-relative mappings since logical
properties don't depend on them.
●Marked new ‘bef
ore
’ value as the initial value of
‘cap
tio
n-s
ide
’ and added note
about ‘bef
ore
-ou
tsi
de
’ and
‘aft
er-
out
sid
e
’ to parallel note in
CSS2.1.
●Added rules to calculate page progression
direction.
●Added intrinsic dimentions keywords to
‘wi
dth
’, ‘he
igh
t
’, ‘m
in-
wid
th
’, ‘m
in-
hei
ght
’, ‘ma
x-w
idt
h
’, ‘m
ax-
hei
ght
’, and ‘c
olu
mn-
wid
th
’ properties.
●Marked intrinsic sizes of multi-column elements as undefined.
/* 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; }
Code | Name | Transform |
---|---|---|
Bopo | Bopomofo | translate |
Egyp | Egyptian Hieroglyphs | translate |
Hira | Hiragana | translate |
Kana | Katakana | translate |
Hani | Han | translate |
Hang | Hangul | translate |
Mong | Mongolian | rotate |
Phag | Phags Pa | rotate |
Yiii | Yi | translate |
ro
tat
e-l
eft
’ value of ‘tex
t-o
rie
nta
tio
n
’.
tex
t-o
rie
nta
tio
n
’ is either ‘v
ert
ica
l-r
igh
t
’ or
‘up
rig
ht
’, the
following settings are recommended:
(一)Set East Asian fullwidth (F) and wide (W) characters upright (using
vertical font settings if available).
(二)Set East Asian halfwidth (H) characters sideways (using vertical font
settings if possible).
(三)Set any other characters that are assigned to a script (i.e. do not
belong to the Common, Inherited, or Unknown scripts) as required by ‘t
ext
-or
ien
tat
ion
’.
(四)Set spaces (Zs), dashes (Pd), connectors (Pc), and bracketing
punctuation (Ps, Pe, Pi, Pf) either upright using vertical font settings
if available or sideways if they are not.
Thus a THREE-PER-EM SPACE (U+2004) can be expected to
provide a 1/3-em advance in the inline dimension, and brackets can be
expected to encase their contents.
When ‘tex
t-o
rie
nta
tio
n
’ is ‘ve
rti
cal
-ri
ght
’,
the following settings are recommended for characters not
otherwise-specified above.
(一)Set the following characters using vertical font settings if
available, otherwise set them sideways:
●Other Punctuation (Po) with an East Asian Width property [UAX11] of ambiguous
(A).
●Superscripts, subscripts, and non-Indic fractions from
the Other Number (No) category.
●Private Use characters (Co).
(二)Set the following characters sideways (i.e. rotated, using horizontal
font settings).
●Currency Symbols (Sc) and Math Symbols (Sm).
●Aegean numbers and North Indic fractions from the Other
Number (No) category.
●All characters from the Box
Drawing, Block Elements,
and Arrows blocks.
●Other Symbols (So) from the Latin-1 Supplement and Letterlike
Symbols blocks.
●Modifier Symbols (Sk), except the tone marks listed below.
(三)Set the following characters upright (i.e. translated, using vertical
font settings if available):
●Modifier Symbols (Sk) in the U+02E5–U+02EB tone marks range and
those in the Modifier Tone Letters
block.
●All Other Symbols (So) characters not otherwise specified above.
●All Other Numbers (No) characters not otherwise specified above.
(四)Set all other characters sideways (i.e. rotated, using horizontal font
settings).
When ‘tex
t-o
rie
nta
tio
n
’ is ‘ve
rti
cal
-ri
ght
’,
set all characters upright (using vertical font settings if available)
unless otherwise specified above.
In OpenType, vertical font settings are provided by the
v
hea
, vm
tx
, and V
ORG
tables, as
well as the ver
t
and vrt
2
GSUB features. If any
of these are present, the font is considered to have vertical font
settings available.
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] |
m
ax(
min
-co
nte
nt,
mi
n(m
ax-
con
ten
t,
fil
l-a
vai
lab
le))
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 ‘h
eig
ht:
au
to
’.
For replaced elements, the min-content
and max-content sizes are the same and
correspond used size of the replaced element according to the ‘a
uto
’ width and height
calculations.
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] |
co
lum
n-w
idt
h
’, the new keywords specify
the optimal column width:
‘mi
n-c
ont
ent
’
Specifies the optimal column width as the min-content measure of the
multi-column element's contents.
‘ma
x-c
ont
ent
’
Specifies the optimal column width as the max-content measure of the
multi-column element's contents.
‘fi
ll-
ava
ila
ble
’
Specifies the optimal column width as the fill-available measure of the
multi-column element.
‘fi
t-c
ont
ent
’
Specifies the optimal column width as m
ax(
min
-co
nte
nt,
mi
n(m
ax-
con
ten
t,
fil
l-a
vai
lab
le))
.
Property | Values | Initial | Applies to | Inh. | Percentages | Media |
---|---|---|---|---|---|---|
direction | ltr | rtl | ltr | all elements | yes | N/A | visual |
‘caption-side’ | ‘before’ | ‘after’ | before | 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 | none | [ horizontal <number>?] | none | non-replaced inline elements | no | N/A | visual |
text-orientation | vertical-right | upright | rotate-right | rotate-left | rotate-normal | auto | vertical-right | all elements except table row groups, rows, column groups, and columns | yes | N/A | visual |
unicode-bidi | normal | embed | [ isolate || [ plaintext | bidi-override ] ] | 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 |