Accessible way to display vertical text line
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 :
- .verticaltext {
- writing-mode: tb-rl;
- filter: flipv fliph;
- }
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 :
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/cvi_text_lib.js"></script>
- <script type="text/javascript" src="js/jquery.flipv.js"></script>
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
Le 22 April 2008
8 Forum posts
19 June 2012, 21:43, by Pedro Eugênio
My font-size never change, I wrote 72 or anything more than 13 and nothing happens
firefox 13.0 OR Chrome
I’m using flipv_up
14 September 2009, 12:10
Thanks for this plugin, it works really well. I have one problem though, there is occasionally spacing added to the top of the text, depending on how many words are used.
I’ve tried to remove the spacing, but this isn’t working, is there any way I can remove the spacing?
7 June 2009, 12:44
Bonjour,
Y à t’il une possibilité de personnaliser l’angle de rotation, du genre "$(’p’).flip(90)" ?
Dans tous les cas, merci pour ce plugin qui m’évite de devoir passer par des générations dynamique d’images ou par des scripts bien plus complexes en surface et donc moins propres.
2 June 2009, 21:02, by Luis
Why is verdana Font required?
13 May 2009, 12:35
I got a lot of problems with other font-sizes so i made a change in the script instead of the 60 value in the strokeText() function i made it to 78-fontsize:
context.strokeText(mytext,3,78-fontsize,fontsize-2);
in the very last line in the function vertical_text() and now i can se every size i have tried!
View online : Jesper Lindstrøm Nielsen
15 April 2009, 22:51, by Konrad Martin
Yes, it can be done.
You have to change the code a little bit. I tried to post the code here, but this form isn’t really prepared to take the symbols needed for code (quotes, doublequotes and so on).
So I posted the result on my site
http://benchstat.appspot.com/html/index.html
You can download it there
http://benchstat.appspot.com/fileHost/09/04/15/jquery-flipv2.zip
Konrad
View online : How to produce vertical text.
3 September 2008, 15:14, by Zander
I have a small question, can the orientation of the text be changed? For instance, can the text start at the bottom and go up? Do you see what I mean?
Many thanks
17 July 2008, 19:59, by Kriko Maurice
Salutations !
Retraité et débutant, je vais essayer votre logiciel;
J’espère m’en sortir et vous ferrai part de mon résulta
Merci, à plus