Summarized test results:
CSS3 Writing Modes, Bidi

Intended audience: users, HTML coders, script developers, CSS coders, Web project managers, and anyone who wants to know whether browsers support the bidi properties in the CSS Writing Modes spec.

Updated

These tests check the default behavior of direction and unicode-bidi properties in the CSS Writing Modes Level 3 specification against the expectations for handling of bidirectional text. For more information see CSS Writing Modes Level 3.

To see the test, click on the link in the left-most column. To see detailed results for a single test, click on a row and look just above the table. The detailed results show the date(s) the test result was recorded, and the version of the browser tested.

Any dependencies are shown in notes above the table, and notes below the table will usually provide any additional useful information, including an explanation of why a result was marked as 'partially successful'.

Key:

pass fail partially successful

Inline tests


unicode-bidi: embed

Links to run testsAssertionsGecko FirefoxBlink ChromeBlink OperaWebkit SafariWebKitLegacy EdgeIE
span direction rtl, unicode-bidi embed (1)
bidi-embed-001.html
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 in rtl order. passpasspasspasspasspasspass
span direction rtl, unicode-bidi embed (2)
bidi-embed-002.html
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 in rtl order. passpasspasspasspasspasspass
span direction ltr, unicode-bidi embed (1)
bidi-embed-003.html
In a rtl context, if direction:ltr and unicode-bidi:embed are applied to an inline element containing mixed direction text, the text in that element will be displayed in ltr order. passpasspasspasspasspasspass
span direction ltr, unicode-bidi embed (2)
bidi-embed-004.html
In a rtl context, if direction:ltr and unicode-bidi:embed are applied to an inline element containing mixed direction text, the text in that element will be displayed in ltr order. passpasspasspasspasspasspass
element as directional character with unicode-bidi embed, rtl
bidi-embed-005.html
If unicode-bidi:embed is applied to an inline element, that element will interact with the surrounding text like a strongly directional character. passpasspasspasspasspasspass
element as directional character with unicode-bidi embed, ltr
bidi-embed-006.html
If unicode-bidi:embed is applied to an inline element, that element will interact with the surrounding text like a strongly directional character. passpasspasspasspasspasspass
element isolation and unicode-bidi embed, rtl + number
bidi-embed-007.html
If unicode-bidi:embed is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text. passpasspasspasspasspasspass
element isolation and unicode-bidi embed, ltr + number
bidi-embed-008.html
If unicode-bidi:embed is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text. passpasspasspasspasspasspass
element isolation and unicode-bidi embed, rtl list
bidi-embed-009.html
If unicode-bidi:embed is applied to an inline element, the text in that element will NOT be directionally isolated from following content. passpasspasspasspasspasspass
element isolation and unicode-bidi embed, ltr list
bidi-embed-010.html
If unicode-bidi:embed is applied to an inline element, the text in that element will NOT be directionally isolated from following content. passpasspasspasspasspasspass
direction alone and inherited, unicode-bidi embed
bidi-embed-011.html
Directionality is not changed by the direction property on its own, but unicode-bidi: embed will apply direction declared on a higher level element. passpasspasspasspasspasspass

unicode-bidi: isolate

Links to run testsAssertionsGecko FirefoxBlink ChromeBlink OperaWebkit SafariWebKitLegacy EdgeIE
span direction rtl, unicode-bidi isolate (1)
bidi-isolate-001.html
In a ltr context, if direction:rtl and unicode-bidi:isolate are applied to an inline element containing mixed direction text, the text in that element will be displayed in rtl order. passpasspasspasspassfailfail
span direction rtl, unicode-bidi isolate (2)
bidi-isolate-002.html
In a ltr context, if direction:rtl and unicode-bidi:isolate are applied to an inline element containing mixed direction text, the text in that element will be displayed in rtl order. passpasspasspasspassfailfail
span direction ltr, unicode-bidi isolate (1)
bidi-isolate-003.html
In a rtl context, if direction:ltr and unicode-bidi:isolate are applied to an inline element containing mixed direction text, the text in that element will be displayed in ltr order. passpasspasspasspassfailfail
span direction ltr, unicode-bidi isolate (2)
bidi-isolate-004.html
In a rtl context, if direction:ltr and unicode-bidi:isolate are applied to an inline element containing mixed direction text, the text in that element will be displayed in ltr order. passpasspasspasspassfailfail
element as directional character with unicode-bidi isolate, rtl
bidi-isolate-005.html
If unicode-bidi:isolate is applied to an inline element, that element will interact with the surrounding text like a neutral directional character. passpasspasspasspassfailfail
element as directional character with unicode-bidi isolate, ltr
bidi-isolate-006.html
If unicode-bidi:isolate is applied to an inline element, that element will interact with the surrounding text like a neutral directional character. passpasspasspasspassfailfail
element isolation and unicode-bidi isolate, rtl + number
bidi-isolate-007.html
If unicode-bidi:isolate is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text. passpasspasspasspassfailfail
element isolation and unicode-bidi isolate, ltr + number
bidi-isolate-008.html
If unicode-bidi:isolate is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text. passpasspasspasspassfailfail
element isolation and unicode-bidi isolate, rtl list
bidi-isolate-009.html
If unicode-bidi:isolate is applied to an inline element, the text in that element WILL be directionally isolated from following content. passpasspasspasspassfailfail
element isolation and unicode-bidi isolate, ltr list
bidi-isolate-010.html
If unicode-bidi:isolate is applied to an inline element, the text in that element will NOT be directionally isolated from following content. passpasspasspasspassfailfail
direction alone and inherited, unicode-bidi embed
bidi-isolate-011.html
Directionality is not changed by the direction property on its own, but unicode-bidi: isolate will apply direction declared on a higher level element. passpasspasspasspassfailfail

unicode-bidi: normal

Links to run testsAssertionsGecko FirefoxBlink ChromeBlink OperaWebkit SafariWebKitLegacy EdgeIE
span direction rtl, unicode-bidi normal (1)
bidi-normal-001.html
In a ltr context, if direction:rtl and unicode-bidi:normal are applied to an inline element containing mixed direction text, the text in that element will NOT be displayed in rtl order. passpasspasspasspasspasspass
span direction rtl, unicode-bidi normal (2)
bidi-normal-002.html
In a ltr context, if direction:rtl and unicode-bidi:normal are applied to an inline element containing mixed direction text, the text in that element will NOT be displayed in rtl order. passpasspasspasspasspasspass
span direction ltr, unicode-bidi normal (1)
bidi-normal-003.html
In a rtl context, if direction:ltr and unicode-bidi:normal are applied to an inline element containing mixed direction text, the text in that element will NOT be displayed in ltr order. passpasspasspasspasspasspass
span direction ltr, unicode-bidi normal (2)
bidi-normal-004.html
In a rtl context, if direction:ltr and unicode-bidi:normal are applied to an inline element containing mixed direction text, the text in that element will NOT be displayed in ltr order. passpasspasspasspasspasspass
element as directional character with unicode-bidi normal, rtl
bidi-normal-005.html
If unicode-bidi:normal is applied to an inline element, that element will NOT interact with the surrounding text like a strong or neutral directional character. passpasspasspasspasspasspass
element as directional character with unicode-bidi normal, ltr
bidi-normal-006.html
If unicode-bidi:normal is applied to an inline element, that element will NOT interact with the surrounding text like a strong or neutral directional character. passpasspasspasspasspasspass
element isolation and unicode-bidi normal, rtl + number
bidi-normal-007.html
If unicode-bidi:normal is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text. passpasspasspasspasspasspass
element isolation and unicode-bidi normal, ltr + number
bidi-normal-008.html
If unicode-bidi:normal is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text. passpasspasspasspasspasspass
element isolation and unicode-bidi normal, rtl list
bidi-normal-009.html
If unicode-bidi:normal is applied to an inline element, the text in that element will NOT be directionally isolated from following content. passpasspasspasspasspasspass
element isolation and unicode-bidi normal, ltr list
bidi-normal-010.html
If unicode-bidi:normal is applied to an inline element, the text in that element will NOT be directionally isolated from following content. passpasspasspasspasspasspass
direction alone and inherited, unicode-bidi normal
bidi-normal-011.html
Directionality is not changed by the direction property on its own, nor by unicode-bidi:normal set on a lower level element. passpasspasspasspasspasspass

unicode-bidi: unset

Links to run testsAssertionsGecko FirefoxBlink ChromeBlink OperaWebkit SafariWebKitLegacy EdgeIE
span direction rtl, unicode-bidi unset (1)
bidi-unset-001.html
In a ltr context, if direction:rtl is set but unicode-bidi is not set on an inline element containing mixed direction text, the text in that element will NOT be displayed in rtl order. passpasspasspasspasspasspass
span direction rtl, unicode-bidi unset (2)
bidi-unset-002.html
In a ltr context, if direction:rtl is set but unicode-bidi is not set on an inline element containing mixed direction text, the text in that element will NOT be displayed in rtl order. passpasspasspasspasspasspass
span direction ltr, unicode-bidi unset (1)
bidi-unset-003.html
In a rtl context, if direction:ltr is set but unicode-bidi is not set on an inline element containing mixed direction text, the text in that element will NOT be displayed in ltr order. passpasspasspasspasspasspass
span direction ltr, unicode-bidi unset (2)
bidi-unset-004.html
In a rtl context, if direction:ltr is set but unicode-bidi is not set on an inline element containing mixed direction text, the text in that element will NOT be displayed in ltr order. passpasspasspasspasspasspass
element as directional character with unicode-bidi unset, rtl
bidi-unset-005.html
If direction is set but unicode-bidi is not set on an inline element, that element will NOT interact with the surrounding text like a strong or neutral directional character. passpasspasspasspasspasspass
element as directional character with unicode-bidi unset, ltr
bidi-unset-006.html
If direction is set but unicode-bidi is not set on an inline element, that element will NOT interact with the surrounding text like a strong or neutral directional character. passpasspasspasspasspasspass
element isolation and unicode-bidi unset, rtl + number
bidi-unset-007.html
If direction is set but unicode-bidi is not set on an inline element, the text in that element will NOT be directionally isolated from surrounding text. passpasspasspasspasspasspass
element isolation and unicode-bidi unset, ltr + number
bidi-unset-008.html
If direction is set but unicode-bidi is not set on an inline element, the text in that element will NOT be directionally isolated from surrounding text. passpasspasspasspasspasspass
element isolation and unicode-bidi unset, rtl list
bidi-unset-009.html
If direction is set but unicode-bidi is not set on an inline element, the text in that element will NOT be directionally isolated from following content. passpasspasspasspasspasspass
element isolation and unicode-bidi unset, ltr list
bidi-unset-010.html
If direction is set but unicode-bidi is not set on an inline element, the text in that element will NOT be directionally isolated from following content. passpasspasspasspasspasspass

unicode-bidi: bidi-override

Links to run testsAssertionsGecko FirefoxBlink ChromeBlink OperaWebkit SafariWebKitLegacy EdgeIE
span direction rtl, bidi-override (1)
bidi-override-001.html
In a ltr context, if direction:rtl and unicode-bidi:bidi-override are applied to an inline element containing mixed direction text, the characters in that element will all be displayed in rtl order, ignoring the bidi algorithm. passpasspasspasspasspasspass
span direction rtl, bidi-override (2)
bidi-override-002.html
In a ltr context, if direction:rtl and unicode-bidi:bidi-override are applied to an inline element containing mixed direction text, the characters in that element will all be displayed in rtl order, ignoring the bidi algorithm. passpasspasspasspasspasspass
span direction ltr, bidi-override (1)
bidi-override-003.html
In a rtl 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 all be displayed in ltr order, ignoring the bidi algorithm. passpasspasspasspasspasspass
span direction ltr, bidi-override (2)
bidi-override-004.html
In a rtl 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 all be displayed in ltr order, ignoring the bidi algorithm. passpasspasspasspasspasspass
element as directional character with bidi-override, rtl
bidi-override-005.html
If unicode-bidi:bidi-override is applied to an inline element, that element will interact with the surrounding text like a strongly directional character. passpasspasspasspasspasspass
element as directional character with bidi-override, ltr
bidi-override-006.html
If unicode-bidi:bidi-override is applied to an inline element, that element will interact with the surrounding text like a strongly directional character. passpasspasspasspasspasspass
element isolation and bidi-override, rtl + number
bidi-override-007.html
If unicode-bidi:bidi-override is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text. passpasspasspasspasspasspass
element isolation and bidi-override, ltr + number
bidi-override-008.html
If unicode-bidi:bidi-override is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text. passpasspasspasspasspasspass
element isolation and bidi-override, rtl list
bidi-override-009.html
If unicode-bidi:bidi-override is applied to an inline element, the text in that element will NOT be directionally isolated from following content. passpasspasspasspasspasspass
element isolation and bidi-override, ltr list
bidi-override-010.html
If unicode-bidi:bidi-override is applied to an inline element, the text in that element will NOT be directionally isolated from following content. passpasspasspasspasspasspass
direction alone and inherited, bidi-override
bidi-override-011.html
unicode-bidi: bidi-override will apply direction declared on a higher level element. passpasspasspasspasspasspass
default direction, bidi-override
bidi-override-012.html
unicode-bidi: When no direction is set, bidi-override will apply ltr ordering to text within its scope. passpasspasspasspasspasspass

unicode-bidi: isolate-override

Links to run testsAssertionsGecko FirefoxBlink ChromeBlink OperaWebkit SafariWebKitLegacy EdgeIE
span direction rtl, isolate-override (1)
bidi-isolate-override-001.html
In a ltr context, if direction:rtl and unicode-bidi:isolate-override are applied to an inline element containing mixed direction text, the characters in that element will all be displayed in rtl order, ignoring the bidi algorithm. passpasspasspasspassfailfail
span direction rtl, isolate-override (2)
bidi-isolate-override-002.html
In a ltr context, if direction:rtl and unicode-bidi:isolate-override are applied to an inline element containing mixed direction text, the characters in that element will all be displayed in rtl order, ignoring the bidi algorithm. passpasspasspasspassfailfail
span direction ltr, isolate-override (1)
bidi-isolate-override-003.html
In a rtl context, if direction:ltr and unicode-bidi:isolate-override are applied to an inline element containing mixed direction text, the characters in that element will all be displayed in ltr order, ignoring the bidi algorithm. passpasspasspasspassfailfail
span direction ltr, isolate-override (2)
bidi-isolate-override-004.html
In a rtl context, if direction:ltr and unicode-bidi:isolate-override are applied to an inline element containing mixed direction text, the characters in that element will all be displayed in ltr order, ignoring the bidi algorithm. passpasspasspasspassfailfail
element as directional character with isolate-override, rtl
bidi-isolate-override-005.html
If unicode-bidi:isolate-override is applied to an inline element, that element will interact with the surrounding text like a neutral directional character. passpasspasspasspassfailfail
element as directional character with isolate-override, ltr
bidi-isolate-override-006.html
If unicode-bidi:isolate-override is applied to an inline element, that element will interact with the surrounding text like a neutral directional character. passpasspasspasspassfailfail
element isolation and isolate-override, rtl + number
bidi-isolate-override-007.html
If unicode-bidi:isolate-override is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text. passpasspasspasspassfailfail
element isolation and isolate-override, ltr + number
bidi-isolate-override-008.html
If unicode-bidi:isolate-override is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text. passpasspasspasspassfailfail
element isolation and isolate-override, rtl list
bidi-isolate-override-009.html
If unicode-bidi:isolate-override is applied to an inline element, the text in that element WILL be directionally isolated from following content. passpasspasspasspassfailfail
element isolation and isolate-override, ltr list
bidi-isolate-override-010.html
If unicode-bidi:isolate-override is applied to an inline element, the text in that element WILL be directionally isolated from following content. passpasspasspasspassfailfail
direction alone and inherited, isolate-override
bidi-isolate-override-011.html
unicode-bidi: isolate-override will apply direction declared on a higher level element. passpasspasspasspassfailfail
default direction, isolate-override
bidi-isolate-override-012.html
unicode-bidi: When no direction is set, isolate-override will apply ltr ordering to text within its scope. passpasspasspasspassfailfail

unicode-bidi: plaintext

Links to run testsAssertionsGecko FirefoxBlink ChromeBlink OperaWebkit SafariWebKitLegacy EdgeIE
span unicode-bidi plaintext, rtl (1)
bidi-plaintext-001.html
If unicode-bidi:plaintext is applied to an inline element containing mixed direction text with a first strong directional character that is rtl, the text in that element will be displayed in rtl order. passpasspasspasspassfailfail
span unicode-bidi plaintext, ltr (1)
bidi-plaintext-003.html
If unicode-bidi:plaintext is applied to an inline element containing mixed direction text with a first strong directional character that is ltr, the text in that element will be displayed in ltr order. passpasspasspasspassfailfail
element as directional character with unicode-bidi plaintext, rtl
bidi-plaintext-005.html
If unicode-bidi:plaintext is applied to an inline element, that element will interact with the surrounding text like a neutral directional character. passpasspasspasspassfailfail
element as directional character with unicode-bidi plaintext, ltr
bidi-plaintext-006.html
If unicode-bidi:plaintext is applied to an inline element, that element will interact with the surrounding text like a neutral directional character. passpasspasspasspassfailfail
element isolation and unicode-bidi plaintext, rtl + number
bidi-plaintext-007.html
If unicode-bidi:plaintext is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text. passpasspasspasspassfailfail
element isolation and unicode-bidi plaintext, ltr + number
bidi-plaintext-008.html
If unicode-bidi:plaintext is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text. passpasspasspasspassfailfail
element isolation and unicode-bidi plaintext, rtl list
bidi-plaintext-009.html
If unicode-bidi:plaintext is applied to an inline element, the text in that element WILL be directionally isolated from following content. passpasspasspasspassfailfail
element isolation and unicode-bidi plaintext, ltr list
bidi-plaintext-010.html
If unicode-bidi:plaintext is applied to an inline element, the text in that element WILL be directionally isolated from following content. passpasspasspasspassfailfail
span unicode-bidi plaintext, no strong (1)
bidi-plaintext-011.html
If unicode-bidi:plaintext is applied to an inline element containing mixed direction text with no strong directional character, the text in that element will be displayed in ltr order. passpasspassfailfailfailfail

Block tests

unicode-bidi: embed

Links to run testsAssertionsGecko FirefoxBlink ChromeBlink OperaWebkit SafariWebKitLegacy EdgeIE
div direction rtl
block-embed-001.html
If direction is applied to a block element containing mixed direction text, the text in that element will be displayed in the expected order. passpasspasspasspasspasspass
div direction ltr
block-embed-002.html
If direction is applied to a block element containing mixed direction text, the text in that element will be displayed in the expected order. passpasspasspasspasspasspass
div direction rtl
block-embed-003.html
If direction is applied to a block element, contained block elements inherit that direction. passpasspasspasspasspasspass

unicode-bidi: bidi-override

Links to run testsAssertionsGecko FirefoxBlink ChromeBlink OperaWebkit SafariWebKitLegacy EdgeIE
div override rtl
block-override-001.html
If unicode-bidi:bidi-override is applied to a block element, characters are displayed strictly in sequence according to the direction property. passpasspasspasspasspasspass
div override ltr
block-override-002.html
If unicode-bidi:bidi-override is applied to a block element, characters are displayed strictly in sequence according to the direction property. passpasspasspasspasspasspass
div direction ltr
block-override-003.html
If unicode-bidi:bidi-override is applied to a block element with no direction value set, characters are displayed strictly in sequence, in ltr order. passpasspasspasspasspasspass
div override inheritance
block-override-004.html
If unicode-bidi:bidi-override is applied to a block element, all characters in immediate inline text are displayed strictly in sequence according to the direction property, but content of contained blocks is not. passpasspasspasspasspasspass

unicode-bidi: isolate-override

Links to run testsAssertionsGecko FirefoxBlink ChromeBlink OperaWebkit SafariWebKitLegacy EdgeIE
div override rtl
block-override-isolate-001.html
If unicode-bidi:isolate-override is applied to a block element, characters are displayed strictly in sequence according to the direction property. passpasspasspasspassfailfail
div override ltr
block-override-isolate-002.html
If unicode-bidi:isolate-override is applied to a block element, characters are displayed strictly in sequence according to the direction property. passpasspasspasspassfailfail
div direction ltr
block-override-isolate-003.html
If unicode-bidi:isolate-override is applied to a block element with no direction value set, characters are displayed strictly in sequence, in ltr order. passpasspasspasspassfailfail
div override inheritance
block-override-isolate-004.html
If unicode-bidi:isolate-override is applied to a block element, all characters in immediate inline text are displayed strictly in sequence according to the direction property, but content of contained blocks is not. passpasspasspasspassfailfail

unicode-bidi: plaintext

Links to run testsAssertionsGecko FirefoxBlink ChromeBlink OperaWebkit SafariWebKitLegacy EdgeIE
div plaintext, rtl
block-plaintext-001.html
If unicode-bidi: plaintext is applied to a div element containing mixed direction text, the order of directional runs in the text in that element will be determined by its first strong character. passpasspasspasspassfailfail
div plaintext, ltr
block-plaintext-002.html
If unicode-bidi: plaintext is applied to a div element containing mixed direction text, the order of directional runs in the text in that element will be determined by its first strong character. passpasspasspasspassfailfail
div plaintext inheritance
block-plaintext-003.html
If unicode-bidi:plaintext is applied to a block element, directional runs are displayed according to the first strong character, but content of contained blocks is not. passpasspasspasspassfailfail
div plaintext with br
block-plaintext-004.html
If unicode-bidi:plaintext is applied to a div element containing br tags, each line of characters that starts after br is displayed according to the first strong character after the br. passpasspasspasspassfailfail
textarea plaintext
block-plaintext-005.html
If unicode-bidi:plaintext is applied to a textarea element, each line of characters after a linebreak is displayed according to the first strong character after the linebreak. passpasspasspasspassfailfail
pre plaintext
block-plaintext-006.html
If unicode-bidi:plaintext is applied to a pre element, each line of characters after a linebreak is displayed according to the first strong character after the linebreak. passpasspasspasspassfailfail

Direction and table columns

Links to run testsAssertionsGecko FirefoxBlink ChromeBlink OperaWebkit SafariWebKitLegacy EdgeIE
table columns
bidi-table-001.html
If direction is applied to the ancestor of a table element, columns will be displayed in that direction. passpasspasspasspasspasspass