Webdesign et développement
Implantés dans le Midi de l’Auvergne et spécialistes des technologies libres et accessibles, nous vous accompagnons dans votre communication sur internet.
Une implémentation accessible pour afficher une ligne de texte verticale
Démonstration
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 :
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 :
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
Téléchargement
mardi 22 avril 2008
Laisser un commentaire
9 Messages de forum
:: Plan du site :: Mentions légales :: Contact :: SPIP :: OpenStudio - 10, rue Chènebouterie 43000 Le Puy en Velay - +33 (0) 4 82 53 02 01