# introduction

CSS Writing Modes is designed to support 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 texts.

The CSS writing mode is determined by inline Base direction and block flow direction.

  • inline base directionIt refers to the direction in which the text is written, horizontally or vertically.
  • block flow directionRefers to the stacking direction of blocks (rows). Rows are arranged from top to bottom, left to right, or right to left.

The figure shows the pattern of writing in Latin, with lines written horizontally and from top to bottom.

The figure shows the Mongolian writing pattern, with vertical writing within the lines and lines arranged from left to right.

The figure shows the two writing patterns of the Chinese language family. Modern Chinese is written from left to right in the line, and the lines are arranged from top to bottom. The writing pattern of ancient Chinese is vertical writing inside the line, and the lines are arranged from right to left.

The writing mode in CSS is determined by the writing-mode,direction, and text-orientation attributes. Each of these attributes is described below.

Writing model # | writing – mode

The writing-modecss property defines whether lines of text are laid out horizontally or vertically and the direction of block extension.

Writing – mode horizontal values – TB | vertical – rl | vertical – lr

  • horizontal-tbContent flows vertically from left to right horizontally from top to bottom.
  • vertical-rlContent flows vertically from top to bottom and horizontally from right to left.
  • vertical-lrContent flows vertically from top to bottom and horizontally from left to right.

| # direction direction

The direction attribute specifies the inline block display:inline-block order.

Direction attribute values LTR | RTL

  • LTR – Inline elements are arranged from left to right, such as before and after images, with the first DOM displayed on the left.
  • RTL – The inline content is arranged from right to left, for example, before and after images, with the DOM first displayed on the right.

# text direction | text – orientation

Defines the orientation of text characters in a line. This property only in the vertical mode (writing – mode: vertical – rl | vertical – lr) effectively.

Text – orientation attribute values mixed | upright | sideways

  • mixedRotate the characters of the horizontal script by 90°.
  • uprightCharacters that naturally represent horizontal (vertical) scripts and glyphs for vertical scripts.
  • sideways— Arrange characters horizontally,

Landscape combination | # text text – combine – upright

Is to combine multiple characters into a single character space. If the combined text is wider than 1EM, the user agent must adjust to the contents within 1EM. The resulting composition is treated as a single upright glyph for layout and decoration. This property is valid only in vertical mode.

Text – combine – upright value none | | all [who < integer >?]

  • noneB: No special treatment.
  • allTry to type all consecutive characters in a horizontal box so that they occupy the space of a single character in a vertical line of the box.
  • digits <integer>?— Try to display a sequence of ASCII numbers (U + 0030-U + 0039). The number has the same or fewer characters as the specified integer, thus taking up space for a single character in the vertical box. If integers are omitted, the calculated value is at most 2. Integers outside the range are invalid. (This property is not compatible, only supported by IE)
Copy the code

# Example application

Qinyuan Spring snow vertical layout

  1. Set the writing mode to vertical, from right to left.
 writing-mode: vertical-rl;
Copy the code
  1. Show 1936 horizontally as one character.
.combine{
  text-combine-upright: all;
}
<span class="combine">1936</span>
Copy the code
  1. In vertical mode, letters or numbers are rotated 90 degrees to display them horizontally
.orientation{
  text-orientation: upright;
}
<span class="orientation">2</span>
Copy the code

IO /denghuijie/…

The direction attribute makes it easy to control the center button order

.button-group{
    direction: rtl;
    text-align: center;
}
<div class="button-group">
    <button>determine</button>
    <button>cancel</button>
</div>
Copy the code

# summary

This article introduces four properties of CSS typography

  • writing-modeDefines the direction in which the text inside the line is written, and the direction in which the lines are stacked. The valueshorizontal-tb| vertical-rl|vertical-lr
  • directionProperty specifies an inline blockdisplay:inline-blockThe order. The valuesltr|rtl
  • text-orientationDefines inline text in vertical modecharacterThe direction of the. The valuesmixed | upright | sideways
  • text-combine-uprightIn vertical mode, yesMultiple characters are combined into a single character space. The valuesnone | all | [ digits <integer>? ]

Reference links:

www.zhangxinxu.com/study/20160… Drafts.csswg.org/css-writing… Developer.mozilla.org/en-US/docs/…