writing-mode Archives

The CSS writing-mode property defines whether lines of text are laid out horizontally or vertically.

Demo:

Syntax:

writing-mode: horizontal-tb|vertical-rl|vertical-lr;

horizontal-tb (default) – content flows horizontally from left to right, vertically from top to bottom.

vertical-rl – content flows vertically from top to bottom, horizontally from right to left.

vertical-lr – content flows vertically from top to bottom, horizontally from left to right.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.horizontalTb {
  writing-mode: horizontal-tb; 
}

.verticalRl {
  writing-mode: vertical-rl; 
}

.verticalLr {
  writing-mode: vertical-lr; 
}
</style>
</head>
<body>

<p class="horizontalTb">This is a paragraph with default writing-mode.</p>

<p>This is a paragraph with a span element with a <span class="verticalRl">vertical-rl</span> writing-mode.</p>

  <p class="verticalLr">This is a paragraph with </br> writing-mode: vertical-lr.</p>

</body>
</html>

Output:

This is a paragraph with default writing-mode.

This is a paragraph with a span element with a vertical-rl writing-mode.

This is a paragraph with
writing-mode: vertical-lr.

Enjoy coding!