Writing mode in CSS defines the direction or flow of content that is whether lines of text are laid out horizontally or vertically and the direction in which block progress. It’s specification discusses support for international writing modes in CSS.

Syntax:

selector { 

         writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways_lr | initial | inherit;

}

Values:

Values writing-mode property:

  • horizontal-tb; Block flow direction is top-to-bottom and writing mode will be horizontal.
  • vertical-rl; Block flow direction is right-to-left and writing mode will be vertical.
  • vertical-lr; Block flow direction is left-to-right block and writing mode will be vertical.
  • sideways-rl; Block flow direction is top to bottom and all the glyphs, even those in vertical scripts, are set sideways toward the right.
  • sideways-lr; Block flow direction is top to bottom and all the glyphs, even those in vertical scripts, are set sideways toward the left.
  • initial (default value), inherit

Microsoft has implemented this method as “ms-writing-mode” which supports the following values:

  • lr-tb : content flows horizontally from left to right and top to bottom.
  • rl-tb : content flows horizontally from right to left and top to bottom.
  • tb-rl: content flows vertically from top to boom and right to left.
  • bt-rl: content flows vertically from bottom to top and right to left.
  • tb-lr: content flows vertically from bottom to top and left to right
  • bt-lr: content flows vertically from bottom to top and left to right.
  • lr-bt : content flows horizontally from left to right and bottom to top.
  • rl-bt:  content flows horizontally from right to left and bottom to top.

Example

Example with basic writing-mode property:

<!DOCTYPE html>
<html>
<head><style type="text/css">

.writing-mode  {

     writing-mode: tb-rl;

}

</style></head>

<body>

<div class="writing-mode">

     This is writing-mode property tutorial.

</div>

</body>
</html>

 

›› go to examples ››