ContextQMD
Back to Content

text-orientation

files/en-us/web/css/reference/properties/text-orientation/index.md

latest2.9 KB
Original Source

The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when {{cssxref("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.

{{InteractiveExample("CSS Demo: text-orientation")}}

css
writing-mode: vertical-rl;
text-orientation: mixed;
css
writing-mode: vertical-rl;
text-orientation: upright;
html
<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

css
/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: revert;
text-orientation: revert-layer;
text-orientation: unset;

The text-orientation property is specified as a single keyword from the list below.

Values

  • mixed
    • : Rotates the characters of horizontal scripts 90° clockwise. Lays out the characters of vertical scripts naturally. Default value.
  • upright
    • : Lays out the characters of horizontal scripts naturally (upright), as well as the glyphs for vertical scripts. Note that this keyword causes all characters to be considered as left-to-right: the used value of {{cssxref("direction")}} is forced to be ltr.
  • sideways
    • : Causes characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise.
  • sideways-right
    • : An alias to sideways that is kept for compatibility purposes.
  • use-glyph-orientation
    • : On SVG elements, this keyword leads to use the value of the deprecated SVG properties glyph-orientation-vertical and glyph-orientation-horizontal.

Formal definition

{{CSSInfo}}

Formal syntax

{{csssyntax}}

Examples

HTML

html
<p>Lorem ipsum dolet semper quisquam.</p>

CSS

css
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Result

{{EmbedLiveSample('Examples')}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also