CSS Writing Modes Level 4

https://www.w3.org/TR/css-writing-modes-4/
Admin
CSS Writing Modes Level 4 defines CSS support for various writing modes and their combinations,...
Tokens:17,599
Snippets:147
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Combining when sequence is not interrupted

Source: https://www.w3.org/TR/css-writing-modes-4

Markup examples where the 34 combines because the preceding 12 does not share an ancestor with the same text-combine-upright value.

```html
12<tcy><span>34</span></tcy>12<tcy><span></span>34</tcy>
12<tcy>34<span></span></tcy>
```

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

### XML example with bidirectional text

Source: https://www.w3.org/TR/css-writing-modes-4

Shows an XML document with bidirectional text using dir attributes. Lowercase letters represent inherently left-to-right characters and uppercase letters represent inherently right-to-left characters. The text stream is shown in logical backing store order.

```xml
<section dir=rtl>
  <para>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</para>
  <para>HEBREW6 <emphasis>HEBREW7</emphasis> HEBREW8</para>
</section>
<section dir=ltr>
  <para>english9 english10 english11 HEBREW12 HEBREW13</para>
  <para>english14 english15 english16</para>
  <para>english17 <quote dir=rtl>HEBREW18 english19 HEBREW20</quote></para>
</section>
```

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

### Mis-applied tate-chu-yoko example

Source: https://www.w3.org/TR/css-writing-modes-4

Markup showing unintended consequences when text-combine-upright: digits 2 is applied to an entire document, combining digits across a comma.

```html
<p>あれは10,000円ですよ！</p>
```

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

### text-combine-upright: all rule

Source: https://www.w3.org/TR/css-writing-modes-4

CSS rule using text-combine-upright: all; the same results occur as with digits 4: the first case does not combine, the second combines 34.

```css
tcy { text-combine-upright: all; }
```

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

### text-combine-upright: digits 4 with box boundary

Source: https://www.w3.org/TR/css-writing-modes-4

CSS rule and markup showing that text-combine-upright cannot combine across box boundaries; here no text combines because 12 and 34 share an ancestor with the same value.

```css
tcy { text-combine-upright: digits 4; }
```

```html
<tcy>12<span>34</span></tcy>
```

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

### text-combine-upright: digits 2 for date

Source: https://www.w3.org/TR/css-writing-modes-4

CSS rule and markup for horizontal-in-vertical composition (tate-chu-yoko) of a date. The digits 2 value combines up to two consecutive ASCII digits into a single upright glyph.

```css
date { text-combine-upright: digits 2; }
```

```html
<date>平成20年4月16日に</date>
```
Tokens:
Raw