A comparison of direction and Unicode-bidi in CSS

In the Multi-language page, the students who have contacted Aripo and Hebrew must understand the importance of writing direction, including the order of writing before our movement is also from right to left. The Unicode-bidi and direction properties in CSS determine the direction in which HTML or XML text is rendered, and two properties can be used to change the order of writing

Direction

Direction attribute has three values

Inherit using the parent element's settings

Ltr default value, left to right

RTL right-to-left

Our default writing order is left-to-right, not special settings, but for Arabic is right-to-left, this time you need to set the direction property to correctly show the

Prevent browser rewriting text-align Let's do the default settings

<p style= "direction:rtl;text-align:initial;" >    طهيسيستآختتهاتيسوريتتآنفرومريغتتولآفتتهاتيسوسآد    </p>

Corresponding also has an HTML attribute dir can be set

<p dir= "RTL" dtyle= "text-align:initial;" >    طهيسيستآختتهاتيسوريتتآنفرومريغتتولآفتتهاتيسوسآد    </p>

Direction properties The default writing order is the same as the text-align, the latter is the direction, the writing order is unchanged

<p style= "direction:rtl;text-align:initial;" >1 2 3 4 5 6. </p><p style= "text-align:right;" >1 2 3 4 5 6. </p>

Unicode-bidi

Seems to have direction can cope with the writing direction of the problem, what is Unicode-bidi to do?

Browsers usually determine the direction of writing based on the lang attribute or special font-family, but if you include a text in two directions in a sentence, you need to use the Unicode-bidi attribute.

Unicode-bidi has three widely supported values

What is the order in which the normal is originally used?

Embed acts on the inline element, the value of the direction property specifies the embedding layer, and an implicit reordering within the object

Bidi-override is reordered strictly by the value of the direction property. Ignore implicit bidirectional arithmetic rules

To tell the truth, I can't read the explanation, see an example.

<p style= "direction:rtl;text-align:initial;" >this is a test</p><p style= "direction:rtl;unicode-bidi:bidi-override;text-align:initial;" > This is    a test</p><p style= "direction:rtl;unicode-bidi:bidi-override;text-align:initial;" > This    <span style= "unicode-bidi:embed;" >is a</span> test</p>

The first line is simple right-aligned, the text will not be written backwards (Arabic will, explained later)

The second row of two properties combined, not only right to the left to write and really from right to left to write, this is a serious Arabic wording

The effect of the third line is wonderful in that the second line is based on the style unicode-bidi:embed; it's not written backwards, it's written in the normal writing order.

Why the Arabic only set direction can be displayed correctly, but the English word only the right alignment effect, not from right to left to write, only set the Unicode-bidi:bidi-override;

This is related to the specific language, for the Arabic and Hebrew language automatically, a single number, the letter browser can not judge the language with RTL default settings, English, etc. or use the default left-to-right way, can only be rewritten with Unicode-bidi

Specifies the language for the Arabic page to be automatically written in the order RTL when declaring

Direction is to express the direction of writing, and Writing-mode are different functions, each has a length, can be used in combination.