Sign in
Log inSign up

Handle text direction in CSS

Writing modes in vertical or horizontal

Satish Maurya's photo
Satish Maurya
·Aug 30, 2021·

1 min read

Handle text direction in CSS

1. What are writing modes?

  • A writing mode in CSS refers to whether the text is running horizontally or vertically.

  • The writing-mode property lets us switch from one writing mode to another.

  • You don't need to be working in a language which uses a vertical writing mode to want to do this — you could also change the writing mode of parts of your layout for creative purposes.

Input

image.png

output

image.png

The three possible values for the writing-mode property are:

  • horizontal-tb: Top-to-bottom block flow direction. Sentences run horizontally.

  • vertical-rl: Right-to-left block flow direction. Sentences run vertically.

  • vertical-lr: Left-to-right block flow direction. Sentences run vertically.