Text Orientation

CSS offers properties to control the orientation of text within its container.

writing-mode:

Specifies the direction in which lines of text are laid out in a block container.

vertical-lr: Text is laid out vertically, from left to right.
vertical-rl: Text is laid out vertically, from right to left.
horizontal-tb: Default value. Text is laid out horizontally, from top to bottom.

Example:

.span-vertical-text-lr {
  writing-mode: vertical-lr;
}

.span-vertical-text-rl {
  writing-mode: vertical-rl;
}

.span-horizontal-text-tb {
  writing-mode: horizontal-tb;
}

text-orientation:

Specifies the orientation of the text characters in a line.

Example:

span{
  text-orientation: mixed; // other options: upright, sideways;
}

mixed: Default value. Text is oriented upright for Latin characters and rotated for ideographic characters (East Asian characters).
upright: Text characters are upright, regardless of script type.
sideways: Text characters are rotated 90 degrees counterclockwise.

direction:

Example:

span {
  direction: rtl;
}

Specifies the direction of text display.

ltr: Default value. Text is displayed from left to right.
rtl: Text is displayed from right to left.

<-- Text & Box Shadow

Text Orientation

CSS offers properties to control the orientation of text within its container.

writing-mode:

Specifies the direction in which lines of text are laid out in a block container.

vertical-lr: Text is laid out vertically, from left to right.
vertical-rl: Text is laid out vertically, from right to left.
horizontal-tb: Default value. Text is laid out horizontally, from top to bottom.

Example:

.span-vertical-text-lr {
  writing-mode: vertical-lr;
}

.span-vertical-text-rl {
  writing-mode: vertical-rl;
}

.span-horizontal-text-tb {
  writing-mode: horizontal-tb;
}

text-orientation:

Specifies the orientation of the text characters in a line.

Example:

span{
  text-orientation: mixed; // other options: upright, sideways;
}

mixed: Default value. Text is oriented upright for Latin characters and rotated for ideographic characters (East Asian characters).
upright: Text characters are upright, regardless of script type.
sideways: Text characters are rotated 90 degrees counterclockwise.

direction:

Example:

span {
  direction: rtl;
}

Specifies the direction of text display.

ltr: Default value. Text is displayed from left to right.
rtl: Text is displayed from right to left.

<-- Text & Box Shadow