CSS text orientation

xCatalog [1]text-align [2]writing-mode] [3]dir[4]direction[5]unicode-bidi front words

In general, the normal page text direction is from top to bottom, from left to right. In fact, there are several properties that set the text direction, which is described in more detail in the text-align,htmL Global property has a "dir" attribute that is specifically used to set the text direction, the CSS style to set the text direction has direction , Unicode-bidi and Writing-mode. This article will detail how to set the page text orientation

text-align

The horizontal alignment implementation affects the horizontal alignment of the text in an element, and details about Text-align

Value: Left | Center | Right | Justify | Inherit

Initial value: Left

Applies To: block-level elements (including block and Inline-block)

Inheritance: There are

// Left:1 456 // Right:1 456

Writing-mode

Writing-mode was originally a private property of IE, the original attribute was LR-TB (left-right, top-down) and TB-RL (top-down, right-left). Where WRITING-MODE:TB-RL is often used to trigger haslayout. However, when the Writing-mode attribute is normalized, the value of the property has changed.

Value: HORIZONTAL-TB | VERTICAL-RL | Vertical-lr

Initial value: HORIZONTAL-TB

Applies to: All elements except the table class element

Inheritance: There are

[Note]safari and mobile iOS and Android need to add-webkit-prefix; IE browser only supports its own private property values

[note] When setting Writing-mode, the Text-align property fails

Dir

Dir is the global property of HTML and is specifically used to set the direction of the text

Value: Ltr | RTL | Auto

// Ltr:1 456 // rtl:456 1

Direction

Direction is a CSS style that sets the direction of text

Value: Ltr | RTL | Inherit

Initial value: LTR

Applies to: all elements

Inheritance: There are

[note] to make the direction style work on inline elements, you need to unicode-bidi the relevant settings of the style

[note] When setting the direction style, the global property of the HTML element dir is invalid

LTR: Left-to-right RTL: right-to-left

// Ltr:1 456 // rtl:456 1

Unicode-bidi

Unicode-bidi is a more robust way of handling text direction

Value: Normal | Embed | Bidi-override | Isolate | Isolate-override | plaintext | Inherit

Initial value: Normal

Applies to: all elements

Inheritance: None

[Note that there is a problem with the]unicode-bidi property applied to the Flex box model, unless the scaling container contains only one anonymous scaling item, the rest of the case is not valid

[Note that]isolate, isolate-override, plaintext are experimental attribute values, with little browser support

//Display:inline-block/blockNormal/embed:456  at 1Bidi-Override:654  + 1//Display:inlineNormal1  at 456Embed:456  at 1Bidi-Override:654  + 1

[note] The Unicode-bidi property only works if Dir is RTL or direction is RTL

CSS text orientation