CSS Writing Modes

Introduction

Some concepts in CSS Flexible Box Layout are further elaborated.

• Origin
• My GitHub

Introduction

The CSS function defined by CSS Writing Modes is to support various international writing modes, such as Latin and Hindi from left to right, Hebrew and Arabic from right to left, and bidirectional mixing of Latin and Arabic Language and vertical Asian scripts.

In CSS, writing mode (writing mode) is determined by writing-mode , direction , text-orientation attributes. It is mainly inline base direction according to its 060e8ff32a1ef0 (inline basic direction) and block flow direction (block flow direction).

inline base direction is the main direction for sorting content in a row, and defines which side of a row is the "start" and which side is the "end". direction attribute specifies the basic inline direction of a box, and the unicode-bidi attribute and the inherent direction of the text content together determine the order of the inline content in a line.

block flow direction is the direction in which the block-level box is placed, and it is also the direction in which the block-level container is placed. The writing-mode attribute determines the direction of the block flow.

horizontal writing mode (horizontal writing mode) is a mode with horizontal text lines. vertical writing mode is a mode with vertical text lines.

Writing systems usually have one or two local writing modes. Here are some examples:

• Latin-based systems usually write in a left-to-right inline direction, with a downward (top-to-bottom) block flow direction.
• Arabic-based systems usually write in a right-to-left inline direction, with a downward (top-to-bottom) block flow direction.
• Mongolian-based systems are usually written in a top-to-bottom inline direction and a right-to-right (left-to-right) block flow direction.
• Chinese character-based systems usually use left-to-right inline direction writing, with a downward (top-to-bottom) block flow direction, or top-to-bottom inline direction, with leftward (right to left) The direction of the block flow. Many magazines and newspapers mix these two writing modes on the same page.

the term

CSS 2.1 defines the layout mode of the box in detail, but only applies to the writing mode of the block flow direction from top to bottom. The direction and dimension terms in CSS 2.1 must be abstracted and remapped appropriately.

There are three sets of directional terms in CSS:

• physical: Relative to page interpretation, independent of writing mode. The physical direction is left, right, top, bottom.
• flow-relative (relative to flow): Interpretation relative to content flow. If the dimensions are not clear, the directions of flow-relative are start, end, block-start, block-end, inline-start, inline-end.
• line-relative (relative to the line): Interpretation relative to the direction of the line box. The directions of flow-relative are line-left, line-right, line-over, and line-under.

The physical dimensions are width and height, which correspond to measurements along the x-axis (horizontal dimension) and y-axis (vertical dimension), respectively. The abstract dimension flow-relative and line-relative , so there is only one set of these terms.

Abstract dimension

• block dimension: The vertical and inline text flow dimensions.
• inline dimension: the dimension parallel to the inline text flow.
• block axis: the axis in the block dimension, such as the vertical y axis in horizontal writing mode.
• inline axis: the axis of inline dimensions, such as the horizontal x-axis in horizontal writing mode.
• block size: refers to the physical height in the horizontal writing mode, and refers to the physical width in the vertical writing mode.
• inline size: In horizontal writing mode, it refers to the physical width, and in vertical writing mode, it refers to the physical height.

flow-relative direction

The flow-relative direction is defined relative to the flow of page content. Their definitions are as follows:

• block-start: The side that appeared earlier block flow direction The writing-mode properties determined: attribute value horizontal-tb physical top, when the attribute value vertical-rl physically to the right when the value of the attribute vertical-lr physically at the left.
• block-end: The side opposite block
• inline-start: The side where the text starts inline base direction For direction: ltr , it is one side of line-left For direction: rtl , it is one side of line-right
• line-end: The side opposite line-start

It should be noted that the box’s block-start and block-end are only determined by writing-mode , and the box’s inline-start and inline-end not only depend on writing-mode , but also on the direction attribute.

line-relative direction

The line orientation determines which side of the line box is logically "top".

• over or line-over: The nominal rising side or the "top" of the line box.
• under or line-under: the opposite of over
• line-left: The "left" side of the line box, nominally the side where the LTR text will start.
• line-right: The "right" side of the line box, nominally the side where the RTL text will start.

Abstract and physical mapping

Attributes

direction

Property name: direction

Possible values: ltr | rlt

Default value: ltr

Applicable to: all elements

Inheritable: Yes

direction specifies the basic direction of the box inline.

• ltr: This value sets the basic inline direction from line-left to line-right .
• rtl: This value sets the basic inline direction from line-right to line-left .

writing-mode

Property name: writing-mode

Possible values: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Default value: horizontal-tb

Applicable to: all elements, except table row groups, table column groups, table rows, table columns, ruby base container, ruby annotation container

Inheritable: Yes

writing-mode specifies whether the text line is placed horizontally or vertically, and the direction in which the block progresses.

• horizontal-tb: The direction of block flow from top to bottom. Both writing mode and printing mode are horizontal.
• vertical-rl: The direction of block flow from right to left. Both the writing mode and the printing mode are vertical.
• vertical-lr: the direction of block flow from left to right. Both the writing mode and the printing mode are vertical.
• sideways-rl: The direction of block flow from right to left. The writing mode is vertical. Printing mode level.
• sideways-lr: The direction of block flow from left to right. The writing mode is vertical. Printing mode level.

Reference

• CSS Writing Modes Level 4