[Here will be included the file "../copyright.inc"]
This module specifies the text layout model in CSS and the properties that control it. It covers bidirectional and vertical text.
This module defines support for various international writing directions, such as left-to-right (e.g., Latin scripts), right-to-left (e.g., Hebrew or Arabic), bidirectional (e.g., mixing Latin with 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.
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, the CSS specifications avoid this latter set of terms.
Writing systems typically have one or two native writing modes. Some examples are:
Some additional characteristics, the line orientation and glyph orientation, are primarily used to handle scripts placed in a non-native writing mode. The line orientation determines which side of the line is the "top" and thus which sides are under or over the line. This determines the interpretation of alignment in the transverse dimension of the line. It also determines the default glyph orientation for scripts in a non-native orientation. These characteristics are controlled by the 'text-orientation' property.
See Unicode Technical Note #22 [[UTN22]] (HTML version) for a more in-depth introduction to writing modes and vertical text.
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. The 'direction' and 'unicode-bidi' 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) line break or block boundary. This sequence forms the "paragraph" unit in the bidirectional algorithm. The paragraph embedding level is set according to the value of the 'direction' property of the containing block rather than by the heuristic given in steps P2 and P3 of the Unicode algorithm.
Because the base directionality of a text depends on the structure and semantics of the document, these 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 'dir' attribute and <bdo> element to ensure correct bidirectional layout in the absence of a style sheet.
| Name: | 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 base directionality of text and elements on a line, and the directionality of embeddings and overrides (see 'unicode-bidi') 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:
The 'direction' property has no reordering in inline-level 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.
| 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 |
Values for this property have the following meanings:
For the purposes of the Unicode bidirectional algorithm, the base directionality of each "paragraph" for which the element is the containing block element is determined not by the element's computed 'direction' as usual, but by following rules P1, P2, and P3 of the Unicode bidirectional algorithm. However, if no direction-determining character is found in step P2, then the value of the 'direction' property is used instead. Note this value has no effect on inline elements.
The final order of characters in each block-level element 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, non-textual entities such as images are treated as neutral characters, unless their 'unicode-bidi' property has a value other than 'normal', in which case they are treated as strong characters in the 'direction' specified for the element.
Please 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), more inline boxes (including anonymous inline boxes) may have to be created, and some inline boxes may have to be split up and reordered before flowing.
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 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.
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).
When the element's '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.
When the element's '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.
| Name: | writing-mode |
|---|---|
| Value: | horizontal-tb | vertical-rl | vertical-lr | horizontal-bt |
| 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 sets the block flow direction. Possible values:
SVG1.1 [[!SVG11]] defines some additional values: ''lr'', ''lr-tb'', ''rl'', ''rl-tb'', ''tb'', and ''tb-rl''. These values are deprecated in any context except SVG1 documents. Implementations that wish to support 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 |
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.
See this demo to check out your implementation's interpretation! (Note that most SVG implementations don't support the 'direction' property, and thus your results may be skewed on that account. Examine the red line of text: if the numbers are not in reverse order, your implementation doesn't support "direction: rtl".)
The 'writing-mode' 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. As a result it also determines which side of a box is its before edge (i.e. the edge that comes earlier in the progression) and which side is its after edge (i.e. the edge that comes later in the progression).
The 'writing-mode' property, by virtue of determining the stacking direction of line boxes, determines whether line boxes and thus the writing mode of text are horizontal or vertical. However, it does not determine the orientation of the line boxes' contents or the start and end sides of the line. See Line orientation.
When set on the root element, the 'writing-mode' property together with the 'direction' 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 '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 'direction' 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 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 blocks 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 Uighur and Mongolian (writing-mode: lr):
CSS box layout in vertical writing modes is analogous to layout in the horizontal writing modes, following the principles outlined below:
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. (See Line-Relative Directions.)
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.
Every line box has an orientation. Whether its orientation is horizontal or vertical is determined by the 'writing-mode' property. Given that, which side is its "top", or over edge, is determined by the 'text-orientation' property on its containing block, and is independent of the block flow direction.
In addition to its over (ascender side) and under (descender side) edges, 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 to distinguish from the physical left and physical right sides of the box.
Line orientation compass
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 'direction' value of ''ltr'', this means the line left edge. For boxes with a used 'direction' value of ''rtl'', this means the line right edge. The edge opposite the start edge is the end edge.
These directional mappings exist even for boxes that do not contain any line boxes: they are calculated by the values of the 'writing-mode', 'text-orientation', and 'direction' properties only.
Note that determining the start and end edges of a box depends not only on its 'writing-mode' and 'direction' properties, but also its 'text-orientation' property.
Typical orientation in vertical
Line orientation with ''text-orientation: rotate-left''
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 'writing-mode' and 'text-orientation'.
| Name: | text-orientation |
|---|---|
| Value: | vertical-right | upright | rotate-right | rotate-left | rotate-normal |
| 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 |
This property specifies the orientation of characters in a non-native 'writing-mode' and sets the orientation of the line. Current values only have an effect in vertical writing modes. Values have the following meanings:
In vertical writing modes, grapheme clusters from scripts that do not have an intrinsic vertical orientation are rotated 90° clockwise from their standard orientation in horizontal text. When available, vertical glyph variants and vertical font metrics are used to set all punctuation and characters from any script that is not rotated. This value is typical for layout of primarily vertical-script text.
In vertical writing modes, grapheme clusters that do not have an intrinsic vertical orientation are rendered upright, i.e. in their standard horizontal orientation. Shaping characters are shaped in their isolated forms. When available, vertical glyph variants and vertical font metrics are used to set the text. The UA should synthesize vertical font metrics for grapheme clusters that do not have any.
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 (using horizontal glyph variants and metrics), but rotated 90° clockwise. This value is typical for ''vertical-rl'' text in a primarily horizontal-script document.
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 is typical for ''vertical-lr'' text in a primarily horizontal-script document.
If set on a non-replaced inline whose parent is not ''rotate-left'', this forces ''isolate'' to be added to the computed value of 'unicode-bidi'. Layout of text is exactly as for ''rotate-right'' except that the entire text content and baseline table of the element is mirrored: each box of the inline is mirrored around a vertical axis such that its content box does not move. (However the contents of atomic inlines are not mirrored; only their alignment is changed.) Similarly, if a child of the element has a 'text-orientation' value other than ''rotate-left'', an analogous transformation is applied.
This value is equivalent to ''rotate-right'' in ''vertical-rl'' writing mode and equivalent to ''rotate-left'' in ''vertical-lr'' writing mode.
[[!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. Implementations that wish to support these properties in conjunction with 'text-orientation' must introduce an ''auto'' value for 'text-orientation', which is set by the UA default style sheet on all SVG text content elements and which indicates that the SVG 'glyph-orientation-vertical' and 'glyph-orientation-horizontal' behavior controls the layout of text. In all other contexts the ''auto'' behavior is the same as for ''right''.
Add appendix that describes interaction with OpenType features and font layout?
| Name: | text-combine |
|---|---|
| Value: | none | cluster | upright |
| Initial: | none |
| Applies to: | non-replaced inline elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | specified value |
This property allows the combination of multiple characters into the space of a single character. 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. Values have the following meanings:
In vertical writing mode, attempt to display the text contents of the element horizontally within the vertical line box, ideally within the space of one ideographic character (1em square), as follows:
If the UA has compressed glyphs available for the contents of the element, then it should use those glyphs to attempt sizing the contents to 1em square. For example, a single-digit number should use a fullwidth glyph, a two digit number should use halfwidth or proportional glyphs, a three-digit number use 1/3-em glyphs (if available, else halfwidth glyphs), etc. The glyphs are stacked horizontally (similar to the contents of an inline-box with a horizontal writing mode and a line-height of 1em) and the baseline of the resulting composition chosen such that it is centered between the content edges of its parent inline box.
If the length of the element's contents exceeds the element's used line-height, then its contents are instead rendered as if ''text-combine'' were ''none''. This fallback behavior is also triggered if the element contains anything other than text.
In horizontal mode this value is equivalent to ''none''.
In East Asian documents, the ''text-combine: upright'' 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:
Example of horizontal-in-vertical tate-chu-yoko
In Japanese, this effect is known as tate-chu-yoko.
[[!CSS21]] defines the box layout model of CSS in detail. However, it only defines the box model for the ''horizontal-tb'' writing mode. CSS box layout in writing modes other than ''horizontal-tb'' is analogous to the box layout defined in CSS2.1 if boxes and dimensions are abstracted and remapped appropriately. This module defines the following abstract directional and dimensional terms and their mappings in order to define box layout for other writing modes:
Properties that are named in terms of the x and y axes are logical with respect to the block flow direction rather than absolute with respect to the page. Specifically:
Additionally, certain properties behave logically as follows:
The height properties ('height', 'min-height', and 'max-height') refer to the physical height, and the width properties ('width', 'min-width', and 'max-width') refer to the physical width. However, the rules used to calculate the height and width are logical: the height calculation rules in [[!CSS21]] are used for the logical height (which could be either the physical height or physical width). Likewise the width calculation rules in [[!CSS21]] are used for the logical width.
As a corollary, percentages on the margin and padding properties, which are calculated with respect to the containing block width regardless of their dimension, are calculated with respect to the logical width of the containing block.
When an element has a different 'writing-mode' from its containing block two cases are possible:
To handle the second case, for the purposes of calculating the layout of the box, the dimensions corresponding to the logical height and logical width of the containing block are determined using the writing mode of the box under consideration, not the writing mode of the element associated with the containing block.
What's a reasonable way of calculating ''auto'' logical widths? The fallout of the above statements is not reasonable. Three good options are: use the max-content size; use 100vh margin-box; use the same logical width that would be calculated if the block flows were parallell.
The terms "left", "right", "top", and "bottom" are always interpreted physically, i.e. with respect to the page independent of writing mode. Two abstract mappings are possible for these directions: logical and line-relative. Which one is chosen depends on whether the usage is primarily with respect to the block, or primarily with respect to the line box.
The logical directions are before, after, start, and end. In an LTR ''horizontal-tb'' writing mode, they correspond to the top, bottom, left, and right directions, respectively.
An English (LTR-TB) block:
<---- width / logical width --->
top side/
before side
+------------------------------+ A
left side/ | ---inline direction ---> | right side/ |
start side | | | end side |
| | block * horizontal * | height/
| | direction *writing mode* | logical height
| V | |
+------------------------------+ V
bottom side/
after side
A vertical Japanese block (TTB-RL):
<--- width / logical height --->
top side/
start side
+------------------------------+ A
left side/ | <---block direction--- | right side/ |
after side | | | before side |
| * vertical * inline| | height/
| *writing mode* direction| | logical width
| V | |
+------------------------------+ V
bottom side/
end side
Logical directions are calculated with respect to the writing mode of the element and used to abstract layout related to padding and border properties. For example, if an element had computed values of ''direction: ltr; writing-mode: vertical-lr; text-orientation: vertical-right'', 'padding-top' would give its start padding, and 'padding-left' would give its before padding.
Logical directions are calculated with respect to the writing mode of the parent of the element and used to abstract layout related to the margin properties and the 'top', 'bottom', 'left', and 'right' properties. (For the root element, which has no parent, the values of the writing mode of the element is used instead.)
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 padding and border on the same side as the before margin is substituted for the top padding and border, and the padding and border on the same side as the after margin for the bottom padding and border. Note this means only before and after margins ever collapse.
The parent element is used instead of the containing block, because the benefit of using the containing block is very rare, but the cost to implement it is rather high for implementations that do logical-physical mapping at cascade time.
The start and end directions are also used for inline layout as follows:
The line-relative directions are over, under, line-left, and line-right. In an LTR ''horizontal-tb'' writing mode, they correspond to the top, bottom, left, and right directions, respectively.
The line right and line left directions are calculated with respect to the writing mode of the element and used to interpret the ''left'' and ''right'' values of the following properties:
The line right and line left directions are calculated with respect to the writing mode of the containing block of the element and used to interpret the ''left'' and ''right'' values of the following properties:
The over and under directions are calculated with respect to the writing mode of the element and used to define the interpretation of the "top" (over edge) and "bottom" (under edge) of the line box as follows:
The following table summarizes the abstract-to-physical mappings:
| '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'' |
| length | 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 | |||||
The following values are purely physical in their definitions and do not respond to changes in writing mode:
This module introduces two new values to the 'caption-side' property: ''before'' and ''after'', 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]]
Implementations that only support the ''top'' and ''bottom'' values of the 'caption-side' property must treat them as ''before'', when the table is in a vertical writing mode.
For implementations that support side captions (i.e. the ''left'' and ''right'' values), 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.
This section defines the mapping of HTML presentational attributes in CSS. This section is normative for user agents supporting HTML in addition to the 'writing-mode' property. [[!HTML40]] [[!HTML5]]
width and height attributesThe HTML width and height attributes refer
to the physical width and height for elements that that are replaced,
i.e.
<applet>,
<embed>,
<iframe>,
<img>,
<object>,
<canvas>,
and
<video>
Form elements elements contain text, therefore their contents should be affected by writing mode, in which case these attributes refer to the logical width and height. The UA may, however, choose not to rotate nor flip these elements in vertical writing modes if it is not capable, and in that case, these attributes remain physical.
when not to rotate form elements/MathML, should treat them as images (always upright) or to force writing-mode to always calculate to horizontal-tb?
On table-related elements (<table>, <colgroup>,
<col>, <tr>, <th>,
<td>) the width and height
attributes are always logical.
The size attribute of the <hr> element
is also logical (refers to the logical height).
The following attributes behave the same way as their corresponding CSS properties:
align as 'float' or 'text-align'clear as 'clear'valign as 'vertical-align'The following attributes are logical and, as margins, are logical with respect to the writing mode of the parent element.
hspace as start and end marginsvspace as before and after marginsNOTE: This is only a proposal under discussion.
Logical properties and values provide the author with the ability to control layout through logical, rather than physical, direction and dimension mappings. This section defines logical properties and values for the features defined in [[CSS21]]. These properties are writing-mode relative equivalents of the corresponding physical properties.
Properties that accept physical directional keyword values (''top'', ''bottom'', ''left'', or ''right'') are redefined to also accept the appropriate logical directional keywords (''before'', ''after'', ''start'', or ''end''). In such cases, the logical values can be used in place of the corresponding physical values. For properties that take multiple keywords, combinations of logical and physical values are not allowed.
The following properties accept the ''start'' and ''end'' keywords where ''left'' and ''right'' are allowed:
caption-side)
The following properties accept the ''before'' and ''after'' keywords where ''top'' and ''bottom'' are allowed:
See the section on Abstract Layout details on how to map between logical and physical terms. This mapping controls the interpretation of logical keywords.
float needs coordination with GCPM where it defines page floats
'resize' accepts ''horizontal'' and ''vertical'', and these terminologies should be physical. should we add ''resize-x'' and ''resize-y'' as logical values?
In CSS, all pages are classified by user agents as either left pages or right pages. [[!CSS21]] Which page is first in a spread, however, depends on whether the page progression is left-to-right or right-to-left.
To allow control of page breaking to the page that is on the earlier or later side of a spread, rather than to the left or right side of a spread, this module introduces the following additional keywords for the 'page-break-after' and 'page-break-before' properties [[!CSS21]]:
recto/verso or even/odd or even-page/odd-page? If using odd/even, could use "The page number used to determine whether a page is even or odd is the physical page count starting from 1, and is sometimes different from the page number printed on the page. In other words, if a page is on the same side as the first page, it is an odd page." But which side would we want if page-break-before changes the first page?
Logical page selectors are added to support logical page selection. Authors typically place page numbers using physical placements, but the contents of headers often follows conventions depending on which page in the spread is earlier.
Following page selectors are added to support this scenario:
The logical page selectors have specificity equal to the '':left'' and '':right'' page selectors.
This section uses the following terminology:
If both logical and physical properties are specified on the same element, corresponding properties are treated as same property and then normal cascading rules are applied. The value resulting from the winning declaration then sets the specified (computed?) value of both corresponding properties.
See the section on Abstract Layout details on how to map between logical and physical terms. This mapping controls the pairing of corresponding logical and physical properties.
Since the 'writing-mode', 'direction', and 'text-orientation' values of the element or parent element are used for the pairing of corresponding properties, these three properties must be evaluated before determining the winning declaration among declarations of potentially-corresponding properties. In most cases, the values of the element are used for this mapping. However, in some cases the values on the parent element are used instead.
Should we add corresponding logical properties for border-top-right-radius, border-bottom-right-radius, border-top-left-radius, border-top-left-radius, and border-radius?
an idea is to allow ''margin: start 2em end 1em'' instead of these properties
another idea is to allow ''margin: logical unspecified 1em unspecified 2em'' instead of these properties
| Name: | measure, length |
|---|---|
| Value: | <length> | <percentage> | auto |
| Initial: | auto |
| Applies to: | same as 'width' and 'height' |
| Inherited: | no |
| Percentages: | measure, length of containing block |
| Media: | visual |
| Computed value: | the percentage as specified or the absolute length or 'auto' (see text) |
These properties correspond to the 'width' and 'height' properties. The mapping depends on the element's 'writing-mode'.
| Name: | min-measure, min-length |
|---|---|
| Value: | <length> | <percentage> |
| Initial: | 0 |
| Applies to: | same as 'width' and 'height' |
| Inherited: | no |
| Percentages: | measure, length of containing block |
| Media: | visual |
| Computed value: | the percentage as specified or the absolute length (see text) |
These properties correspond to the 'max-width' and 'max-height' properties. The mapping depends on the element's 'writing-mode'.
| Name: | max-measure, max-length |
|---|---|
| Value: | <length> | <percentage> | none |
| Initial: | none |
| Applies to: | same as 'width' and 'height' |
| Inherited: | no |
| Percentages: | measure, length of containing block |
| Media: | visual |
| Computed value: | the percentage as specified or the absolute length or 'none' (see text) |
These properties correspond to the 'min-width' and 'min-height' properties. The mapping depends on the element's 'writing-mode'.
| Name: | margin-before, margin-after, margin-start, margin-end |
|---|---|
| Value: | <length> | <percentage> | auto |
| Initial: | 0 |
| Applies to: | same as 'margin' |
| Inherited: | no |
| Percentages: | logical-width of containing block |
| Media: | visual |
| Computed value: | the percentage as specified or the absolute length or 'auto' (see text) |
These properties correspond to the 'margin-top', 'margin-bottom', 'margin-left', and 'margin-right' properties. The mapping depends on the parent element's 'writing-mode', 'direction', and 'text-orientation'.
| Name: | offset-before, offset-after, offset-start, offset-end |
|---|---|
| Value: | <length> | <percentage> | auto |
| Initial: | auto |
| Applies to: | positioned elements |
| Inherited: | no |
| Percentages: | logical-width, resp. logical-height of containing block |
| Media: | visual |
| Computed value: | same as box offsets: 'top', 'right', 'bottom', 'left' properties except that directions are logical |
These properties correspond to the 'top', 'bottom', 'left', and 'right' properties. The mapping depends on the parent element's 'writing-mode', 'direction', and 'text-orientation'.
| Name: | padding-before, padding-after, padding-start, padding-end |
|---|---|
| Value: | <length> | <percentage> |
| Initial: | 0 |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | logical-width of containing block |
| Media: | visual |
| Computed value: | <length> (see text) |
These properties correspond to the 'padding-top', 'padding-bottom', 'padding-left', and 'padding-right' properties. The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
| Name: | border-before-width, border-after-width, border-start-width, border-end-width |
|---|---|
| Value: | <border-width> |
| Initial: | medium |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | logical-width of containing block |
| Media: | visual |
| Computed value: | absolute length; '0' if the border style is 'none' or 'hidden' (see text) |
These properties correspond to the 'border-width-top', 'border-width-bottom', 'border-width-left', and 'border-width-right' properties. The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
| Name: | border-before-style, border-after-style, border-start-style, border-end-style |
|---|---|
| Value: | <border-style> |
| Initial: | none |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | specified value (see text) |
These properties correspond to the 'border-style-top', 'border-style-bottom', 'border-style-left', and 'border-style-right' properties. The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
| Name: | border-before-color, border-after-color, border-start-color, border-end-color |
|---|---|
| Value: | <color> |
| Initial: | currentcolor |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | the computed color (see text) |
These properties correspond to the 'border-color-top', 'border-color-bottom', 'border-color-left', and 'border-color-right' properties. The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
| Name: | border-before, border-after, border-start, border-end |
|---|---|
| Value: | <border-width> || <border-style> || <color> |
| Initial: | (see individual properties) |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | see individual properties |
| Media: | visual |
| Computed value: | see individual properties |
These properties correspond to the 'border-top', 'border-bottom', 'border-left', and 'border-right' properties. The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
The shorthand properties for margin, padding, and border set values for physical properties by default. But authors can specify the ''logical'' keyword at the beginning of the property value to indicate that the values map to the logical properties instead of the physical ones.
other candidates of the keyword are: ''relative'', ''script'', ''writing-mode'', ''beas'', or the value itself (e.g., ''vertical-lr-ltr'')
The following [[!CSS21]] shorthand properties accept the ''logical'' keyword:
The syntax for these properties is effectively changed by replacing
<value-type>{1,4}
with
logical? <value-type>{1,4}
When the logical keyword is present in the value, the values that follow are assigned to the logical properties as follows:
Should the shorthand also reset the physical properties to their initial values?
In the following example, the two rules are equivalent:
blockquote {
margin: logical 1em 2em 3em 4em;
}
blockquote {
margin-before: 1em;
margin-end: 2em;
margin-after: 3em;
margin-start: 4em;
}
[[!CSS3BG]] is handled separately because it can fill an area with specified images, and the area to fill can be rotated or flipped depending on the text flow.
| Name: | background-image-transform |
|---|---|
| Value: | logical | physical | rotate |
| Initial: | physical is this the right default? we need to investigate which is more common |
| Applies to: | All elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | as specified |
This property defines whether background images are transformed to match to the value of 'writing-mode' property, and whether 'background-size' widths and heights are logical or physical. Values have the following meanings:
The ''repeat-x'' and ''repeat-y'' values are logical, but in CSS3 this property can also accept double values to specify horizontal and vertical behaviors separately. The double values are considered logical if the ''logical'' keyword is specified, otherwise physical.
should also add repeat-horizontal and repeat-vertical for the physical value?
| Name: | border-image-transform |
|---|---|
| Value: | logical | physical | rotate |
| Initial: | rotate is this the right default? |
| Applies to: | All elements, except internal table elements when 'border-collapse' is ''collapse'' |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | as specified |
This property defines whether border images are transformed to match to the value of 'writing-mode' property, with the reference writing mode being ''writing-mode: horizontal-tb; direction: ltr''. Values have the following meanings:
The following properties use the value of this property to determine how directional mappings are done:
Martin Heijdra, Paul Nelson, Michel Suignard, Steve Zilles
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; }