Poser une question

Re: Texte sur le coté avec le CSS writing-mode : tb-rl et filtre IE flipH(), flipV()

Salut,

C'est fait avec du CSS (feuille de styles) et exclusivement compatible avec IE, aucun autre navigateur ne supporte le texte vertical. Bien que se soit une recommendation très importante de la W3C pour les languages écrit verticalement bien sûr. Note que IE ne respecte pas vrament cette recomendation!

"CSS3 Text Module" (http://www.w3.org/TR/2003/CR-css3-text-20030514/#writing-mode)

Le truc c'est la propriété "writing-mode" à mettr à "tb-rl" c'est à dire Top to bottom et right to left.

<div style="writing-mode:tb-rl;">Texte vertical</div>

Avec IE, encore, tu peux inverser le texte en y appliquant un filtre (flipH() flipV();) qui n'a absolument rien à voir avec le CSS.

<div style="writing-mode:tb-rl;filter:flipH() flipV();">Texte vertical</div>

Mais une fois se filtre ajouté, IE ignore le "rl" (right to left) et gère comme par défaut un "lr" (left to right). Tu dois donc spécifier une position "absolue" et ajouter un style si tu veux le positionner à droite.

<div style="position:absolute;right:10px;writing-mode:tb-rl;filter:flipH() flipV();">Texte vertical</div>

Maintenant, reste quelques détails comme la hauteur (par défaut il "wrap").

<div style="width:20px;position:absolute;right:10px;writing-mode:tb-rl;filter:flipH() flipV();">Texte vertical</div>

Avec une classe :

<style type="text/css" >
#twTexteVertical {
position : absolute;
color : #666;
background : #fff;
right : 10px;
width : 20px;
writing-mode : tb-rl;
filter: flipH() flipV();
}
</style>
<div id="twTexteVertical">Texte vertical</div>

Ciao
Oznog

Réponses

Re: Texte sur le coté avec le CSS writing-mode : tb-rl et filtre IE flipH(), flipV()  dblv 18/3/2004