Mar 142013
 

Sometimes it is convenient to be able to write vertical text, for instance to add a title to the y-axis in a graph. There are many ways to obtain this result. This post explains some of them.

Using pure HTML

The most elementary way to write a vertical text is by adding a “<br/>” tag after each character. For instance:

The result is:

T
I
T
L
E

This option has the drawback that the text has to be broken into each individual character. Besides, search engines will not recognise the words in the text, and these words might be valuable keywords that would help improve the page ranking. On the other hand, being a pure HTML, the compatibility with all kind of browsers is guaranteed.

Using CSS “word-wrap”

In this case, the text is put inside a <div> block with a CSS style “word-wrap: break-word;”. This style tells the browser that the text can be split at any character to fit the width of the container div. The width of the container div is then set to match the width of a single character, and this forces the browser to break the word at every character:

The result is:

TITLE

Using an image

This is a pretty straightforward solution. Instead of text, an image with the desired text is added to the page. The text in the image can also be assigned to the “alt” attribute of the image, allowing search engines to find it.

The result is:

image-text
This method has the advantage that there is complete freedom in the image design.

There are however some drawbacks:

  • The image has to be produced with a graphical editor
  • The size in bytes of the image will allways be greater that the size of the text
  • The browser needs to perform an additional request to the server to download the image

 Rotating text with CSS

A more elaborate way is to use the “transform” functionality in CSS to rotate the text a given angle. The problem with this method it that it is not available in older browsers. Besides, the implementation is different in different types of browsers. Specific CSS code is required for each of these types.

The result is:

Title

Note: Internet Explorer versions before IE9 use a different CSS syntax to achieve the same result:

References:

 Posted by at 4:54 pm

 Leave a Reply

(required)

(required)