CSS - text-orientation Property

The text-orientation property specifies the orientation of text characters in a line.

This property only has an effect in vertical writing modes. This property basically can be used for vertical writing such as in Japanese, chinese languages, and also for making vertical table headers.

Possible 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.

  • 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.

Applies to

All the HTML elements except table row groups, rows, column groups, and columns.

DOM Syntax

object.style.textOrientation =  mixed | upright | sideways ;

CSS text-orientation - Basic Example

Following is the example which demonstrates how to use text-orientation property:

<html>
<head>
<style>
   p {
      writing-mode: vertical-rl;
      text-orientation: upright;
   }
</style>
</head>
<body>
   <h2>Text Orientation</h2>
   <p>welcome to tutorialspoint</p>
</body>
</html>
Advertisements