Rotated or Vertical Text in Mozilla, Webkit, Opera using CSS3

February 14, 2011 — Vertical and rotated text is no longer a job for images, but not yet a standard either. This tutorial will walk you through how to create consistent vertical text for CSS3-ready browsers. It complements our article, Vertical Text with Internet Explorer.

CSS3 and IE9

CSS3:

As of the writing of this article (early 2011), the specifications for CSS3 are incomplete. So, this article will focus only on CSS that can be used now to create vertical text in most modern browsers. Though most of the code we will use are proprietary properties, they are preparatory to CSS3.

IE9:

Internet Explorer 9 was not fully developed when this article was written, so though this browser may support CSS3 properties in the form of -ms-transform, it was not ready for widespread use to rotate or make vertical text, and will not be covered in this article.

Set the stage

I will create a container element and a stylized element to rotate. The block of code below is not necessary to rotate text.

This code is for clarity only. It is not necessary to rotate text.
  1. .rotate-container {
  2.     height: 100px;  width: 100px;  margin: 0px auto;
  3.     border: 1px solid #949494;  background-color: #EFEFEF;
  4. }
  5. .rotate-demo {
  6.     height: 30px;  line-height: 30px;  text-align: center;
  7.     border: 1px solid #A2D700;  background-color: #F6F6F6;
  8. }
Our Element

Mozilla (Firefox), Webkit (Safari & Chrome), Opera

If you are using IE to view this page, the following examples will not appear correctly.

transform: rotate(Ndeg);

Below are the CSS properties to rotate an element. First, we will use rotation to create vertical text for Mozilla, Webkit, and Opera.

These will rotate our element 90° clockwise.
  1. .rotate-90 {
  2.     -o-transform: rotate(90deg);
  3.     -moz-transform: rotate(90deg);
  4.     -webkit-transform: rotate(90deg);
  5. }
These will rotate our element 270° clockwise.
  1. .rotate-270 {
  2.     -o-transform: rotate(270deg);
  3.     -moz-transform: rotate(270deg);
  4.     -webkit-transform: rotate(270deg);
  5. }
Our Element
Element at 90°
Our Element
Element at 270°

transform-origin: value value;

The element above was rotated 90° clockwise, but it doesn't seemed to be aligned to anything. That's because the origin of rotation is exactly in the middle of the element. The transform-origin property can fix this by telling the element where to rotate from.

These will set the rotation from the top left.
  1. .rotate-90 { /* ... */ }
  2. .origin-tl {
  3.     -o-transform-origin: top left;
  4.     -moz-transform-origin: top left;
  5.     -webkit-transform-origin: top left;
  6. }
These will set the rotation from the top right.
  1. .rotate-270 { /* ... */ }
  2. .origin-tr  {
  3.     -o-transform-origin: top right;
  4.     -moz-transform-origin: top right;
  5.     -webkit-transform-origin: top right;
  6. }
Our Element
Element at 90°
Our Element
Element at 270°


The above result may be just what you want. If so, that's great! But to align your element back inside the container, use position: relative and left or right to push the element into place. Notice the element offset is equal to its own height plus border.

Push element left equal to its height.
  1. .rotate-90  { /* ... */ }
  2. .origin-tl  { /* ... */ }
  3. .fix-rotate-90 {
  4.     position: relative;
  5.     left: 32px;
  6. }
Push element right equal to its height.
  1. .rotate-270 { /* ... */ }
  2. .origin-tl  { /* ... */ }
  3. .fix-rotate-270 {
  4.     position: relative;
  5.     right: 32px;
  6. }
Our Element
Element at 90°
Our Element
Element at 270°


The next step is to create the same effect in Internet Explorer. This is now covered in our CSS article, Vertical Text in Internet Explorer.

More CSS Text Effects

Questions About Rotated or Vertical Text?

We realize that was a long tutorial on rotated and vertical text so you might have some questions. As a Shenzhen, China web design company we make it a point to interact with development community as much as possible. So if you have a question about rotated or vertical text leave us a comment and we will see if we can answer it for you.

Add a Comment

Comments

Posted Subject Comment
Author
September 09, 2011
In reply to: Andy
Container Width
Not That I Can Find
Container Width:
As far as my experiments have shown, the container will only allow itself to be "shrunk" to the original un-rotated width of a child element. If you find a way to achieve your desired result, please let us know.

A notice to other readers:
A container element can be "shrunk" if its CSS is set to position: absolute, or float: left, or display: inline-block (IE won't respect this if the element is inheritely display: block).
Andy
September 05, 2011
Container Width Hey, thanks for the demo and guide - really easy to understand.

The only issue I have in my implementation is that the container width is too wide. Whilst I imagine this is to accomodate the normal width of the 'demo' div, is there any way to shrink the container to the vertical width of the demo box?