OpenStudio LAB

Thelia est un outil de création de sites e-commerce et de gestion de contenu en ligne basé sur Symfony 2. Vous trouverez dans cette section un aperçu de nos autres contributions libres et variées : développements logiciels, thèmes graphiques, tutoriels...

jQuery flipv()

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 :

  1. .verticaltext {
  2. writing-mode: tb-rl;
  3. filter: flipv fliph;
  4. }

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 :

  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/cvi_text_lib.js"></script>
  3. <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

8 Forum posts

  • 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

  • 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?

  • 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.

  • Why is verdana Font required?

  • 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

  • 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.

  • 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

  • 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

pre-moderation

Warning, your message will only be displayed after it has been checked and approved.

Who are you?
Enter your comment here
  • This form accepts SPIP shortcuts [->urls] {{bold}} {italics} <quotes> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.