Kierunek tekstu w pionie


106

Próbowałem, aby tekst był przesuwany w kierunku pionowym, tak jak możemy to zrobić w tabelach ms-word, ale do tej pory byłem w stanie zrobić tylko TO ... z czego nie jestem zadowolony, ponieważ jest to obrócone pudełko ... Czy nie Czy istnieje sposób na uzyskanie rzeczywistego tekstu kierunku pionowego?

W wersji demonstracyjnej ustawiłem obrót tylko na 305 stopni, co nie powoduje pionizacji tekstu. 270degwill, ale zrobiłem demo tylko po to, aby pokazać rotację.


Witaj, czy mógłbyś przejrzeć zaakceptowaną odpowiedź i dopasować ją do nieaktualnej składni w celu poprawy jakości. Twoje pytanie jest traktowane jako duplikat,
G-Cyrillus

Odpowiedzi:


107

Alternatywne podejście: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

2
Udało mi się znaleźć to: generatedcontent.org/post/45384206019/writing-modes . Chociaż wydaje się takie hacky.
Crystal Miller

7
@CrystalMiller i BTW, w3schools może być dobrym pomocnikiem, ale nie jest to dokumentacja źródłowa / oryginalna (więc może przeoczyć pewne rzeczy), „oficjalna” to w3.org lub najbliższa, bardziej czytelna dla człowieka to sieć programistów
Mozilli

Działa w Chrome, Mozilla i IE Edge, ale nie Safari dla Windows.
kushalvm

8
tb-rljest przestarzały, użyj vertical-rlzamiast niego.
Jared Chu,

3
niestety, jeśli tekst pionowy znajduje się po lewej stronie ekranu, większość tekstów łacińskich czyta się od dołu do góry. A następnie od góry do dołu, jeśli tekst znajduje się po prawej stronie ekranu. Po wycofaniu niektórych wartości otrzymujemy jedyny vertical-rl, który jest od góry do dołu po prawej stronie ekranu. Po lewej stronie musimy dodać transformację: rotate (180deg);
Kir Kanos,

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

Pozostałe odpowiedzi są poprawne, ale doprowadziły do ​​pewnych problemów z wyrównaniem. Próbując różnych rzeczy, ten kod CSS działał idealnie dla mnie.

.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
Właściwość „bottom” nie ma wartości bez właściwości „position”.
Crystal Miller

2
Musiałem dodać -ms-transform: rotate (90deg); aby to działało w IE11
patrickbadley

1
według developer.mozilla.org/en-US/docs/Web/CSS/writing-mode , writing-mode:tb-rl;nie jest zalecane. Użyj writing-mode:vertical-rlzamiast tego!
steffen

64

Szukałem rzeczywistego tekstu pionowego, a nie obróconego tekstu w HTML, jak pokazano poniżej. Mogłem więc to osiągnąć stosując następującą metodę.

wprowadź opis obrazu tutaj 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! Próbny.

Aktualizacja: - Jeśli chcesz, aby białe znaki były wyświetlane, dodaj następującą właściwość do swojego css.

white-space: pre;

Tak więc klasa css powinna być

.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! Demo ze spacjami

Aktualizacja 2 (28 czerwca 2015 r.)

Ponieważ white-space: pre;wydaje się, że nie działa (do tego konkretnego zastosowania) w przeglądarce Firefox (na razie), po prostu zmień tę linię na

white-space: pre-wrap;

Tak więc klasa css powinna być

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

Kompatybilny z JsFiddle Demo FF.


Czy mogę wyrównać tekst do środka w pionie?
Mohammad Saifullah

Nie do końca zrozumiałem, co masz na myśli, wyrównując środek, ale może możesz po prostu wyrównać element kontenera .vericaltextdo środka?
Mohd Abdul Mujib,

1
Niesamowite. Zamiast tego powinno być zaznaczone na zielono. Miejmy nadzieję, że OP zaznaczy to, ponieważ nadal jest aktywny w SO.
Rahul

: D Stara zimna odpowiedź
Kapil Yadav

Mam też gorące i świeże: p
Mohd Abdul Mujib,

27

Aby obrócić tekst o 90 stopni:

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

Wygląda również na to, że znacznika span nie można obrócić bez ustawienia wyświetlania: blok.


4
<span> prawdopodobnie musi być z display: block; obracać się prawidłowo
Mladen Janjetovic

2
Zastosowałem to do <div>, który znajduje się wewnątrz <td>. Wygląda na to, że pomyślnie obraca się we wszystkich przeglądarkach. ... ... ALE, gdy element div obraca się (o 90 stopni), td nie zwiększa swojej wysokości.
dsdsdsdsd

11

W przypadku tekstu pionowego ze znakami znajdującymi się jeden pod drugim w przeglądarce Firefox:

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


5

Aby wyświetlić tekst w pionie (od dołu do góry), możemy po prostu użyć:

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>

Zauważ, że możemy to dodać, aby zapewnić zgodność z przeglądarkami:

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

możemy również przeczytać więcej o writing-modewłaściwościach tutaj w dokumentach Mozilli.


4

#myDiv{
text-align: center;
}

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

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

</div>

wprowadź opis obrazu tutaj


Witam, dziękuję za próbę odpowiedzi na to pytanie, czy możesz pokrótce wyjaśnić, w jaki sposób twoje rozwiązanie rozwiązuje problem OP?
James Wong - Przywróć Monikę

3

Jestem w tym nowy, bardzo mi to pomogło. Po prostu zmień szerokość, wysokość, górę i lewo, aby dopasować:

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

Możesz także przejść tutaj i zobaczyć inny sposób, aby to zrobić. Autor robi to tak:

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

transform-origin jest tym, czego potrzebowałem!
xtian

pływak w lewo jest tym, czego potrzebowałem!
chris

2

rotacja, tak jak ty, jest drogą do zrobienia - ale pamiętaj, że nie wszystkie przeglądarki to obsługują. jeśli nie chcesz mieć rozwiązania obsługującego wiele przeglądarek, musisz wygenerować do tego obrazy.


2

Może używać właściwości 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

Udało mi się mieć działające rozwiązanie z tym:

(Mam tytuł w obrębie elementu div klasy middleItem)

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

2

Oto przykład kodu SVG, którego użyłem do umieszczenia trzech wierszy tekstu pionowego w nagłówku kolumny tabeli. Możliwe są inne kąty przy odrobinie poprawek. Uważam, że obecnie większość przeglądarek obsługuje format SVG.

<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

Możesz osiągnąć to samo za pomocą poniższych właściwości CSS:

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>

możesz zmienić transformację: obróć (270 stopni); przekształcić: obrócić (90 stopni); zgodnie z wymaganiami
sachin burnawal

1

Jeśli chcesz wyrównanie, takie jak

S
T
A
R
T

Następnie postępuj zgodnie z https://www.w3.org/International/articles/vertical-text/#upright-latin

Przykład:

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>

Zauważ, że w moim przykładzie hindi ma akcent, który zostanie wyrenderowany jako pojedynczy znak. To jedyny problem, z jakim miałem do czynienia w przypadku tego rozwiązania.


1

Z developer.mozilla.org

Właściwość CSS orientacji tekstu określa orientację znaków tekstu w linii. Wpływa tylko na tekst w trybie pionowym (gdy tryb-pisania nie jest ustawiony na poziomy-tb). Jest to przydatne do kontrolowania wyświetlania języków używających skryptu pionowego, a także do tworzenia pionowych nagłówków tabel.

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

Możesz również przejrzeć całą składnię tutaj

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

Możesz użyć zawijania wyrazów: słowo przerwania, aby uzyskać tekst pionowy, użyj następującego skrawka

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

DZIEŃ DOBRY

UWAGA: Obsługiwana przeglądarka - przeglądarka IE (8,9,10,11) - przeglądarka Firefox (38,39,40,41,42,43,44) - przeglądarka Chrome (44,45,46,47,48) - Safari przeglądarka (8,9) - przeglądarka Opera (nieobsługiwana) - przeglądarka Android (44)


0

Spróbuj użyć pliku SVG, wydaje się, że ma lepszą zgodność z przeglądarkami i nie zepsuje Twoich responsywnych projektów.

Próbowałem transformacji CSS i miałem dużo problemów z pochodzeniem transformacji; i skończyło się na pliku SVG. Zajęło mi to około 10 minut i mogłem to trochę kontrolować za pomocą CSS.

Możesz użyć Inkscape do stworzenia SVG, jeśli nie masz programu Adobe Illustrator.



0

Możesz spróbować w ten sposób

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

0

Jest to trochę hacky, ale rozwiązanie obsługujące wiele przeglądarek, które nie wymaga CSS

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.