Writing modes
unicode-bidi
unicode-bidi sets, for text that mixes right-to-left and left-to-right scripts, whether an element's content is ordered apart from its surroundings or in a forced order that ignores each character's direction. Use it together with direction.
Syntax
normal | embed | isolate | bidi-override | isolate-override | plaintextPreview
こんにちは、世界！
مرحبا بالعالم!
Code
.box {
direction: rtl;
unicode-bidi: plaintext;
}Controls
こんにちは、世界！
مرحبا بالعالم!
About
Values
normal: does nothing. An inline element is ordered together with the surrounding text as if its edges were not there. This is the initial value.embed: orders an inline element's content as a nested level in the direction of direction. No effect on block boxes.isolate: orders an inline element's content apart from its surroundings, like a separate paragraph in the direction of direction. The surrounding text treats it as a single symbol, so neither side affects the other's order. No effect on block boxes.bidi-override: ignores each character's own direction and places every character one by one in the direction of direction. Withrtl, even Latin letters run right to left, soHelloshows asolleH. On a block box, it applies to the whole content.isolate-override: separates the content likeisolateand orders it likebidi-override. On a block box it looks the same asbidi-override.plaintext: ignores direction and picks the direction of each paragraph from its first character with a clear direction (such as a Latin or Arabic letter). On a block box, each paragraph split by<br>or a block gets its own direction, and line alignment (text-align: start) follows it.
The preview sets direction: rtl as a helper declaration and shows three lines in English, Japanese and Arabic. normal, embed and isolate look the same, bidi-override and isolate-override reverse the English and Japanese characters, and plaintext lays out each line in its own direction.
When to use it
Use isolate when you insert a string whose script you do not know, such as a user name or a product name, into a sentence. Without it, the inserted text's direction can pull nearby punctuation and numbers out of place. plaintext suits text where each line may be in a different language, such as comments.
Use elements and attributes in HTML
The spec recommends expressing this with the dir attribute and elements instead of unicode-bidi in HTML. Browsers give <bdi> and elements with a dir attribute isolate, <bdo> isolate-override, and <textarea> and <pre> with dir="auto" plaintext.