Graphic CSS (6): Text-text format

Line-train-spacingletter-spacingtext-plain-indentwhite-spaceword-wrapword-breaktext-plain-bidiwriting-modetext-decorationtext-underline-positiontext-plain-flowlayout-gridlayout-grid- modelayout-grid-typelayout-grid-linelayout-grid-charlayout-grid-Char-spacing obsolete or test failure: text-shadowtext-autospacetext-kashida-space
 

Line-height (Row Height): normal (default), value, or percentage.

Word-Spacing: normal (default), value, or percentage.

Letter-Spacing: normal (default), numeric.

Text-align: Left (default), right, center, and justify ).

Vertical-align (vertical align ):
Baseline, top, text-top, bottom, text-bottom, middle, sub (subscript), super (superscript), value or percentage.

Baseline alignment is default:

The difference between top and text-top is not displayed:

Bottom and text-bottom should be similar, but bottom seems to be wrong:

Middle, sub, super:

You can also use values or percentages:

Text-indent ):

White-space: normal (default), pre (invalid in IE), and nowrap (natural line feed prohibited ).

Word-wrap: normal (default), break-word (line feed Based on the boundary ).

Word-Break (control word line feed ):
Normal (default, line feed is considered English word boundary ),
Break-All (regardless of the word boundary, line feed Based on the container size ),
Keep-all ).

Text-transform (case-sensitive control): none (default), capitalize (uppercase), uppercase (all uppercase), and lowercase (all lowercase ).

Direction (LTr, RTL) and Unicode-bidi (normal, bidi-override, embed)

Writing-mode: LR-TB (default), Tb-rl.

Text-Decoration: None, underline, overline, line-through, and blink ).

Text-underline-position: above, auto, auto-pos, and below.
The reason why text-underline-position exists is that the line drawn by text-decoration can be customized, but it is basically unavailable now.
Only text-Decoration: underline; the specified underline can be obtained.

Text-justify: auto, inter-word, inter-ideograph, newspaper, distribute, distribute-all-lines.

This is more control on the alignment of the two sides of the text. You must first: Text-align: justify;

We don't see the differences between auto, inter-word, and inter-ideograph. They all look like the default effect:

Newspaper:

Distribute:

Distribute-all-lines:

: First-letter (define a style for the first letter separately)

: First-line (define a style for the first line separately)

Layout-flow: horizontal, vertical-ideographic;

Layout-grid-mode: Both, line, Char, none;
Layout-grid-type: loose, strict, and fixed;
Layout-grid-line: None, auto, length;
Layout-grid-CHAR: None, auto, length;
Layout-grid-Char-Spacing: auto, length;

The following sequence is set using Layout-grid:
Layout-grid-mode, layout-grid-type, layout-grid-line, layout-grid-Char, and layout-grid-Char-spacing.