wenbo

The short answer for this blog is:

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;

I’ve been working on a very interesting project and one of the desired feature is a fancy tag cloud with variations in color, size, and text alignment. Tricks with color like depth or text sizes are pretty straightforward; however, the vertical & horizontal text alignment is not as easy as his other two fellow requirements buddies.

After digging thru piles of rss reader records, I found css sprite is a good answer. Here’re an article explaining detailed implementations, step by step, and a sample image (upper half demo effect, lower half css sprite compositions).

However, some brilliant people found a better way by employing css without sprite graphics. Link. He is using

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Explanations to the code: webkit-transform is the Safari core based browser’s support for vertical text, -moz-transform is the Mozilla Firefox counterpart, while the last DXImageTransform is the Microsoft IE Method.

Finally, after looking up into the css 3 standard, I found the lenghty IE vertical text support is trimmed and it is included in the css 3 standard:
writing-mode: tb-rl. Therefore, the final solution is

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;

I hope my article can be of use to you.

No related posts.