Bienvenue !
Implantés dans le Midi de l’Auvergne et spécialistes des technologies libres et accessibles, nous vous accompagnons dans votre communication sur internet.
Accueil     Entreprise     Portfolio     Offre    

> Logiciels libres > jQuery flipv()

> jQuery flipv()

Une implémentation accessible pour afficher une ligne de texte verticale

Démonstration

- démonstration du plugin

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

- jquery-flipv.zip

licence GPL

mardi 22 avril 2008

Laisser un commentaire

9 Messages de forum

  • Spacing at the top of the title

    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 ?

    Répondre à ce message

  • jQuery flipv(), Personnaliser l’angle

    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.

    Répondre à ce message

  • Problems with different sizes

    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

    Répondre à ce message

  • jQuery flipv()

    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

    Répondre à ce message

    • jQuery flipv() 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

      Répondre à ce message

      • jQuery flipv() 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.

        Répondre à ce message


Suivre la vie du site :: Plan du site :: Mentions légales :: Contact :: SPIP :: OpenStudio - 2 rue Pierret 43000 Le Puy en Velay - +33 (0) 4 82 53 02 01