CSS Text Module Level 3

https://www.w3.org/TR/css-text-3/
Admin
CSS Text Module Level 3 defines CSS properties for text manipulation and typesetting, covering line...
Tokens:26,903
Snippets:178
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Example: unicode-bidi: plaintext with mixed LTR/RTL lines

Source: https://www.w3.org/TR/css-text-3

Shows a preformatted block with unicode-bidi: plaintext, where every other line is right-aligned because the line box's inline base direction follows the strong directionality of each line.

```html
<block style="unicode-bidi: plaintext">
français
فارسی
français
فارسی
français
فارسی
</block>
```

--------------------------------

### Ruby annotation example with small kana

Source: https://www.w3.org/TR/css-text-3

Example source showing a ruby annotation with small kana. Applying text-transform: full-size-kana would change the reading from 'じゅう' (jū, meaning 'ten') to 'じゆう' (jiyū, meaning 'liberty').

```html
<ruby>十<rt>じゅう</ruby>
```

--------------------------------

### Example: unicode-bidi: plaintext with neutral characters

Source: https://www.w3.org/TR/css-text-3

Demonstrates that neutral characters and isolated runs are skipped when finding the inline base direction, so the line box becomes left-to-right (left-aligned) based on the first strong character 'h'.

```html
<para style="display: block; direction: rtl; unicode-bidi:plaintext">
“<quote style="unicode-bidi:plaintext">שלום!</quote>”, they said.
</para>
```

--------------------------------

### Example: unicode-bidi: plaintext in a textarea

Source: https://www.w3.org/TR/css-text-3

Shows that with unicode-bidi: plaintext, the text 'Hello!' is typeset LTR and left-aligned, ignoring the containing block's RTL direction. The empty line following it is also LTR, while the empty first line assumes the RTL direction of its containing block.

```html
<textarea style="direction: rtl; unicode-bidi:plaintext">

Hello!

</textarea>
```

--------------------------------

### CSS word-break values for the heading example

Source: https://www.w3.org/TR/css-text-3

Two CSS declarations that control whether the heading wraps at the <wbr> point. With word-break: normal, wrapping can occur at syllable boundaries; with keep-all, wrapping is suppressed except at the marked point.

```css
h1 { word-break: normal }
```

```css
h1 { word-break: keep-all }
```

--------------------------------

### CSS hanging-punctuation: allow-end vs force-end

Source: https://www.w3.org/TR/css-text-3

Two CSS examples showing the difference between allow-end and force-end for hanging punctuation. With allow-end, punctuation at the end of a line only hangs if it does not fit; with force-end, it is forced to hang. The justification measures the line without the hanging punctuation, so when the line is expanded, the punctuation is pushed outside the line.

```css
p {
  text-align: justify;
  hanging-punctuation: allow-end;
}

```

```css
p {
  text-align: justify;
  hanging-punctuation: force-end;
}

```

--------------------------------

### Expected renderings for word-break normal and keep-all

Source: https://www.w3.org/TR/css-text-3

Expected renderings of the heading with word-break: normal (first) and word-break: keep-all (second). The first breaks at a syllable boundary; the second breaks only at the <wbr> point.

```text
窓ぎわのトットちゃ
ん
```

```text
窓ぎわの
トットちゃん
```

--------------------------------

### letter-spacing: 1em on a simple paragraph

Source: https://www.w3.org/TR/css-text-3

Shows that letter-spacing adds half the specified spacing on each side of every letter, but no spacing is added at the start or end of a line. The rendered output shows the letters spaced apart with no leading or trailing space.

```css
p { letter-spacing: 1em; }
```

```html
<p>abc</p>
```

--------------------------------

### Hanging spaces when they overflow on all lines

Source: https://www.w3.org/TR/css-text-3

Demonstrates that when there is not enough room on any line, end-of-line spaces hang on all lines: the one without a forced break must hang, and the one with a forced break conditionally hangs because it overflows. The CSS is identical to the previous example but the HTML has no leading space.

```css
p {
  white-space: pre-wrap;
  width: 3ch;
  border: solid 1px;
  font-family: monospace;
}

```

```html
<p>0 0 0 0 </p>

```

--------------------------------

### HTML heading with <wbr> for controlled wrapping

Source: https://www.w3.org/TR/css-text-3

Markup that allows wrapping only at the <wbr> point. Depending on the word-break property, the heading can render with a break after the <wbr> (keep-all) or at the syllable boundary (normal).

```html
<h1>窓ぎわの<wbr>トットちゃん</h1>
```

--------------------------------

### text-transform: full-width for Japanese abbreviations

Source: https://www.w3.org/TR/css-text-3

Converts ASCII characters in Japanese abbreviations to full-width variants so they lay out and line break like ideographs.

```css
abbr:lang(ja) { text-transform: full-width; }
```
Tokens:
Raw