CSS text direction, css text

CSS text direction, css text
× Contents [1] text-align [2] writing-mode [3] dir [4] direction [5] Before unicode-bidi

Generally, the normal webpage text direction is from top to bottom, from left to right. In fact, there are multiple attributes for setting the text direction. We have already introduced the text-align in detail. The "dir" attribute in the global attribute of HTML is specifically used to set the text direction, CSS styles set in the text direction include ction, unicode-bidi, and writing-mode. This article describes how to set the webpage text direction in detail.

 

Text-align

Horizontal alignment affects the horizontal alignment of text in an element.

Value: left | center | right | justify | inherit

Initial Value: left

Applied to: block-level elements (including block and inline-block)

Inheritance: Yes

//left: 1 23 456//right: 1 23 456

 

Writing-mode

Writing-mode is originally a private attribute of IE. The original attributes are lr-tb (left-right, top-bottom) and tb-rl (top-bottom, right-left ). Writing-mode: tb-rl is often used to trigger haslayout. However, after W3C standardizes the writing-mode attribute, its attribute value also changes.

Value: horizontal-tb | vertical-rl | vertical-lr

Initial Value: horizontal-tb

Applies to: All elements except table-class Elements

Inheritance: Yes

[Note] the-webkit-prefix must be added for safari and mobile IOS and android. ie supports only its own private attribute values.

[Note] When writing-mode is set, the text-align attribute is invalid.

 

Dir

Dir is the global attribute of HTML and is used to set the direction of text.

Value: ltr | rtl | auto

//ltr: 1 23 456//rtl: 456 23 1

 

Direction

Direction is the CSS style for setting the text direction.

Value: ltr | rtl | inherit

Initial Value: ltr

Apply to: All elements

Inheritance: Yes

[Note] to enable the direction style to work on the inline element, you must set the unicode-bidi style.

[Note] when setting the ction style, the global attribute dir of the HTML element is invalid.

Ltr: left to right rtl: right to left)

//ltr: 1 23 456//rtl: 456 23 1

 

Unicode-bidi

Unicode-bidi is a more robust way to process text.

Value: normal | embed | bidi-override | isolate-override | plaintext | inherit

Initial Value: normal

Apply to: All elements

Inheritance: None

[Note] the unicode-bidi attribute is incorrect when applied to the flex elastic box model, unless the scaling container is valid when only one anonymous scaling project is included, it is invalid in other cases.

[Note] isolate, isolate-override, and plaintext are lab attribute values, which are almost not supported by browsers.

//display:inline-block/blocknormal/embed: 456 23 1bidi-override: 654 32 1//display:inlinenormal:1 23 456embed: 456 23 1bidi-override: 654 32 1

[Note] the unicode-bidi attribute takes effect only when dir is rtl or direction is rtl.