Comment puis-je dessiner du texte vertical avec un navigateur croisé CSS?


243

Je souhaite faire pivoter un seul mot de 90 degrés, avec la prise en charge de plusieurs navigateurs (> = IE6,> = Firefox 2, toute version de Chrome, Safari ou Opera). Comment cela peut-il être fait?


4
Il n'y a pas de CSS pur que vous pouvez utiliser avec la compatibilité croisée. Ce que j'ai, c'est tout ce qu'il y a. Vous êtes mieux avec une image.
Robert K

1
Le croisement de texte vertical n'est pas si difficile. Sur le dns4.nl, il existe une solution qui fonctionne même dans l'opéra. Je l'ai testé avec toutes les versions ie, mozilla et safari (également couronne). le lien est: dns4.nl/pagina/html_code/vertikale_tekst.html . commentaire pour xkcd150 :> Le problème est que cela dépend de l'élément canvas. - xkcd150 20 septembre à 10:13 Non, la procédure ne repose pas sur l'élément canvas.

Voici un tutoriel qui explique comment effectuer toutes sortes de transformations de texte même dans IE (y compris la solution à votre problème) :) useragentman.com/blog/2010/03/09/… J'espère que cela vous aidera!
Juanma Guerrero

Voici une ventilation de la technique que j'ai utilisée: scottgale.com/blog/css-vertical-text/2010/03/01

J'ai pu faire pivoter avec succès en suivant les instructions données sur cette page mais je n'ai pas pu imprimer la page. Le texte est imprimé à l'envers. Ce site m'a été très utile: sevenwires.com/play/UpsideDownLetters.html
Nahuel

Réponses:


213

Mise à jour de cette réponse avec des informations récentes (de CSS Tricks ). Félicitations à Matt et Douglas pour avoir souligné l'implémentation du filtre.

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Ancienne réponse:

Pour FF 3.5 ou Safari / Webkit 3.1, consultez: -moz-transform (et -webkit-transform). IE a un filtre Matrix (v5.5 +), mais je ne sais pas comment l'utiliser. Opera n'a pas encore de capacités de transformation.

.rot-neg-90 {
  /* rotate -90 deg, not sure if a negative number is supported so I used 270 */
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
  /* IE support too convoluted for the time I've got on my hands... */
}

+1 pour l'icône de l'ours fantôme;) J'ai eu beaucoup de mal à faire ce travail, j'ai fini par devoir changer ma structure DOM et truquer avec une marge négative. Une version IE plus simple à utiliser mais qui ne semble pas correcte lorsque la page est imprimée: mode d'écriture: tb-rl; filtre: flipv fliph;
RMorrisey

12
Microsoft "filtre: progid: DXImageTransform.Microsoft.BasicImage (rotation = 3);"
Matt

1
Malheureusement, IE9 (en mode standard!) Applique à la fois les styles -ms-transform- * et le filtre. Dans la vue de compatibilité, il applique uniquement le filtre.
Romløk

3
Assurez-vous que votre texte est un élément de bloc, c'est-à-dire utilisez display: inline-block ou similaire
James Westgate

2
Voici quelques filtres pour la qualité IE8 et IE9. Le premier est IE8, le second est le mode standard IE8 et le n ° 3 supprime le filtre pour IE9 +. Arrrgh, je ne peux pas obtenir de commentaires stackoverflow pour arrêter de filtrer mes hacks CSS, alors regardez jsfiddle.net/GrPyj/9
Justin Grant

73

J'utilise le code suivant pour écrire du texte vertical dans une page. Firefox 3.5+, webkit, opera 10.5+ et IE

.rot-neg-90 {
    -moz-transform:rotate(-270deg); 
    -moz-transform-origin: bottom left;
    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: bottom left;
    -o-transform: rotate(-270deg);
    -o-transform-origin:  bottom left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

Fonctionne sur Chrome 5. Ne fonctionne pas sur le mode IE 8 "bizarreries"; fait le travail sur « mode standard IE8 ».
Asaf Bartov

Merci de me le faire savoir. Veuillez le poster ici, si vous trouvez un moyen d'avoir du texte vertical dans IE en mode bizarreries.
Choesang

15

Une autre solution consiste à utiliser un nœud de texte SVG qui est pris en charge par la plupart des navigateurs .

<svg width="50" height="300">
    <text x="28" y="150" transform="rotate(-90, 28, 150)" style="text-anchor:middle; font-size:14px">This text is vertical</text>
</svg>

Démo: https://jsfiddle.net/bkymb5kr/

Plus d'informations sur le texte SVG: http://tutorials.jenkov.com/svg/text-element.html


excellente solution, bien meilleure que les précédentes - aucun problème avec le positionnement du texte après rotation
Picard

9

Le module CSS Writing Modes introduit des flux orthogonaux avec du texte vertical.

Utilisez simplement la writing-modepropriété avec la valeur souhaitée.

span { margin: 20px; }
#vertical-lr { writing-mode: vertical-lr; }
#vertical-rl { writing-mode: vertical-rl; }
#sideways-lr { writing-mode: sideways-lr; }
#sideways-rl { writing-mode: sideways-rl; }
<span id="vertical-lr">
  ↑ (1) vertical-lr 至<br />
  ↑ (2) vertical-lr 至<br />
  ↑ (3) vertical-lr 至
</span>
<span id="vertical-rl">
  ↓ (1) vertical-rl 至<br />
  ↓ (2) vertical-rl 至<br />
  ↓ (3) vertical-rl 至
</span>
<span id="sideways-lr">
  ↓ (1) sideways-lr 至<br />
  ↓ (2) sideways-lr 至<br />
  ↓ (3) sideways-lr 至
</span>
<span id="sideways-rl">
  ↓ (1) sideways-rl 至<br />
  ↓ (2) sideways-rl 至<br />
  ↓ (3) sideways-rl 至
</span>


2
sideways-rl n'est pour l'instant pas largement pris en charge, je recommanderais vertical-rl et la rotation à 180 degrés
godblessstrawberry

6

J'ai adapté ceci de http://snook.ca/archives/html_and_css/css-text-rotation :

<style>
    .Rotate-90
    {
        bloc de visualisation;
        position: absolue;
        à droite: -5px;
        haut: 15px;
        -webkit-transform: rotation (-90deg);
        -moz-transform: rotation (-90deg);
    }
</style>
<! - [si IE]>
    <style>
        .Rotate-90 {
            filtre: progid: DXImageTransform.Microsoft.BasicImage (rotation = 3);
            à droite: -15px; haut: 5px;
        }
    </style>
    <! [endif] ->

5

J'ai eu des problèmes pour essayer de le faire en CSS pur - selon la police, cela peut sembler un peu nul. Comme alternative, vous pouvez utiliser SVG / VML pour le faire. Il existe des bibliothèques qui facilitent le cross-browser, par exemple Raphael et ExtJS . Dans ExtJS4, le code ressemble à ceci:

    var drawComp = Ext.create('Ext.draw.Component', {
        renderTo: Ext.getBody(), //or whatever..
        height: 100, width: 100 //ditto..
    });
    var text = Ext.create('Ext.draw.Component', {
        type: "text",
        text: "The text to draw",
        rotate: {
            x: 0, y: 0, degrees: 270
        },
        x: -50, y: 10 //or whatever to fit (you could calculate these)..
    });
    text.show(true);

Cela fonctionnera dans IE6 + et tous les navigateurs modernes, cependant, malheureusement, je pense que vous avez besoin d'au moins FF3.0.


1
Aimer la différenciation entre IE6 + et tous les navigateurs modernes - on dirait que vous dites que n'importe quelle version d'IE n'est pas moderne :)
ClarkeyBoy

1
@ClarkeyBoy Je dirais que seul IE10 est presque à jour avec les autres navigateurs, et uniquement parce que le rendu forcé du GPU et la disposition de la grille. Vous ne pouvez pas vraiment caler IE un navigateur moderne, car il met à jour x3-x10 fois plus lentement que tous les autres navigateurs.
skmasq

Le mieux est d'utiliser un fichier SVG ou ce JS, car vous pouvez constater que l'utilisation de la propriété de transformation CSS peut ne pas être compatible avec vos pages conçues de manière réactive.
b01

5

Si vous utilisez Bootstrap 3, vous pouvez utiliser l'un de ses mixins:

.rotate(degrees);

Exemple:

.rotate(-90deg);

1
Fonctionne
yishaiz

4

Ma solution qui fonctionnerait sur Chrome, Firefox, IE9, IE10 (Modifiez les degrés selon vos besoins):

.rotate-text {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  filter: none; /*Mandatory for IE9 to show the vertical text correctly*/      
}

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.