Vertical and angled text in HTML

Vertical text is one of the places where there is a big difference between browsers, and where you really have to keep an eye on how the setting work together. What you have to be especially aware of, is that the browsers creates something equivalent to a floating DIV, which is placed a level over the text item where you want the vertical text. Mostly it is a cell content in a table you want vertical, but it could also be something like the text for a picture.

The other thing you have to be aware of, is that the rotation involves a movement in the x-y plane, i.e. up and down and left and right, but not for Internet Explorer before IE 9. In reality, rotation and shift are two different and independent parameters you can adjust, but because the browsers automatically think that if you want your text rotated, you also want it to be moved somewhere else (no, it makes no sense that they made it like this, it is one of those bizarre thing we have to live with, when it comes to programming), the two parameters becomes connected.

In principle, you can do the vertical text using STYLE directly on the text element, but, as we shall see, this will result in some messy and unreadable code. In stead we create a class in our style sheet. Here we call it VerticalText. Now, if we start with the rotation alone, we rotate the text 90° counter clockwise, and the class looks like this:



As seen, with the earlier versions of Internet Explorer, you are limited to rotating 1, 2 or 3 times 90°, whereas for the newer browsers, you can rotate as you like. As you can also see, you need three different codes for covering what would be considered 'the most common versions of IE'.

Because the page treat the text field as a floating DIV, it is recommendable to specify float, so you won't have problems with browsers and different versions of browsers, having different default settings. Based on experience, float:left is a fairly good guess, but you really have to test to see what works.

Likewise it is a good idea to specify position:absolute. Apparently not all browsers use this as default for vertical text.

Last, but not least, specifying the width of the text field is recommended. On the vertical text, the width obviously becomes the height of the text, and because the text is floating in a layer above the ordinary horizontal text, there is nothing to limit the height, other than what is specified by the programmer.

If we decide on a 200px height, our class now looks like this:



Getting vertical text is now as simple as <DIV CLASS="VerticalText">My vertical text</DIV>

It looks like this:



Making it work is the easy part. Making it look nice is where it becomes time-consuming fine-tuning. Fortunately there is a neat little trick to make it easier:

The first thing to do is marking the area where you want the vertical text. If it's a table, you make sure to specify the height and width of the cells in the TD tag, if it's a DIV or something similar, you also specify height and width. Obviously, they have to be at least as big as the field with the vertical text.

Next thing you do is putting borders on the text area. If it's a table, you put it on all cells, also the ones that are supposed to be invisible, so you can see where all your fields are placed.

You now have sight lines to guide you when moving you fields containing vertical text, and the surrounding text isn't moving around beneath your vertical text. Now you can move the text field in the x-y plane and fine-tune the position, without any hassle from other objects moving around, so they are placed exactly where they are supposed to be according to the sight lines (for all browsers). When this is done, you remove the borders that are only used as sight lines.