primers

Some concepts in CSS Flexible Box Layout are further elaborated.

introduce

CSS Writing Modes define THE CSS functionality to support various international Writing Modes, such as left-to-right Latin and Hindi, right-to-left Hebrew and Arabic, bi-directional hybrid Latin and Arabic and vertical Asian scripts.

In CSS, the writing mode is determined by the writing-mode, direction, and text-orientation attributes. It is defined primarily by its inline base direction and block flow direction.

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

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

Horizontal writing mode is a mode 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 write in left-to-right inline directions, with down-down (top-to-bottom) block-flow directions.
  • Arabic-based systems typically write in an inline direction from right to left, with a down (top to bottom) block flow direction.
  • Mongolian based systems are typically written with a top to bottom inline direction and a right (left to right) block flow direction.
  • Kanji based systems typically use left-to-right inline directions for writing, with a down (top to bottom) block flow direction, or top to bottom inline directions with a left (right to left) block flow direction. Many magazines and newspapers mix the two modes of writing on the same page.

The term

CSS 2.1 defines the layout of boxes in detail, but only for top-down block flow writing. Direction and dimension terms in CSS 2.1 must be abstracted and remapped appropriately.

There are three sets of directional terms in CSS:

  • Physical: Independent of writing mode relative to page interpretation. The physical direction is left, right, top, bottom.
  • Flow-relative: relative to content flow interpretation. If the dimension is also unclear, the flow-relative directions are start, end, block-start, block-end, inline-start, and inline-end.
  • Line-relative: explains the direction relative to the line box. The flow-relative direction is line-left, line-right, line-over, 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: The dimension perpendicular to the inline text stream.
  • Inline Dimension: The 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: Indicates the physical height in horizontal writing mode and the physical width in vertical writing mode.
  • Inline size: In horizontal writing mode refers to the physical width, in vertical writing mode refers to the physical height.

The flow – relative direction

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

  • Block – start: inblock flow directionOn the earlier side of the. bywriting-modeAttribute decision: The attribute value ishorizontal-tbIs the physical top of, and the property value isvertical-rlTo the physical right of, the property value isvertical-lrTo the left of physics.
  • Block – end: andblockThe opposite side.
  • The inline – start: ininline base directionAt the beginning of the text. For using thedirection: ltrThe box isline-leftIn the side. For using thedirection: rtlThe box isline-rightIn the side.
  • The line – end: andline-startThe opposite side.

Note that block-start and block-end of a box are determined only by writing-mode. Inline-start and inline-end of a box depend not only on writing-mode but also on the direction attribute.

The line – relative direction

Line orientation determines which side of the line frame is the logical “top”.

  • Over or line-over: the nominal “top” of the rising side or line box.
  • Under or line-underoverOn the contrary.
  • Line-left: The “left” side of the line box, nominally the side where the LTR text will begin.
  • Line-right: The “right” side of the line box, nominally the side where the RTL text will start.

Mapping between abstraction and physics

attribute

direction

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

Direction Specifies the inline base 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, In addition to table row groups, Table Column groups, Table Rows, Table Columns, Ruby Base Container, Ruby Annotation Container is

Writing-mode specifies whether lines of text are placed horizontally or vertically and the direction of block progression.

  • Horizontal-tb: indicates the block flow direction from top to bottom. Both writing and printing patterns are horizontal.
  • Vertical-rl: indicates the block flow direction from right to left. The writing mode and the printing mode are perpendicular.
  • Vertical-lr: indicates the block flow direction from left to right. The writing mode and the printing mode are perpendicular.
  • Sideways -rl: indicates the direction of the block flow from right to left. Writing is vertical. Print mode level.
  • Sideways -lr: indicates the block flow direction from left to right. Writing is vertical. Print mode level.

The resources

  • CSS Writing Modes Level 4
more

A long time ago for free to receive the game, after playing feel pretty good. The DLC story explains some of the weird things in the script.