Writing and consuming written content has firmly cemented itself in the digital world, with little chance of physical form being in the forefront any time soon. There are just too many benefits and convinces that can’t be ignored. Environmentally friendly, space conscientious, and easier to share and publish, among many other aspects. So it only makes sense that maintaining that same creativity in how words are displayed is important for the reading experience. That’s where the CSS property writing-mode comes into play.

This property allows you to set the direction text is displayed. Horizontally and growing going down(default), and vertically with the content growing to the left or right. Enough talk though, let’s look at the code.

#TestBlock {
  /* Default */
  writing-mode: horizontal-tb;
  /* Text displayed vertically, growing to the right */
  writing-mode: vertical-rl;
  /* Text displayed vertically, growing to the left */
  writing-mode: vertical-lr;