Comment puis-je dessiner un texte vertical avec CSS inter-navigateur?

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

Mise à jour de cette réponse avec des informations récentes (à partir des astuces CSS ). Félicitations à Matt et Douglas pour avoir souligné la mise en œuvre 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); } 

Vieille réponse:

Pour FF 3.5 ou Safari / Webkit 3.1, consultez: -moz-transform (et -webkit-transform). IE possède un filtre Masortingx (v5.5 +), mais je ne suis pas certain de savoir 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... */ } 

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); } 

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

  This text is vertical  

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

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

Je l’ai adapté à partir de http://snook.ca/archives/html_and_css/css-text-rotation :

 

Le module Modes d’écriture CSS introduit des stream orthogonaux avec du texte vertical.

Utilisez simplement la propriété en writing-mode 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; } 
  ↑ (1) vertical-lr 至
↑ (2) vertical-lr 至
↑ (3) vertical-lr 至
↓ (1) vertical-rl 至
↓ (2) vertical-rl 至
↓ (3) vertical-rl 至
↓ (1) sideways-lr 至
↓ (2) sideways-lr 至
↓ (3) sideways-lr 至
↓ (1) sideways-rl 至
↓ (2) sideways-rl 至
↓ (3) sideways-rl 至

J’ai eu des problèmes en essayant de le faire en CSS pur – selon la police, cela peut sembler un peu foutu. Comme alternative, vous pouvez utiliser SVG / VML pour le faire. Il existe des bibliothèques qui facilitent la navigation entre navigateurs, 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 3,0 FF.

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

 .rotate(degrees); 

Exemple:

 .rotate(-90deg); 

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

 .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*/ }