primers

Some concepts in CSS Flexible Box Layout are further elaborated.

  • Origin
  • My GitHub

introduce

CSS Writing Modes are defined to support a variety of international Writing Modes, such as left-to-right Latin and Hindi, right-to-left Hebrew and Arabic, bi-directional mixed Latin and Arabic and vertical Asian scripts.

The writing mode in CSS is determined by the writing-mode, direction, and text-orientation attributes. It is defined in terms of its inline base direction and block flow direction.

Inline base direction is the main direction in which content is ordered on a line, and defines which side of the line is the ‘start’ and ‘end’. The direction attribute specifies the inline basic direction of a box and, together with the Unicode-bidi attribute and the inherent direction of the text content, determines the order of inline content in a line.

Block flow direction is the direction in which block-level boxes are placed, and also the direction in which block-level containers’ rows are placed. The writing-mode attribute determines the direction of the block flow.

Horizontal writing mode is a pattern with horizontal lines of text. Vertical Writing Mode is a mode with vertical lines of text.

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

  • Latin-based systems typically use left to right inline writing, with a downward (top to bottom) block flow direction.
  • Arabic-based systems typically use right-to-left inline writing, with a downward (up-down) block-flow direction.
  • Mongol based systems are usually written with a top to bottom inline direction and a right (left to right) block flow direction.
  • Kanji based systems typically use an inline writing direction from left to right, with a downward (top to bottom) block flow direction, or an inline writing direction from top to bottom, with a left (right to left) block flow direction. Many magazines and newspapers mix the two writing styles on the same page.

The term

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

There are three groups of directional terms in CSS:

  • Physical: Relative to page explanation, independent of writing mode. The physical directions are left, right, top, bottom.
  • Flow-relative: Explain relative to the content flow. If the dimension is not clear, the flow-relative direction is start, end, block-start, block-end, inline-start, inline-end.
  • Line – Relative: Explain 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. Abstract dimensions are the same in both flow-relative and line-relative, so there is only one set of these terms.

Abstract dimension

  • Block Dimension: Dimensions perpendicular to the inline text stream.
  • Inline Dimension: A dimension parallel to the inline text stream.
  • Block axis: The axis within the block dimension, such as the vertical Y-axis in horizontal writing mode.
  • Inline axis: The axis of an inline dimension, such as the horizontal X-axis in horizontal writing mode.
  • Block Size: The physical height in horizontal writing and the physical width in vertical writing.
  • Inline size: The physical width in horizontal writing mode and the physical height in vertical writing mode.

The flow – relative direction

A flow-relative direction is defined as the flow of content relative to the page. They are defined as follows:

  • Block – start: inblock flow directionThe upper side that appears earlier. bywriting-modeAttribute decision: Attribute value ishorizontal-tbIs, and the property value isvertical-rlIs, the property value isvertical-lrIs the physical left hand side of.
  • Block – end: andblockThe opposite side.
  • The inline – start: ininline base directionThe side at the beginning of the text. For using thedirection: ltrThe box, yesline-leftIn the side. For using thedirection: rtlThe box, yesline-rightIn the side.
  • The line – end: andline-startThe opposite side.

Note that the box’s block-start and block-end are determined only by the writing mode. The box’s inline-start and inline-end depend not only on the writing mode, but also on the direction property.

The line – relative direction

Line orientation determines which side of the line box is logically “top”.

  • Over or line-over: The nominally rising side or “top” of the line box.
  • It’s under or line-underoverOn the contrary.
  • Line-left: The “left” side of the line box, nominally the side on which LTR text will begin.
  • LINE-RIGHT: The “right” side of the line box, nominally the side on which RTL text will begin.

Mapping abstract to physical

attribute

direction

Property name: direction value: LTR | RLT default: LTR applies: all elements Inheritable: it is

Direction specifies the inline basic direction of the box.

  • LTR: This value sets the inline base direction toline-left 到 line-right.
  • RTL: This value sets the inline base direction toline-right 到 line-left.

writing-mode

Property name: writing – mode value: horizontal – TB | vertical – rl | vertical – lr | sideways – rl | sideways – lr default: horizontal – TB is applicable to: All the elements, Table Row Groups, Table Column Groups, Table Rows, Table Columns, Ruby Base Container, Ruby Annotation Container is

Writing-mode specifies whether lines of text should be placed horizontally or vertically and the direction in which blocks should progress.

  • Horizonal-TB: The direction of the block flow from top to bottom. Both writing mode and printing mode are horizontal.
  • Vertical – RL: The direction of the block flow from right to left. The writing mode is perpendicular to the printing mode.
  • Vertical-lr: The direction of the block flow from left to right. The writing mode is perpendicular to the printing mode.
  • Sideways – RL: The direction of the block flow from right to left. Writing mode is vertical. Printing mode level.
  • Sideways-lr: The direction of the block flow from left to right. Writing mode is vertical. Printing mode level.

The resources

  • CSS Writing Modes Level 4