Writing-mode CSS

In CSS there is a property named “writing-mode” which is less used by developers due to the several reasons, it’s not famous and not high demanded in pages integration. But sure as a web developer you will need to use it somewhere or sometime, In this simple blog post I will try to gives you the start point to utilize from. In your next projects.

Syntax

/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

Examples

In the next example I will give you the general using of this CSS property. We will apply it to “P” selector.

HTML

<p class="horizontal-tb">
  is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
</p>
<p class="vertical-rl">
  is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
</p>
<p class="vertical-lr">
  is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
</p>

CSS

.horizontal-tb {
  writing-mode: horizontal-tb;
}

.vertical-rl {
  writing-mode: vertical-rl;
  color: red;
}

.vertical-lr {
  writing-mode: vertical-lr;
  color: orange;
}

Result

As a result we will have an output like bellow.

Now you have the basics knowledge about this CSS property, so try to use it in your next projects 🙂

References

Writing-mode

Leave a Reply

Your email address will not be published. Required fields are marked *