Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
communitycreator

How to use the CSS writing-mode property

Akande Olalekan Toheeb

One of the CSS properties that deals with how texts are displayed is the writing-mode property.

It deals with how lines of texts are laid out, whether horizontally or vertically. It also sets the direction in which blocks will progress.

Syntax

Just like other CSS properties, the writing-mode property is set in the same way, which is:

     property: value;

The writing mode property has its values categorized into two:

  1. Keyword values:

    writing-mode: horizontal-tb;
    writing-mode: vertical-rl;
    writing-mode: vertical-lr;
    
  2. Global values:

    writing-mode: inherit;
    writing-mode: initial;
    writing-mode: unset;
    writing-mode: revert;
    

Note: Directionality of a script affects the flow direction in horizontal of that script.

Directionality of a script is either left-to-right ( ltr, English and many other languages) or right-to-left (rtl, Arabic and similar languages).

Values

Values will be explained in relation to directionality of the scripts:

Keyword values

  1. horizontal-tb
  • For ltr scripts: Sets the content to flow from left to right.

  • For rtl> scripts: Sets the content to flow horizontally from right to left. The next horizontal line is set to be positioned below the previous line.

2.vertical-rl

  • For ltr scripts: sets the content to flow vertically from top to bottom, and the next vertical line is set to be positioned to the left of the previous line.

  • For rtl scripts: sets the content to flow vertically from bottom to top, and the next vertical line is set to be positioned to the right of the previous line.

  1. vertical-lr
  • For ltr scripts: Sets the content to flow vertically from top to bottom and the next vertical line is set to be positioned to the right of the previous line.

  • For rtl scripts: Sets the content to flow vertically from bottom to top, and the next vertical line is to be positioned to the left of the previous line.

  1. sideways-rl
  • For ltr scripts: Sets the content to flow vertically from bottom to top.

  • For rlt: Sets the content to flow vertically from top to bottom.

Note: All the characters, even those in vertical scripts, are set sideways toward the right.

  1. sideways-lr
  • For ltr scripts: Sets the content to flow vertically from top to bottom.

  • For rtl scripts: Sets content to flow vertically from bottom to top.

Note: All the characters, even those in vertical scripts, are set sideways toward the left.

Global values

  1. inherit

This set the content to get the property of the parent element. The content is set to flow in the direction of the parent element.

  1. initial

This set the content to get the default value of the property. The content is set to flow in its normal direction.

  1. unset

This acts as either inherit or initial. It will act as inherit if the parent has a value that matches, or else it will act as initial.

  1. revert

This reverts the value of the property from its current value to the value it would have if this value hadn’t been specified. It sets the value to default or inherit.

Writing-mode property example

All the td are given a class to enhance easy styling. The styles are set to each writing value we desire.

Try it with horizontal rtl scripts for better understanding.

RELATED TAGS

css
communitycreator

CONTRIBUTOR

Akande Olalekan Toheeb
RELATED COURSES

View all Courses

Keep Exploring