Summarized test results:
CSS3 Writing Modes, Bidi

Intended audience: users, XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), CSS coders, Web project managers, and anyone who wants to know how well browsers support the bidi properties of CSS Writing Modes Level 3.

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.

Note that the snapshot summaries of these test results are for released versions of the browsers tested. Versions that are still in development may provide better support for these features. The tests themselves do not test any vendor prefixes.

In particular, nearly all of the tests that fail here pass for Chrome, Safari, Opera and Mozilla, if you add -moz- or -webkit- prefixes.

results

The tables show results for tests run on the date shown. Above the tables are summaries of the results at that date. To see the test, click on the link in the left-most column. To see detailed results for a single test, click on the link in the right-most column.

Inline tests

unicode-bidi: embed

Snapshot summary, 2014-06-23
Firefox 29.0, Chrome 35.0.1916.153, Safari 6.1.4, Internet Explorer 11, Opera 22.0

All browsers tested support all tests.

Assertion Firefox Chrome Safari Opera IE Detailed results
span direction rtl, unicode-bidi embed (1) 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.
span direction rtl, unicode-bidi embed (2) 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.
span direction ltr, unicode-bidi embed (1) 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.
span direction ltr, unicode-bidi embed (2) 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.
element as directional character with unicode-bidi embed, rtl If unicode-bidi:embed is applied to an inline element, that element will interact with the surrounding text like a strongly directional character.
element as directional character with unicode-bidi embed, ltr If unicode-bidi:embed is applied to an inline element, that element will interact with the surrounding text like a strongly directional character.
element isolation and unicode-bidi embed, rtl + number If unicode-bidi:embed is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text.
element isolation and unicode-bidi embed, ltr + number If unicode-bidi:embed is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text.
element isolation and unicode-bidi embed, rtl list If unicode-bidi:embed is applied to an inline element, the text in that element will NOT be directionally isolated from following content.
element isolation and unicode-bidi embed, ltr list If unicode-bidi:embed is applied to an inline element, the text in that element will NOT be directionally isolated from following content.
direction alone and inherited, unicode-bidi embed Directionality is not changed by the direction property on its own, but unicode-bidi: embed will apply direction declared on a higher level element.

unicode-bidi: isolate

Snapshot summary, 2014-06-23
Firefox 29.0, Chrome 35.0.1916.153, Safari 6.1.4, Internet Explorer 11, Opera 22.0

No browsers tested support any tests. (Note, however, that most, if not all, tests work with browsers that support -moz or -webkit prefixes.)

Assertion Firefox Chrome Safari Opera IE Detailed results
span direction rtl, unicode-bidi isolate (1) 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.
span direction rtl, unicode-bidi isolate (2) 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.
span direction ltr, unicode-bidi isolate (1) 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.
span direction ltr, unicode-bidi isolate (2) 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.
element as directional character with unicode-bidi isolate, rtl If unicode-bidi:isolate is applied to an inline element, that element will interact with the surrounding text like a neutral directional character.
element as directional character with unicode-bidi isolate, ltr If unicode-bidi:isolate is applied to an inline element, that element will interact with the surrounding text like a neutral directional character.
element isolation and unicode-bidi isolate, rtl + number If unicode-bidi:isolate is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text.
element isolation and unicode-bidi isolate, ltr + number If unicode-bidi:isolate is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text.
element isolation and unicode-bidi isolate, rtl list If unicode-bidi:isolate is applied to an inline element, the text in that element WILL be directionally isolated from following content.
element isolation and unicode-bidi isolate, ltr list If unicode-bidi:isolate is applied to an inline element, the text in that element will NOT be directionally isolated from following content.
direction alone and inherited, unicode-bidi embed Directionality is not changed by the direction property on its own, but unicode-bidi: isolate will apply direction declared on a higher level element.

unicode-bidi: normal

Snapshot summary, 2014-06-23
Firefox 29.0, Chrome 35.0.1916.153, Safari 6.1.4, Internet Explorer 11, Opera 22.0

All browsers tested support all tests.

Assertion Firefox Chrome Safari Opera IE Detailed results
span direction rtl, unicode-bidi normal (1) 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.
span direction rtl, unicode-bidi normal (2) 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.
span direction ltr, unicode-bidi normal (1) 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.
span direction ltr, unicode-bidi normal (2) 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.
element as directional character with unicode-bidi normal, rtl 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.
element as directional character with unicode-bidi normal, ltr 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.
element isolation and unicode-bidi normal, rtl + number If unicode-bidi:normal is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text.
element isolation and unicode-bidi normal, ltr + number If unicode-bidi:normal is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text.
element isolation and unicode-bidi normal, rtl list If unicode-bidi:normal is applied to an inline element, the text in that element will NOT be directionally isolated from following content.
element isolation and unicode-bidi normal, ltr list If unicode-bidi:normal is applied to an inline element, the text in that element will NOT be directionally isolated from following content.
direction alone and inherited, unicode-bidi normal Directionality is not changed by the direction property on its own, nor by unicode-bidi:normal set on a lower level element.

unicode-bidi: unset

Snapshot summary, 2014-06-23
Firefox 29.0, Chrome 35.0.1916.153, Safari 6.1.4, Internet Explorer 11, Opera 22.0

All browsers tested support all tests.

Assertion Firefox Chrome Safari Opera IE Detailed results
span direction rtl, unicode-bidi unset (1) 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.
span direction rtl, unicode-bidi unset (2) 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.
span direction ltr, unicode-bidi unset (1) 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.
span direction ltr, unicode-bidi unset (2) 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.
element as directional character with unicode-bidi unset, rtl 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.
element as directional character with unicode-bidi unset, ltr 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.
element isolation and unicode-bidi unset, rtl + number 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.
element isolation and unicode-bidi unset, ltr + number 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.
element isolation and unicode-bidi unset, rtl list 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.
element isolation and unicode-bidi unset, ltr list 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.

unicode-bidi: bidi-override

Snapshot summary, 2014-06-23
Firefox 29.0, Chrome 35.0.1916.153, Safari 6.1.4, Internet Explorer 11, Opera 22.0

All browsers tested support all tests.

Assertion Firefox Chrome Safari Opera IE Detailed results
span direction rtl, bidi-override (1) 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.
span direction rtl, bidi-override (2) 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.
span direction ltr, bidi-override (1) 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.
span direction ltr, bidi-override (2) 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.
element as directional character with bidi-override, rtl If unicode-bidi:bidi-override is applied to an inline element, that element will interact with the surrounding text like a strongly directional character.
element as directional character with bidi-override, ltr If unicode-bidi:bidi-override is applied to an inline element, that element will interact with the surrounding text like a strongly directional character.
element isolation and bidi-override, rtl + number If unicode-bidi:bidi-override is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text.
element isolation and bidi-override, ltr + number If unicode-bidi:bidi-override is applied to an inline element, the text in that element will NOT be directionally isolated from surrounding text.
element isolation and bidi-override, rtl list If unicode-bidi:bidi-override is applied to an inline element, the text in that element will NOT be directionally isolated from following content.
element isolation and bidi-override, ltr list If unicode-bidi:bidi-override is applied to an inline element, the text in that element will NOT be directionally isolated from following content.
direction alone and inherited, bidi-override unicode-bidi: bidi-override will apply direction declared on a higher level element.
default direction, bidi-override unicode-bidi: When no direction is set, bidi-override will apply ltr ordering to text within its scope.

unicode-bidi: isolate-override

Snapshot summary, 2014-06-23
Firefox 29.0, Chrome 35.0.1916.153, Safari 6.1.4, Internet Explorer 11, Opera 22.0

No browsers tested support any tests. (Note, however, that most, if not all, tests work with browsers that support -moz or -webkit prefixes.)

Assertion Firefox Chrome Safari Opera IE Detailed results
span direction rtl, isolate-override (1) 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.
span direction rtl, isolate-override (2) 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.
span direction ltr, isolate-override (1) 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.
span direction ltr, isolate-override (2) 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.
element as directional character with isolate-override, rtl If unicode-bidi:isolate-override is applied to an inline element, that element will interact with the surrounding text like a neutral directional character.
element as directional character with isolate-override, ltr If unicode-bidi:isolate-override is applied to an inline element, that element will interact with the surrounding text like a neutral directional character.
element isolation and isolate-override, rtl + number If unicode-bidi:isolate-override is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text.
element isolation and isolate-override, ltr + number If unicode-bidi:isolate-override is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text.
element isolation and isolate-override, rtl list If unicode-bidi:isolate-override is applied to an inline element, the text in that element WILL be directionally isolated from following content.
element isolation and isolate-override, ltr list If unicode-bidi:isolate-override is applied to an inline element, the text in that element WILL be directionally isolated from following content.
direction alone and inherited, isolate-override unicode-bidi: isolate-override will apply direction declared on a higher level element.
default direction, isolate-override unicode-bidi: When no direction is set, isolate-override will apply ltr ordering to text within its scope.

unicode-bidi: plaintext

Snapshot summary, 2014-06-23
Firefox 29.0, Chrome 35.0.1916.153, Safari 6.1.4, Internet Explorer 11, Opera 22.0

No browsers tested support any tests. (Note, however, that most, if not all, tests work with browsers that support -moz or -webkit prefixes.)

Assertion Firefox Chrome Safari Opera IE Detailed results
span unicode-bidi plaintext, rtl (1) 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.
span unicode-bidi plaintext, ltr (1) 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.
element as directional character with unicode-bidi plaintext, rtl If unicode-bidi:plaintext is applied to an inline element, that element will interact with the surrounding text like a neutral directional character.
element as directional character with unicode-bidi plaintext, ltr If unicode-bidi:plaintext is applied to an inline element, that element will interact with the surrounding text like a neutral directional character.
element isolation and unicode-bidi plaintext, rtl + number If unicode-bidi:plaintext is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text.
element isolation and unicode-bidi plaintext, ltr + number If unicode-bidi:plaintext is applied to an inline element, the text in that element WILL be directionally isolated from surrounding text.
element isolation and unicode-bidi plaintext, rtl list If unicode-bidi:plaintext is applied to an inline element, the text in that element WILL be directionally isolated from following content.
element isolation and unicode-bidi plaintext, ltr list If unicode-bidi:plaintext is applied to an inline element, the text in that element WILL be directionally isolated from following content.
span unicode-bidi plaintext, no strong (1) 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.

Block tests

unicode-bidi: embed

Snapshot summary, 2014-06-23
Firefox 29.0, Chrome 35.0.1916.153, Safari 6.1.4, Internet Explorer 11, Opera 22.0

All browsers tested support all tests.

Assertion Firefox Chrome Safari Opera IE Detailed results
div direction rtl If direction is applied to a block element containing mixed direction text, the text in that element will be displayed in the expected order.
div direction ltr If direction is applied to a block element containing mixed direction text, the text in that element will be displayed in the expected order.
div direction rtl If direction is applied to a block element, contained block elements inherit that direction.

unicode-bidi: override

Snapshot summary, 2014-06-23
Firefox 29.0, Chrome 35.0.1916.153, Safari 6.1.4, Internet Explorer 11, Opera 22.0

All browsers tested support all tests.

Assertion Firefox Chrome Safari Opera IE Detailed results
div override rtl If unicode-bidi:bidi-override is applied to a block element, characters are displayed strictly in sequence according to the direction property.
div override ltr If unicode-bidi:bidi-override is applied to a block element, characters are displayed strictly in sequence according to the direction property.
div direction ltr 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.
div override inheritance 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.

unicode-bidi: isolate-override

Snapshot summary, 2014-06-23
Firefox 29.0, Chrome 35.0.1916.153, Safari 6.1.4, Internet Explorer 11, Opera 22.0

No browsers tested support any tests. (Note, however, that most, if not all, tests work with browsers that support -moz or -webkit prefixes.)

Assertion Firefox Chrome Safari Opera IE Detailed results
div override rtl If unicode-bidi:isolate-override is applied to a block element, characters are displayed strictly in sequence according to the direction property.
div override ltr If unicode-bidi:isolate-override is applied to a block element, characters are displayed strictly in sequence according to the direction property.
div direction ltr 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.
div override inheritance 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.

unicode-bidi: plaintext

Snapshot summary, 2014-06-23
Firefox 29.0, Chrome 35.0.1916.153, Safari 6.1.4, Internet Explorer 11, Opera 22.0

No browsers tested support any tests. (Note, however, that most, if not all, tests work with browsers that support -moz or -webkit prefixes.)

Assertion Firefox Chrome Safari Opera IE Detailed results
div plaintext, rtl 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.
div plaintext, ltr 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.
div plaintext inheritance 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.
div plaintext with br 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.
textarea plaintext 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.
pre plaintext 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.

direction and table columns

Snapshot summary, 2014-06-23
Firefox 29.0, Chrome 35.0.1916.153, Safari 6.1.4, Internet Explorer 11, Opera 22.0

All browsers tested support the test.

Assertion Firefox Chrome Safari Opera IE Detailed results
table columns If direction is applied to the ancestor of a table element, columns will be displayed in that direction.