Chapter 9 - Visual formatting model - 9.10 Text direction: the 'direction' and 'unicode-bidi' properties
Go to the relevant page of the specification.
- bidi-001
-
The bidi algorithm and inlines in CSS
- bidi-002
-
The bidi algorithm and inlines in CSS
- bidi-003
-
The bidi algorithm and inlines in CSS
- bidi-004 (may)
-
The bidi algorithm and inlines in CSS
- bidi-004a
-
Bidi Codes, White space, and Tree structure
The final order of characters in a block container is the same as if markup had been stripped, consecutive space collapsed in logical order, and the resulting character sequence, including any bidi codes, had been passed to an implementation of the Unicode bidirectional algorithm for plain text that produced the same line-breaks as the styled text. - bidi-005a
-
The bidi algorithm and inlines in CSS: embed levels and white-space: pre;
- bidi-005b
-
The bidi algorithm and inlines in CSS: embed levels and white-space: pre;
- bidi-006a
-
The bidi algorithm and inlines in CSS: embed levels and white-space: nowrap;
- bidi-006b
-
The bidi algorithm and inlines in CSS: embed levels and white-space: nowrap;
- bidi-007a
-
The bidi algorithm and inlines in CSS: embed levels and float: left;
- bidi-007b
-
The bidi algorithm and inlines in CSS: embed levels and float: left;
- bidi-008a
-
The bidi algorithm and inlines in CSS: embed levels and display: table;
- bidi-008b
-
The bidi algorithm and inlines in CSS: embed levels and display: table;
- bidi-009a
-
The bidi algorithm and inlines in CSS: embed levels and display: table-row;
- bidi-009b
-
The bidi algorithm and inlines in CSS: embed levels and display: table-row;
- bidi-010a
-
The bidi algorithm and inlines in CSS: embed levels and position: absolute
- bidi-010b
-
The bidi algorithm and inlines in CSS: embed levels and position: absolute
- bidi-011
-
The bidi algorithm and inlines in CSS wrapping bidi formatting characters
- bidi-alt-001
-
unicode-bidi: bidi-override in alt text
If alt text is not treated as replaced content, then unicode-bidi applies to image alt text. - bidi-breaking-001
-
Bidi paragraph boundaries: Blocks
Block boundaries break bidi paragraphs. - bidi-breaking-002
-
Bidi paragraph boundaries: Forced Line Breaks
Forced line breaks of class B (but not class WS) break bidi paragraphs. - bidi-breaking-003 (may)
-
Bidi paragraph boundaries: Forced Line Breaks (Unicode)
Forced line breaks of class B (but not class WS) break bidi paragraphs. - bidi-direction-001
-
direction:rtl on body
direction:rtl on body should inherit to paragraphs - bidi-direction-002
-
direction - nested ltr and rtl
Direction on paragraph should override direction on body - bidi-display-block-001
-
bidi and inline with display:block
An inline with display:block should be treated as a paragraph in the bidi algorithm - bidi-generated-content-001
-
content: with character forced bidi - rlo
A right-to-left override should be applied when u+202E is inserted through the content property - bidi-generated-content-002
-
content: with character forced bidi - lro
A left-to-right override should be correctly applied when inserted through the content property - bidi-glyph-mirroring-001
-
unicode-bidi: bidi-override - glyph mirroring
Glyph mirroring of characters with unicode Bidi_Mirrored property should be performed when unicode-bidi: bidi-override is applied - bidi-glyph-mirroring-002
-
unicode-bidi: bidi-override - glyph mirroring
Glyph mirroring of characters with unicode Bidi_Mirrored property should be performed direction:rtl is applied - bidi-inline-001
-
unicode-bidi: bidi-override on inline - rtl
bidi-override should be applied to inlines with no interruptions to surrounding text - bidi-inline-002
-
unicode-bidi: bidi-override on inline - nested
Nested bidi-override should be applied to inlines with no interruptions to surrounding text - bidi-list-001
-
direction:rtl - unordered list
direction:rtl should apply to unordered lists, putting bullets on the right - bidi-list-002
-
direction:rtl - nested unordered list
direction:rtl should apply to nested unordered lists, putting bullets on the right and offset leftwards - bidi-list-003
-
direction:rtl - ordered list
direction:rtl should apply to nested ordered lists, putting bullets on the right and offset leftwards - bidi-list-004
-
text-align: justify and direction:rtl - unordered list
text-align: justify should apply to unordered lists in rtl context without affecting their rtlness - bidi-list-005
-
text-align: left and direction:rtl - unordered list
text-align:left should be applied to unordered list in rtl context without affecting its rtlness - bidi-list-006
-
text-align: right and direction:rtl - unordered list
text-align:right should be applied to unordered list in rtl context without affecting its rtlness - bidi-list-007
-
text-align: center and direction:rtl - unordered list
text-align: center should apply to unordered lists in rtl context without affecting their rtlness - bidi-override-001
-
unicode-bidi: bidi-override on table
bidi-override should not be applied to table cell content when specified on table - bidi-override-002
-
unicode-bidi: bidi-override on table cell
bidi-override should be applied to table-cell content when specified on the cell - bidi-override-003
-
unicode-bidi: bidi-override on list
bidi-override should not be applied to list item when specified on ul - bidi-override-004
-
unicode-bidi: bidi-override on list item
bidi-override should be applied when specified on list item - bidi-override-005
-
unicode-bidi: bidi-override on nested div
bidi-override should be applied to inline-level descendants but not block-level descendants - bidi-position-fixed-001
-
position:fixed in rtl context
Default horizontal position of position:fixed block should be right in rtl context, and ancestor direction should still be applied inside the block taken out of normal flow - bidi-table-001
-
direction: rtl on table
direction:rtl on table should reverse order of table cells - bidi-table-002
-
direction: on nested tables
direction: should affect order of table cells - bidi-unicode-bidi-001
-
unicode-bidi: bidi-override - rtl
unicode-bidi: bidi-override should order characters strictly according to value of direction property - bidi-unicode-bidi-003
-
unicode-bidi: embed - nested ltr and rtl
unicode-bidi: embed should open a new bidi embedding level for inline-level element - direction-001
-
Direction set to 'ltr'
The 'direction' property set to 'ltr' sets the direction of an element to left-to-right. - direction-002
-
Direction set to 'rtl'
The 'direction' property set to 'rtl' sets the direction of an element to right-to-left. - direction-003
-
Direction set to 'inherit' sets a value that is inherited from parent element
The 'direction' property set to 'inherit' sets a direction value to the same as the parent element. - direction-applies-to-001 (ahem)
-
Direction applied to element with 'display' set to 'table-row-group'
The 'direction' property applies to elements with a display of 'table-row-group'. - direction-applies-to-002 (ahem)
-
Direction applied to element with 'display' set to 'table-header-group'
The 'direction' property applies to elements with a display of 'table-header-group'. - direction-applies-to-003 (ahem)
-
Direction applied to element with 'display' set to 'table-footer-group'
The 'direction' property applies to elements with a display of 'table-footer-group'. - direction-applies-to-004 (ahem)
-
Direction applied to element with 'display' set to 'table-row'
The 'direction' property applies to elements with a display of 'table-row'. - direction-applies-to-005 (ahem)
-
Direction applied to element with 'display' set to 'table-column-group'
The 'direction' property applies to elements with a display of 'table-column-group'. - direction-applies-to-006 (ahem)
-
Direction applied to element with 'display' set to 'table-column'
The 'direction' property applies to elements with a display of 'table-column'. - direction-applies-to-007 (ahem)
-
Direction applied to element with 'display' set to 'table-cell'
The 'direction' property applies to elements with a display of 'table-cell'. - direction-applies-to-008
-
Direction applied to element with 'display' set to inline
The 'direction' property applies to elements with a display of inline. - direction-applies-to-009 (ahem)
-
Direction applied to element with 'display' set to block
The 'direction' property applies to elements with a display of block. - direction-applies-to-010 (ahem)
-
Direction applied to element with 'display' set to list-item
The 'direction' property applies to elements with a display of list-item. - direction-applies-to-012 (ahem)
-
Direction applied to element with 'display' set to inline-block
The 'direction' property applies to elements with a display of inline-block. - direction-applies-to-013 (ahem)
-
Direction applied to element with 'display' set to 'table'
The 'direction' property applies to elements with a display of 'table'. - direction-applies-to-014 (ahem)
-
Direction applied to element with 'display' set to 'inline-table'
The 'direction' property applies to elements with a display of 'inline-table'. - direction-applies-to-015 (ahem)
-
Direction applied to element with 'display' set to 'table-caption'
The 'direction' property applies to elements with a display of 'table-caption'. - direction-unicode-bidi-001
-
default context, direction rtl, unicode-bidi embed
In the default context, if direction:rtl and unicode-bidi:embed are applied to an inline element containing mixed direction text, the text in that element will be displayed correctly. - direction-unicode-bidi-002
-
default context, direction rtl, unicode-bidi none
In the default context, if direction:rtl alone is applied to an inline element containing mixed direction text, the different directional runs in that element will not be in the correct order. - direction-unicode-bidi-003
-
ltr context, direction rtl, unicode-bidi embed
In a LTR context, if direction:rtl and unicode-bidi:embed are applied to an inline element containing mixed direction text, the text in that element will be displayed correctly. - direction-unicode-bidi-004
-
ltr context, direction rtl, unicode-bidi none
In a LTR context, if direction:rtl alone is applied to an inline element containing mixed direction text, the different directional runs in that element will not be in the correct order. - direction-unicode-bidi-005
-
rtl context, direction ltr, unicode-bidi embed
In a RTL context, if direction:ltr and unicode-bidi:embed are applied to a LTR inline element containing mixed direction text, the text in that element will be displayed correctly. - direction-unicode-bidi-006
-
rtl context, direction ltr, unicode-bidi none
In a RTL context, if direction:ltr alone is applied to a LTR inline element containing mixed direction text, the different directional runs in that element will not be in the correct order. - direction-unicode-bidi-007
-
direction of a ltr tspan
In a RTL context, if direction:ltr and unicode-bidi:embed are applied to an inline element containing mixed direction text, the the inline element will interact with surrounding ltr text as a LTR directional run. - direction-unicode-bidi-008
-
direction of a rtl tspan
In a LTR context, if direction:rtl and unicode-bidi:embed are applied to an inline element containing mixed direction text, the the inline element will interact with surrounding rtl text as a RTL directional run. - direction-unicode-bidi-009
-
on element, direction ltr, unicode-bidi none
direction:ltr alone on a block element will cause the text to be left-aligned, directional runs to be arranged LTR (but the words should look correct within each run), and punctuation should be treated as LTR. - direction-unicode-bidi-010
-
on element, direction rtl, unicode-bidi none
direction:rtl alone on a block element will cause the text to be right-aligned, directional runs to be arranged RTL (but the words should look correct within each run), and punctuation should be treated as RTL. - direction-unicode-bidi-011
-
inherited, direction ltr, unicode-bidi none
direction:ltr on a container element will be inherited by an embedded block element. - direction-unicode-bidi-012
-
inherited, direction rtl, unicode-bidi none
direction:rtl on a container element will be inherited by an embedded block element. - direction-unicode-bidi-013
-
default context, direction none, unicode-bidi override
In the default context, if unicode-bidi:bidi-override and no direction are applied to an inline element containing mixed direction text, the characters in that element will be displayed in backing-store order from left to right. - direction-unicode-bidi-014
-
default context, direction ltr, unicode-bidi override
In the default context, if direction:ltr and unicode-bidi:bidi-override are applied to an inline element containing mixed direction text, the characters in that element will be displayed in backing-store order from left to right. - direction-unicode-bidi-015
-
default context, direction rtl, unicode-bidi override
In the default context, if unicode-bidi:bidi-override and direction:rtl are applied to an inline element containing mixed direction text, the characters in that element will be displayed in reverse backing-store order from left to right. - direction-unicode-bidi-016
-
ltr context, direction none, unicode-bidi override
In a LTR context, if unicode-bidi:bidi-override and no direction are applied to an inline element containing mixed direction text, the characters in that element will be displayed in backing-store order from left to right. - direction-unicode-bidi-017
-
ltr context, direction ltr, unicode-bidi override
In a LTR context, if direction:ltr and unicode-bidi:bidi-override are applied to an inline element containing mixed direction text, the characters in that element will be displayed in backing-store order from left to right. - direction-unicode-bidi-018
-
ltr context, direction rtl, unicode-bidi override
In a LTR context, if unicode-bidi:bidi-override and direction:rtl are applied to an inline element containing mixed direction text, the characters in that element will be displayed in reverse backing-store order from left to right. - direction-unicode-bidi-019
-
rtl context, direction none, unicode-bidi override
In a RTL context, if unicode-bidi:bidi-override and no direction are applied to a LTR inline element containing mixed direction text, the characters in that element will be displayed in backing-store order from right to left. - direction-unicode-bidi-020
-
rtl context, direction ltr, unicode-bidi override
In a RTL context, if direction:ltr and unicode-bidi:bidi-override are applied to a LTR inline element containing mixed direction text, the characters in that element will be displayed in reverse backing-store order from right to left. - direction-unicode-bidi-021
-
rtl context, direction rtl, unicode-bidi override
In a RTL context, if unicode-bidi:bidi-override and direction:rtl are applied to a LTR inline element containing mixed direction text, the characters in that element will be displayed in backing-store order from right to left. - direction-unicode-bidi-022
-
on element, direction ltr, unicode-bidi override
direction:ltr and unicode-bidi:bidi-override on a block element will cause the text to be left-aligned, and all text to be displayed in backing-store order from left to right. - direction-unicode-bidi-023
-
on element, direction rtl, unicode-bidi override
direction:rtl and unicode-bidi:bidi-override on a block element will cause the text to be right-aligned, and all text to be displayed in backing-store order from right to left. - direction-unicode-bidi-024
-
inherited, direction ltr, unicode-bidi override
When direction:ltr and unicode-bidi:bidi-override is set on a block element, the override will not be inherited by a child block element, but the direction will. - direction-unicode-bidi-025
-
inherited, direction rtl, unicode-bidi override
When direction:rtl and unicode-bidi:bidi-override is set on a block element, the override will not be inherited by a child block element, but the direction will. - direction-unicode-bidi-026
-
right to left block
When direction:ltr and unicode-bidi:bidi-override is set on a block element containing block and inline elements, only the direction of the inline text will be overridden. - direction-unicode-bidi-027
-
left to right block
When direction:rtl and unicode-bidi:bidi-override is set on a block element containing block and inline elements, only the direction of the inline text will be overridden. - direction-unicode-bidi-028
-
inner block converted to inline
When direction:rtl and unicode-bidi:bidi-override is set on a block element containing block and inline elements, and CSS is used to change the block element to an inline element, the direction of all the text will be overridden. - list-style-position-025
-
list-style-position in rtl context
list-style-position:inside in rtl context should let text flow below the bullet on the right side - unicode-bidi-001
-
Unicode-bidi set to 'normal'
The property 'unicode-bidi' set to 'normal' doesn't modify the directionality of text. - unicode-bidi-002
-
Unicode-bidi set to 'embed'
The property 'unicode-bidi' set to 'embed' opens a new level of embedding in the Unicode bi-directional algorithm. - unicode-bidi-003
-
Unicode-bidi set to 'bidi-override'
The property 'unicode-bidi' set to 'bidi-override' overrides the directionality of text. - unicode-bidi-004
-
Unicode-bidi set to 'inherit'
The property 'unicode-bidi' set to 'inherit' sets a value the same as parent element's value. - unicode-bidi-applies-to-001
-
Unicode-bidi applied to element with 'display' set to 'table-row-group'
The 'unicode-bidi' property applies to elements with a display of 'table-row-group'. - unicode-bidi-applies-to-002
-
Unicode-bidi applied to element with 'display' set to 'table-header-group'
The 'unicode-bidi' property applies to elements with a display of 'table-header-group'. - unicode-bidi-applies-to-003
-
Unicode-bidi applied to element with 'display' set to 'table-footer-group'
The 'unicode-bidi' property applies to elements with a display of 'table-footer-group'. - unicode-bidi-applies-to-004
-
Unicode-bidi applied to element with 'display' set to 'table-row'
The 'unicode-bidi' property applies to elements with a display of 'table-row'. - unicode-bidi-applies-to-005
-
Unicode-bidi applied to element with 'display' set to 'table-column-group'
The 'unicode-bidi' property applies to elements with a display of 'table-column-group'. - unicode-bidi-applies-to-006
-
Unicode-bidi applied to element with 'display' set to 'table-column'
The 'unicode-bidi' property applies to elements with a display of 'table-column'. - unicode-bidi-applies-to-007
-
Unicode-bidi applied to element with 'display' set to 'table-cell'
The 'unicode-bidi' property applies to elements with a display of 'table-cell'. - unicode-bidi-applies-to-008
-
Unicode-bidi applied to element with 'display' set to inline
The 'unicode-bidi' property applies to elements with a display of inline. - unicode-bidi-applies-to-009
-
Unicode-bidi applied to element with 'display' set to block
The 'unicode-bidi' property applies to elements with a display of block. - unicode-bidi-applies-to-010
-
Unicode-bidi applied to element with 'display' set to list-item
The 'unicode-bidi' property applies to elements with a display of list-item. - unicode-bidi-applies-to-012
-
Unicode-bidi applied to element with 'display' set to inline-block
The 'unicode-bidi' property applies to elements with a display of inline-block. - unicode-bidi-applies-to-013
-
Unicode-bidi applied to element with 'display' set to 'table'
The 'unicode-bidi' property applies to elements with a display of 'table'. - unicode-bidi-applies-to-014
-
Unicode-bidi applied to element with 'display' set to 'inline-table'
The 'unicode-bidi' property applies to elements with a display of 'inline-table'. - unicode-bidi-applies-to-015
-
Unicode-bidi applied to element with 'display' set to 'table-caption'
The 'unicode-bidi' property applies to elements with a display of 'table-caption'.