One of the CSS properties that deals with how texts are displayed is the **<code>writing-mode property</code>**. 

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 <code>writing-mode</code> property is set in the same way, which is:

         property: value;
 The <code>writing mode</code> 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* ( <code>ltr</code>, English and many other languages) or  *right-to-left* (<code>rtl</code>, Arabic and similar languages).



#    
## Values

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


### Keyword values

1. **<code>horizontal-tb</code>** 

- For <code>ltr</code> scripts: Sets the content to flow *from left to right*.

- For <code>rtl></code> 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.**<code>vertical-rl</code>**

 - For <code>ltr</code> 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 <code>rtl</code> 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.

3. **<code>vertical-lr</code>**

- For <code>ltr</code> 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 <code>rtl</code> 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.

4. **<code>sideways-rl</code>**

- For <code>ltr</code> scripts: Sets the content to flow vertically from *bottom to top*.

- For <code>rlt</code>: 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*.

5. **<code>sideways-lr</code>**

- For <code>ltr</code> scripts: Sets the content to flow vertically from *top to bottom*.

- For <code>rtl</code> 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. **<code>inherit</code>**

 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.

2. **<code>initial</code>**

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

3. **<code>unset</code>**

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

4. **<code>revert</code>**

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.


<html>
 <head>
 </head>
 <body>
   <h1>EXAMPLES</h1>
   <table>
     <tr>
       <th> Values</th>
       <th> Horizontal (LTR) script</th>
     </tr>
     <tr>
       <td><code>horizontal-tb</code></td>
       <td class="horizontal-text">Example Text</td>
     </tr>
      <tr>
       <td><code>vertical-lr</code></td>
       <td class="vertical-lr-text">Example Text</td>
     </tr>
      <tr>
       <td><code>vertical-rl</code></td>
       <td class="vertical-rl-text">Example Text</td>
     </tr>
      <tr>
       <td><code>sideways-lr</code></td>
       <td class="sideways-lr-text">Example Text</td>
     </tr>
      <tr>
       <td><code>sideways-rl</code></td>
       <td class="sideways-rl-text">Example Text</td>
     </tr>
   </table>
 </body>
</html>

h1{
    text-align: center;
}
table{
    width: 100%;
    border: 2px solid black;
    margin: auto;
}
th{
    text-align: center;
    border: 2px solid black;
}
td{
    text-align: center;
    border: 2px solid black;
}
.horizontal-text{
    writing-mode: horizontal-tb;
}
.vertical-lr-text {
    writing-mode: vertical-lr;
}
.vertical-rl-text{
    writing-mode: vertical-rl;
}
.sideways-lr-text{
    writing-mode: sideways-lr;
}
.sideways-rl-text{
    writing-mode: sideways-rl;
}

codemirror

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

Try it with horizontal <code>rtl</code> scripts for better understanding.

How to use the CSS writing-mode property

The CSS writing-mode property defines the direction of text flow and block progression, with keyword and global value options for both horizontal and vertical scripts.