CSS Writing Modes | CSS Features

`direction`

Property Baseline: widely availablesince July 2022 Modern CSS: Vertical form controls

MDN The direction CSS property sets the direction of text, table and grid columns, and horizontal overflow. Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages).

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  width: 80%;
  max-height: 300px;
  display: flex;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex: 1;
}

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</section>

Syntax

ltr | rtl

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: ltr
Applies to: all elements
Inherited: yes
Percentages: n/a
Computed value: specified value
Canonical order: n/a
Animation type: not animatable

Browser support

First browser version supporting direction
Chrome	2
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`glyph-orientation-vertical`

Property Deprecated

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

auto | 0deg | 90deg | 0 | 90

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: n/a
Applies to: n/a
Inherited: n/a
Percentages: n/a
Computed value: n/a
Canonical order: n/a
Animation type: n/a

Browser support

First browser version supporting glyph-orientation-vertical
Chrome	No
Edge	No
Firefox	No
Safari	4
Chrome Android	No
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Specification ↗

`text-combine-upright`

Property Baseline: widely availablesince September 2024

MDN The text-combine-upright CSS property sets the combination of characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the contents within 1em. The resulting composition is treated as a single upright glyph for layout and decoration. This property only has an effect in vertical writing modes.

Live preview Example from MDN

p {
  writing-mode: vertical-rl;
}

<section class="default-example" id="default-example">
  <div>
    <p>
      <span class="transition-all" id="example-element"
        >2022<span>年</span>12<span>月</span>8</span
      >日から楽しい
    </p>
  </div>
</section>

Syntax

none | all | [ digits <integer [2,4]>? ]

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: inline boxes and text
Inherited: yes
Percentages: n/a
Computed value: specified keyword, plus integer if digits
Canonical order: n/a
Animation type: not animatable

Browser support

First browser version supporting text-combine-upright
Chrome	48
Edge	79
Firefox	48
Safari	15.4
Chrome Android	48
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`text-orientation`

Property Baseline: widely availablesince March 2023

MDN The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.

Live preview Example from MDN

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <p>
      In another moment down went Alice after it, never once considering how in
      the world she was to get out again.
    </p>
  </div>
</section>

Syntax

mixed | upright | sideways

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: mixed
Applies to: all elements except table row groups, rows, column groups, and columns; and text
Inherited: yes
Percentages: n/a
Computed value: specified value
Canonical order: n/a
Animation type: not animatable

Browser support

First browser version supporting text-orientation
Chrome	48
Edge	79
Firefox	41
Safari	14
Chrome Android	48
Safari iOS	14

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`unicode-bidi`

Property Baseline: widely availablesince July 2022

MDN The unicode-bidi CSS property, together with the direction property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The unicode-bidi property overrides this algorithm and allows the developer to control the text embedding.

Live preview Example from MDN

<section class="default-example" id="default-example">
  <p class="transition-all" id="example-element">
    בְּרֵאשִׁ֖ית בָּרָ֣א אֱלֹהִ֑ים אֵ֥ת הַשָּׁמַ֖יִם וְאֵ֥ת הָאָֽרֶץ.
  </p>
</section>

Syntax

normal | embed | isolate | bidi-override | isolate-override | plaintext

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: normal
Applies to: all elements, but see prose
Inherited: no
Percentages: n/a
Computed value: specified value
Canonical order: per grammar
Animation type: not animatable

Browser support

First browser version supporting unicode-bidi
Chrome	2
Edge	12
Firefox	1
Safari	1.3
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`writing-mode`

Property Baseline: widely availablesince September 2019 Modern CSS: Vertical form controls

MDN The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which text flows.

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  width: 80%;
  max-height: 300px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
}

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</section>

Syntax

horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: horizontal-tb
Applies to: All elements except table row groups, table column groups, table rows, table columns, ruby base containers, ruby annotation containers
Inherited: yes
Percentages: n/a
Computed value: specified value
Canonical order: n/a
Animation type: not animatable

Browser support

First browser version supporting writing-mode
Chrome	48
Edge	12
Firefox	41
Safari	10.1
Chrome Android	48
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

Each feature in detail

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support