Présentation
En CSS2, il n’est pas possible d’afficher des textes verticaux. Le seul navigateur proposant une alternative est internet explorer, avec les attributs css filter et writing-mode. Exemple :
- .verticaltext {
- writing-mode: tb-rl;
- filter: flipv fliph;
- }
Or les textes verticaux peuvent être intéressants en fonction du design choisi. Par exemple, je les utilise dans le jQuery virtual tour pour l’affichage du titre, le placement en haut à droite ne masque pas le panorama.
L’idée c’est donc de développer avec jQuery une alternative pour les navigateurs ne reconnaissant pas le writing-mode : firefox, opéra, safari..
Comme jQuery est une technologie non intrusive, on est sûr que les visiteurs pourront accéder au texte, qui en cas d’échec s’affichera horizontalement.
La solution la plus intuitive est d’utiliser la balise <canvas> introduite par Apple et qui est désormais reconnue par l’ensemble des navigateurs récents : firefox, safari et opéra.
IE ne reconnaît pas cette balise, donc on conservera dans le cas d’IE un affichage basé sur l’attribut writing-mode.
Une lacune de la balise <canvas> c’est qu’il n’existe pas de méthode native pour afficher du texte. Il faut utiliser la librairie cvi_text_lib.js de netzgesta, qui offre une méthode pour écrire dans la balise <canvas>, uniquement en Verdana.
Utilisation
Insérez l’appel aux librairies javascript dans la section <head> de votre page :
- <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>
Ajoutez simplement la classe "flipv" au texte que vous souhaitez afficher verticalement.
exemple : <p class='flipv'>mon texte</p>
Vous pouvez également faire un appel à la méthode flipv() sur les éléments de votre choix en utilisant un sélecteur jQuery.
exemple : $('p').flipv();
Vous n’avez pas besoin d’ajouter les attributs filter et writing-mode pour IE, le plugin s’en chargera tout seul.
Vous pouvez définir une largeur et une hauteur pour votre texte. Dans ce cas donnez lui la hauteur et la largeur pour un affichage horizontal. Lorsque le plugin s’exécutera, il inversera automatiquement les deux valeurs.
Limitations
affichage d’une ligne seulement police de caractère Verdana
Messages
17 juillet 2008, 19:59, par 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
3 septembre 2008, 15:14, par 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
15 avril 2009, 22:51, par 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
Voir en ligne : How to produce vertical text.
2 juin 2009, 21:02, par Luis
Why is verdana Font required ?
13 mai 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 !
Voir en ligne : Jesper Lindstrøm Nielsen
7 juin 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.
14 septembre 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 ?