Web Site Design and Development
Located in the south of Auvergne, in France, an expert in free software provides you with modern communication tools on Internet.
Accessible way to display vertical text line
Demonstration
Introduction
With CSS2, it isn’t possible to vertically display texts. The only browser suggesting a way is Internet Explorer, with its css attributes "filter" and "writing-mode". Example :
Vertical texts can be interesting, depending on the chosen design. For example, I use it in the jQuery virtual tour to display the title without hidding the panoramic view.
The principle is to develop using jQuery another implementation for the browsers which doesn’t recognize writing-mode, such as firefox, opéra, safari..
As jQuery is a non-intrusive technology, we are sure that the visitors will be able to acceed to the text. In case of fail, it will be horizontally displayed.
The most intuitive solution is to use the <canvas> tag, created by Apple and that is now recognized by the whole recent browsers : firefox, safari and opéra.
IE doesn’t recognize this tag, so in this case, we will keep the display based on writing-mode attribute.
A lack of the <canvas> tag, is that there is no native method to display text. Library cvi_text_lib.js from netzgesta has to be used, that offer a method to write in the <canvas> tag, only in Verdana.
Use
Insert javascript calls in the <head> section :
Simply add the "flipv" class into texts or titles you want to display verticaly.
example : <p class='flipv'>mon texte</p>
You can also insert an explicit call to flipv() method on any element in the page using a jQuery selector.
example : $('p').flipv();
You don’t need to specify filter and writing-mode attributs for IE, the plugin will do it.
You could define a width or an height for your text. In this case, give sizes for horizontal display and the plugin will invert values automatically.
Limits
one line only
Verdana font only
Download
Tuesday 22 April 2008
Reply to this article
9 Forum messages
:: Site Map :: Mentions légales :: Contact :: SPIP :: OpenStudio - 10, rue Chènebouterie 43000 Le Puy en Velay - +33 (0) 4 82 53 02 01