Sideways Header

As a design element, a header may be set on its side and to the left of the content. Here is an example:

It's done with the CSS writing-mode:vertical-rl; and float:left; declarations. The writing-mode:vertical-rl; declaration sets the text on its side. The float:left; declaration floats the div with the sideways text to the left of additional content.

In the example, the font size, weight, and color are also specified. And a bit of margin on the right side so the content doesn't bump against the sideways header.

Here is the source code for the above sideways header example.

<div 
   style="writing-mode:vertical-rl; 
          float:left; 
          margin-right:.15em; 
          font-size:1.75em; 
          font-weight:bold; 
          color:blue;">
Sideways
</div>

Adjust the text size, weight, and color for an aesthetic appeal. And the amount of space between the sideways header and the balance of the content.

The technique can be useful for presenting a pleasant design or for getting attention.

(This content first appeared in Possibilities newsletter.)

Will Bontrager