CSS writing-mode property

Overview

The CSS property: writing mode decides the direction of the text written on a web page. Along with the direction of text, it also takes values for the direction of the text block. A text block defines how a sentence is read to be meaningful. A right-left text block with vertical direction signifies that each word comes vertically behind each other while sentence flow is from the right to left depending on the web page scripts. ##Supported values | Value | Definition | | — | —| | horizontal-tb | Depends on the script of the web page. The sentence flow is horizontal - next below the previous one | | vertical-rl | LTR scripts flow top to bottom and the sentence flow is left to the previous one. RTL scripts flow bottom to top. The next sentence is placed to the right of the previous sentence.| | vertical-lr | LTR scripts flow top to bottom with sentence flow right to the previous one. RTL scripts flow bottom to top while sentence flow is left to the previous one.| |sideways-rl| LTR scripts flow bottom to top vertically. RTL scripts flow top to bottom. The sentence flow remains towards the right in both. | |sideways-lr | LTR scripts flow top to bottom vertically. RTL scripts flow bottom to top vertically. The sentence flow remains towards the left in both.| ##CSS Syntax writing-mode : horizontal-tb;

Formal Definition

Specifications

CSS Writing Modes Level 4 # block-flow

Syntax

/* Keyword values */
 writing-mode: horizontal-tb;
 writing-mode: vertical-rl;
 writing-mode: vertical-lr;
 /* Global values */
 writing-mode: inherit;
 writing-mode: initial;
 writing-mode: revert;
 writing-mode: unset;

Code snippets

direction.htm

Source:direction.htm

index.html

Source:index.html

site.css

Source:site.css

Browser Compatibility