Dispelling HTML Myths – Displaying Vertical Text

How to Display Text Vertically in Any Explorer or Firefox Web Page



This article dispels an old HTML myth. It shows, quite simply, how to display text vertically in a web page and in any browser - Internet Explorer or firefox.

There are many myths about HTML (HyperText Markup Language), the language behind all web pages. The first is that is that HTML is a programming language. It is not. Another myth is that it is not possible to display text vertically. It is. And a final myth is that even if a web page designer can display text vertically in Internet Explorer, they can't do that in Firefox. Guess what. That's right, they can.

Myth Number 1: HTML is a Programming Language

HTML (as its name suggests) is a formatting language and nothing more. It enables the web page designer to display text in different ways by using formatting tags, for example:

Bold

Large Heading

Small Heading

It is even possible for a web site designer to create their own bespoke tags:

Standard formatting and customized formatting

This can be seen in figure 1 at the bottom of this article. However, there is no programming involved. Only formatting.

Myth Number 2: Text Cannot be Displayed Vertically

Having dispelled the myth of HTML being a programming language, it's time to consider formatting the text so that it is displayed vertically. And this particular myth evaporated because of Internet Explorer. Microsoft Internet Explorer has, and has had for quite a long time, its own style property – the writing mode property:

.vertical_text {

writing-mode: tb-rl;

}

The web page creator can then use this, for example as a table heading:

Text 1	Text 2

The result can be seen in figure 2 or in Internet Explorer (but not in Firefox).

Myth Number 3: Text Can be Displayed Vertically in Internet Explorer, But Not Firefox

Having found that it is possible to display text vertically by using an Internet Explorer style property, it will be of no surprise to anyone that this technique will not work with Mozilla Firefox. It will, however, be equally of no surprise to anyone that there is an equivalent style property that works with the Firefox web browser. It is, therefore, just a matter of updating the style definition in either the web page's header or its css (cascading style sheet) file. It's also worth noting that the style's text-align property must be set to "center" for this to work:

.vertical_text {

text-align: center;

-moz-transform: rotate(90deg);

writing-mode: tb-rl;

}

This custom style will work with both Firefox 3.5.1 and Internet Explorer 8.0, and enable the web page designer to produce professional looking tables regardless of what they may have heard.

Read more at Suite101: Dispelling HTML Myths – Displaying Vertical Text: How to Display Text Vertically in Any Explorer or Firefox Web Pagehttp://computerprogramming.suite101.com/article.cfm/dispelling_html_myths_displaying_vertical_text#ixzz0dZR5w34Q