CSS writing-mode

The CSS writing-mode property is used to lay the text horizontally or vertically, along with the direction. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{writing-mode: vertical-lr;}
   </style>
</head>
<body>
   
   <p>This is an example of writing-mode property.</p>

</body>
</html>

Output

This is an example of writing-mode property.

CSS writing-mode Syntax

The syntax of writing-mode property in CSS, is:

writing-mode: x;

The value of x should be any of the following:

vertical-lr - used to lay the text vertically. The flow of text is from top to bottom vertically, and from left to right horizontally
vertical-rl - used to lay the text vertically. The flow of text is from top to bottom vertically, and from right to left horizontally
horizontal-tb - used to lay the text horizontally. The flow of text is from left to right horizontally, and from top to bottom vertically
sideways-lr - used to flow the content vertically from top to bottom, if the script is ltr, from bottom to top, if the script is rtl
sideways-rl - used to flow the content vertically from bottom to top, if the script is ltr, from top to bottom, if the script is rtl

CSS Online Test

« Previous Tutorial Next Tutorial »