Direction verticale du texte


106

J'ai essayé que le texte aille dans une direction verticale comme nous pouvons le faire dans les tableaux de ms-word, mais jusqu'à présent, je n'ai pu faire que CECI ... ce qui ne me satisfait pas car c'est une boîte tournée ... Isn ' Y a-t-il un moyen d'avoir un texte de direction verticale réelle?

Je ne règle la rotation que sur 305 degrés dans la démo, ce qui ne rend pas le texte vertical. 270degva mais je n'ai fait la démo que pour montrer la rotation.


Bonjour, pourriez-vous revoir votre réponse acceptée pour l'adapter à une syntaxe non obsolète pour améliorer la qualité. Votre question est considérée comme un double,
G-Cyrillus

Réponses:


107

Approche alternative: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

2
J'ai pu trouver ceci: generatedcontent.org/post/45384206019/writing-modes . Bien que cela semble si piraté.
Crystal Miller

7
@CrystalMiller et BTW, w3schools peut être une bonne aide, mais ce n'est pas la documentation source / originale (donc il peut manquer certaines choses), le "officiel" est w3.org, ou le plus proche, plus lisible par l'homme est le réseau de développeurs de Mozilla - "MDN" - developer.mozilla.org
jave.web

Il fonctionne dans Chrome, Mozilla et IE Edge mais pas Safari pour Windows.
kushalvm

8
tb-rlest obsolète, veuillez utiliser à la vertical-rlplace.
Jared Chu

3
malheureusement, si le texte vertical est sur le côté gauche de l'écran, la plupart des textes romains sont lus de bas en haut. Et puis de haut en bas si le texte est sur le côté droit de l'écran. Ayant certaines valeurs obsolètes, nous nous retrouvons avec le seul vertical-rl qui est de haut en bas pour le côté droit de l'écran. Pour le côté gauche, nous devons ajouter une transformation: rotate (180deg);
Kir Kanos

80
-webkit-transform: rotate(90deg);

Les autres réponses sont correctes mais elles ont conduit à des problèmes d'alignement. En essayant différentes choses, ce code de morceau CSS a parfaitement fonctionné pour moi.

.vertical{
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    height:20px;
}

9
La propriété 'bottom' n'a pas de valeur sans la propriété 'position'.
Crystal Miller

2
J'avais besoin d'ajouter -ms-transform: rotate (90deg); pour que cela fonctionne dans IE11
patrickbadley

1
selon developer.mozilla.org/en-US/docs/Web/CSS/writing-mode , writing-mode:tb-rl;est obsolète. Utilisez writing-mode:vertical-rlplutôt!
steffen

64

Je recherchais un texte vertical réel et non le texte pivoté en HTML comme indiqué ci-dessous. Je pourrais donc y parvenir en utilisant la méthode suivante.

entrez la description de l'image ici HTML: -

<p class="vericaltext">
Hi This is Vertical Text!
</p>

CSS: -

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
}

JSFiddle! Démo.

Mise à jour: - Si vous avez besoin que les espaces soient affichés, ajoutez la propriété suivante à votre css.

white-space: pre;

Ainsi, la classe css sera

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space: pre;/* this is for displaying whitespaces */
}

JSFiddle! Démo avec espace blanc

Mise à jour 2 (28-JUN-2015)

Puisque ne white-space: pre;semble pas fonctionner (pour cette utilisation spécifique) sur Firefox (à partir de maintenant), changez simplement cette ligne en

white-space: pre-wrap;

Ainsi, la classe css sera

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/
}

Compatible avec JsFiddle Demo FF.


Puis-je aligner le texte verticalement au centre?
Mohammad Saifullah

Je n'ai pas tout à fait compris ce que vous entendez par aligner le centre, mais peut-être que vous pouvez simplement aligner l'élément de conteneur .vericaltextau centre?
Mohd Abdul Mujib

1
Incroyable. Cela devrait être coché en vert à la place. Espérons qu'OP le marquera car il est toujours actif sur SO.
Rahul

: D Vieille réponse froide
Kapil Yadav

J'en ai aussi des chauds et frais: p
Mohd Abdul Mujib

27

Pour faire pivoter le texte de 90 degrés:

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

De plus, il semble que la balise span ne puisse pas être tournée sans être définie sur display: block.


4
<span> doit probablement être avec display: block; pour tourner correctement
Mladen Janjetovic

2
J'ai appliqué ceci à un <div> qui se trouve dans un <td>. Il semble tourner avec succès dans tous les navigateurs. ... ... MAIS, une fois que le div tourne (90 degrés), le td n'élargit pas sa hauteur.
dsdsdsdsd

11

Pour le texte vertical avec des caractères les uns sous les autres dans Firefox, utilisez:

text-orientation: upright;
writing-mode: vertical-rl;


5

Pour afficher le texte en vertical (bas-haut), nous pouvons simplement utiliser:

writing-mode: vertical-lr; 

transform: rotate(180deg);

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}
<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

Notez que nous pouvons ajouter ceci pour assurer la compatibilité du navigateur:

-webkit-transform: rotate(180deg);   
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);

nous pouvons également en savoir plus sur la writing-modepropriété ici sur la documentation Mozilla.


4

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}
<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

entrez la description de l'image ici


Bonjour merci d'avoir essayé de répondre à cette question, pouvez-vous expliquer brièvement comment votre solution résout le problème d'OP?
James Wong - Réintégrer Monica le

3

Je suis nouveau dans ce domaine, cela m'a beaucoup aidé. Changez simplement la largeur, la hauteur, le haut et la gauche pour l'adapter:

.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}

Vous pouvez également aller ici et voir une autre façon de le faire. L'auteur le fait comme ceci:

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}

transform-origin est ce dont j'avais besoin!
xtian

flotter à gauche est ce dont j'avais besoin!
chris

2

la rotation, comme vous l'avez fait, est la voie à suivre - mais notez que tous les navigateurs ne le prennent pas en charge. si vous ne souhaitez pas obtenir une solution multi-navigateurs, vous devrez générer des images pour cela.


2

Peut utiliser la propriété Transform CSS3

.txtdiv{
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
  -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}


2

J'ai réussi à avoir une solution de travail avec ceci:

(J'ai un titre dans une division de classe middleItem)

.middleItem > .title{
    width: 5px;
    height: auto;
    word-break:break-all;
    font-size: 150%;
}

2

Voici un exemple de code SVG que j'ai utilisé pour obtenir trois lignes de texte vertical dans un en-tête de colonne de tableau. D'autres angles sont possibles avec un peu d'ajustement. Je pense que la plupart des navigateurs prennent en charge SVG ces jours-ci.

<svg height="150" width="40">
  <text font-weight="bold" x="-150" y="10" transform="rotate(-90 0 0)">Jane Doe</text>
  <text x="-150" y="25" transform="rotate(-90 0 0)">0/0&nbsp;&nbsp;&nbsp;&nbsp;0/0</text>
  <text x="-150" y="40" transform="rotate(-90 0 0)">2015-06-06</text>
  Sorry, your browser does not support inline SVG.
</svg>

2

Vous pouvez obtenir la même chose avec les propriétés CSS ci-dessous:

writing-mode: vertical-rl;
text-orientation: upright;


1
.vertical-text {
    transform: rotate(90deg);
    transform-origin: left top 0;
    float: left;
}

1
<!DOCTYPE html>
<html>
    <style>
        h2 {
           margin: 0 0 0 0;
           transform: rotate(270deg);
           transform-origin: top left;
           color: #852c98;
           position: absolute;
           top: 200px;
        }
    </style>
    <body>
        <h2>It’s all in the curd</h2>
    </body>
</html>

vous pouvez changer la transformation: rotation (270deg); pour transformer: tourner (90deg); selon les besoins
sachin burnawal

1

Si vous voulez un alignement comme

S
T
A
R
T

Suivez ensuite https://www.w3.org/International/articles/vertical-text/#upright-latin

Exemple:

div.vertical-sentence{
  -ms-writing-mode: tb-rl; /* for IE */
  -webkit-writing-mode: vertical-rl; /* for Webkit */
  writing-mode: vertical-rl;
  
}
.rotate-characters-back-to-horizontal{ 
  -webkit-text-orientation: upright;  /* for Webkit */
  text-orientation: upright; 
}
<div class="vertical-sentence">
  <p><span class="rotate-characters-back-to-horizontal" lang="en">Whatever</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="fr">Latin</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="hi">वर्डप्रेस </span></p>
</div>

Notez que l'hindi a un accent dans mon exemple et qui sera rendu comme un seul caractère. C'est le seul problème que j'ai rencontré avec cette solution.


1

Chez developer.mozilla.org

La propriété CSS d'orientation du texte définit l'orientation des caractères de texte dans une ligne. Il n'affecte que le texte en mode vertical (lorsque le mode d'écriture n'est pas horizontal-tb). Il est utile pour contrôler l'affichage des langues qui utilisent un script vertical, ainsi que pour créer des en-têtes de tableau verticaux.

writing-mode: vertical-rl;
text-orientation: mixed;

Vous pouvez également consulter toute la syntaxe ici

/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

0

Vous pouvez utiliser word-wrap: break-word pour obtenir le texte vertical utiliser après l'extrait de code

HTML:

<div class='verticalText mydiv'>Here is your text</div>

css:

.verticalText {
word-wrap: break-word;
  font-size: 18px;
}
.mydiv {
  height: 300px;
  width: 10px;
}

0

<style>
    #text_orientation{
        writing-mode:tb-rl;
        transform: rotate(90deg);
        white-space:nowrap;
        display:block;
        bottom:0;
        width:20px;
        height:20px;
    }
</style>
</head>
<body>

<p id="text_orientation">Welcome</p>
</body>


0
h1{word-break:break-all;display:block;width:40px;} 

BONJOUR

REMARQUE: Navigateur pris en charge - Navigateur IE (8,9,10,11) - Navigateur Firefox (38,39,40,41,42,43,44) - Navigateur Chrome (44,45,46,47,48) - Safari navigateur (8,9) - navigateur Opera (non pris en charge) - navigateur Android (44)


0

Essayez d'utiliser un fichier SVG, il semble avoir une meilleure compatibilité avec le navigateur et ne cassera pas vos conceptions réactives.

J'ai essayé la transformation CSS et j'ai eu beaucoup de problèmes avec l'origine de la transformation; et a fini par aller avec un fichier SVG. Cela a pris environ 10 minutes et j'ai pu le contrôler un peu avec CSS aussi.

Vous pouvez utiliser Inkscape pour créer le SVG si vous n'avez pas Adobe Illustrator.



0

Tu peux essayer comme ça

-webkit-transform: rotate(270deg);   
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);

0

C'est une solution un peu hacky mais cross browser qui ne nécessite aucun CSS

<div>
  <div>h</div>
  <div>e</div>
  <div>l</div>
  <div>l</div>
  <div>o</div>
<div>

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.