web-dev-qa-db-fra.com

Comment écrire du texte vertical de bas en haut sans utiliser de transformation transformer en rotation?

Avec writing-mode, vous ne pouvez obtenir que le texte à lire de haut en bas. Selon https://developer.mozilla.org/en/docs/Web/CSS/writing-mode

la seule option que j'ai est d'utiliser sideways. Mais cet attribut est expérimental.

.verticalTxt_lr {
  writing-mode: vertical-lr;
}
.verticalTxt_rl {
  writing-mode: vertical-rl;
}
.rotate {
  transform: rotateZ(270deg);

}

https://jsfiddle.net/thadeuszlay/5ueopnqu/2/

Je voulais écrire l’étiquette sur les barres pour qu’elle soit verticale mais elle devrait commencer par le bas.

http://jsfiddle.net/thadeuszlay/3HL4a/2402/

Essayer de faire pivoter me donne un comportement étrange lors de l'animation du graphique à barres. Je cherche donc une autre méthode pour créer des textes verticaux lisibles avec la tête penchée à gauche.

htmlcssd3.js
15
thadeuszlay

J'ai combiné writing-mode et rotation:

    .rotated {
        writing-mode: tb-rl;
        transform: rotate(-180deg);
    }
<div class="rotated">Text from bottom with working width/height</div>

Cela fonctionne pour moi sans mauvais paramètre width et height dans les cellules du tableau.

19
Dave
.rotate {
     transform: rotate(270deg);
}

Cela devrait être suffisant pour faire pivoter le texte verticalement de bas en haut, appliquez-le sur div contenant le texte. Si vous utilisez le mode d'écriture: vertical-rl/lr en conjonction avec cela, il se peut que cela change.

1
Yogesh