• CSS Writing Mode
  • This article has been granted by author Ahmad Shadeed
  • The Nuggets translation Project
  • Translator: huanglizhuo
  • Proofreader: Kulbear, Shixinzhang

While editing CSS in the Opera Inspector recently, I first noticed a CSS property called writing-mode. After some searching, it turned out to be a language used for vertical typography, such as Chinese or Japanese. However, the interesting thing is that if we use it in English, it’s very easy to create vertical text.

The writing-mode attribute defines the vertical or horizontal orientation of text in a text block. See MDN.

Default writing mode

Browsers that support this property set it to Horizontal-TB by default. This will apply to horizontal typesetting languages such as English, French, Arabic, etc.

Next we’ll try vertical-LR, where LR stands for Left to right.

Example 1

In the design above, we have a paragraph heading rotated 90 degrees in the upper left corner. To implement this without CSS writing-mode, we need to do the following:

  1. Add position:relative to create a position context for the element to be wrapped.

  2. Position: Absolute Adds the absolute position to the title.

  3. Add the transform-orgin property to it according to the rotation we want. In this case we want it in the upper left corner, so we add transform-origin: left top.

  4. Add transform: rotate(90deg) Rotate the title.

  5. Finally, you need to add some padding to the left side of the package to prevent the title from overlapping with the grid content.


    
Our Works
  
    
      

        
       

        
       

        
       

        
       

    
      


Copy the code
.wrapper {
    position: relative;
    padding-left: 70px;
}

.section-title {
    position: absolute;
    left: 0;
    transform-origin: left top;
    transform: rotate(90deg);
}
Copy the code

It’s annoying to need so much code to make such a design. Now let’s use CSS writing-mode to write:

.section-title {
    writing-mode: vertical-lr;
}
Copy the code

Done, it’s that simple! 😀 As you can see, there is no need to set the position or add the padding as before. Take a look at this Demo

Example 2

In this design, we placed a share control vertically next to the content. We can certainly do this without CSS Writing-Mode, but the interesting thing is that when we implement the social sharing control with Writing-Mdoe, we can center it vertically (left, center, or right).

As in the example, the social share button sits vertically on top of its parent element. You can do this by rewriting the CSS text-align property, for example:

.social-widget {
    writing-mode: vertical-lr;
    text-align: right;
}
Copy the code

This time near the bottom of the parent element. Easy, right! In the next example, it will be vertically centered.

.social-widget {
    writing-mode: vertical-lr;
    text-align: center;
}
Copy the code

See this Demo

A clarification: I have switched from Icon font to SVG, and I use icon font only for demonstration purposes.

Browser support

Not bad, 84.65% of browsers support this property. Now you can use this property for convenience (as in our example).

Look at all this green down here! 🙂

CSS Writing Mode support from caniuse.com

Cool front-end community Demos

read

  • CSS Writing Mode

  • Vertical text with CSS 3 Writing Modes

Liked my article and thought it might help other people? Then share it on Twitter.

Thank you for reading