Using some new style sheet elements, you can make your text appear in any direction you want. The two style sheet elements are "writing-mode" and "filter". Writing mode has 2 choices: lr-tb or tb-rl. lr-tb is the default and means "left to right, top to bottom". tb-rl means "top to bottom, right to left". So the second writing mode will make your text appear vertical.

With filters, you can flip the text horizontally or vertically. Note that for this to work, you have to specify a width (otherwise the browser won't know where to flip, especially for horizontal flipping). The two "flip" values are "fliph()" for horizontal flipping or "flipv()" for vertical flipping. There are lots of other filter effects that can be added like "glow()" and "blur()" and "shadow()" and "dropshadow()" and "wave()", but the flipping are the only ones to be addressed here.

We created a little table with all 8 combinations (the 2 different writing modes, times 2 for flip vertical or not, times 2 for flip horizontal or not). Use the button below to see the table and you can view the source to see all the HTML behind it:

Note that the flipping is applied first and then the writing mode is applied. If it went the other way around, the results would be a bit different.

Where would you use this? Well, a good example is for a page logo. Instead of creating a graphic, you could have some text with a style applied to it. It would probably end up being a smaller download size than a graphic, and you could still have a vertical logo on the side of your page. Another idea might be for a copyright area to appear vertically on the right of your page. If it was written vertically, it wouldn't use too much of the width of your page, but would still be visible.