Vertical text in ie

Useful CSS

Internet Explorer allows text to be rendered vertically by means of the writing-mode property, a proposed addition to the css Standard, designed primarily for Oriental languages that write from top to bottom, but capable of overturning any glyph.

The technique

The writing-mode property takes one of two values:

lr-tb Horizontally, the default: from left to right, and top to bottom.
Established as standard around 400 bc by Greek writer-philosophers after documented empiric study of all the systems known and conceivable to them.
tb-rl Vertically: from top to bottom, and right to left.
In common use in East-Asian typography.

The style can be applied to any element except the <body>, which will always flow left to right and top to bottom.

Orientation

Although East Asian languages inspired vertical layout support, text of any language can be given a vertical text flow. Within this flow, the orientation of individual characters depends on the language or script to which they belong. In keeping with the tradition of vertical typography, characters from East Asian scripts are displayed with an upright orientation. All other characters, including Latin, are rotated 90° clockwise and appear on their sides when in vertical layout.

The orientation of the text can be further manipulated with another non-standard property, a filter to mirror the content with the flipH() and flipV() mirroring functions, this will also affect images and other embedded content, as the transparant .gif in the example paragraphs below illustrates. Their height is determined as usual by the content, which is just some text, an image and a few   tags. They have been given a colored background through a class, and with Javascript enabled, the line-height (or should we say ‘width’) can be adjusted to ...

Four examples

{ writing-mode: tb-rl; filter: flipV(); }

This starts in the
top left.

{ writing-mode: tb-rl; filter: flipH() flipV(); }

This starts in the
bottom left.

{ writing-mode: tb-rl; }

This starts in the
top right.

{ writing-mode: tb-rl; filter: flipH(); }

This starts in the
bottom right.

Alternatives

In browsers not supporting the required style properties, the same effect of vertical text can still be achieved by using an image, although not without the usual drawbacks. Text in images cannot be selected and copied by the reader, and it is not recognized by database or web crawling software. Such images can be generated serverside on the fly, as demonstrated on our image/text page.

For the others, below is a screenshot of the above section as rendered in IE v5.5, with the line-height set to 45px and a bit of text vertically selected in the top right corner. Rotating the transparent .gif evidently did give the browser does some difficulty. No such glitches have been seen in IE6 or 7.