A detailed description of the use and definition of CSS direction properties

CSS Direction property is simple and easy to remember, the property value is few, compatibility is good, the key time is saving effort, it is time to give publicity to everyone, do not bury the special skills of others.

Grammar:

direction:ltr | RTL | Inherit

Parameters:
LTR: Text flow from left to right
RTL: Text flow from right to left
Inherit: The value of the text stream is not inheritable

Description
Used to set the direction of the text flow.
If you want to apply the direction property to inline text, you must set the Unicode-bidi property to embed or bidi-override.
The corresponding script attribute is direction. Please refer to the other bibliography I have written.

Example:

div {direction:rtl; unicode-bidi:bidi-override;}

Basically, you just care about the following two attribute values:

direction:ltr;   Default value Direction:rtl;

wherein, the LTR is the initial value, represents Left-to-right, is from left to right meaning, and then the specific description, that is, inline content is from left to right in order to arrange, we usually web page processing is such, for example, before and after two pictures, by default, the DOM in front of the display on the left.

RTL is another value, right-to-left abbreviation, that is, from right to left meaning, and then specifically described below, that is, inline content is from right to left to arrange, add the application of this CSS declaration, then the front and back two pictures, by default, the DOM in front of the display on the right side, but also in the right side of the container.

For example, MM1 is a rhyme with the DOM structure as follows:

<p class= "RTL" > </p>

As a result, Zhang sister ran to the far right, not to the left, at the same time, seemingly right to align the container, as follows:

The change is just the left and right order of the inline element block
It is important to note that when the value of the direction property is RTL, the order of our text is unchanged, for example:

<p class= "RTL" ><span>span1</span> <span>span2</span></p>

As a result, still span1 on the left, span2 on the right:

Because the change is only inline element block of the left and right order, all the text, even if the use of inline tags separated, in fact, or a homogeneous inline box, is treated as a whole, so, only approximate to the correct alignment effect, and the specific text does not have the left and the next order of change.