Tekstin suunta - CSS-temppuja | CSS-almanakka 2025

text-orientationOmaisuus CSS suoristaa tekstin mukaisesti työskenneltäessä pystysuora writing-mode. Pohjimmiltaan se kiertää joko viivaa 90 ° myötäpäivään auttaakseen hallitsemaan pystysuorien kielten näyttämistä - aivan kuten tapa text-combine-uprightkiertää merkkiryhmiä tekstirivillä pystysuorassa komentosarjassa, mutta kokonaisia tekstirivejä varten.

.element ( text-orientation: mixed; writing-mode: vertical-rl; )

Jos haluat käsitellä kaksisuuntaista tekstiä - lohko, joka sisältää esimerkiksi sekä vasemmalta oikealle että oikealta vasemmalle -, tarkista unicode-bidiominaisuus. Se yhdistetään directionominaisuuteen ohittamaan, miten selain päättää näyttää tekstin.

Syntaksi

text-orientation: mixed | upright | sideways

Varhainen: mixed
Koskee kaikkia elementtejä paitsi taulukkoriviryhmät, rivit, sarakeryhmät ja sarakkeet
Peritty: kyllä
Prosenttiosuudet: n / a
Laskettu arvo: määritetty arvo
Animaatiotyyppi: ei animoitava

Arvot

/* Keyword values */ text-orientation: mixed; /* default */ text-orientation: upright; text-orientation: sideways; text-orientation: sideways-right; /* Global values */ text-orientation: inherit; text-orientation: initial; /* mixed */ text-orientation: unset;

mixed: Oletusarvo. Vaakakirjoituksen merkit kiertyvät 90 ° myötäpäivään. Pystysuuntaisen skriptin merkit näytetään luonnollisessa pystysuorassa suunnassa.
upright: Vaakakirjoituksen merkit asetetaan luonnolliseen vaakasuoraan pystyasentoonsa, mukaan lukien joitain kuvioita. Joten jos pystysuuntainen kirjoitustila voi kiertää tekstiriviä siten, että merkit ovat sivusuunnassa, tämä arvo kääntää merkit itse 90 ° luonnolliseen asentoonsa. Huomaa, että tämä arvo pakottaa directionominaisuuden käytettyyn arvoon ltr, mikä tarkoittaa, että kaikkia merkkejä käsitellään ikään kuin ne olisivat vasemmalta oikealle kirjoitustilassa.
sideways: Kaikki teksti pystysuorassa kirjoitustilassa näytetään sivuttain, ikään kuin se olisi vaakasuunnassa, mutta koko viiva on käännetty 90 ° myötäpäivään.
sideways-right: Jotkut selaimet kunnioittavat tätä arvoa aliaksena sidewaysarvolle, jota säilytetään taaksepäin yhteensopivuuden takaamiseksi.

use-glyph-orientationpoistettiin avainsanan arvona joulukuussa 2015. Sitä käytettiin SVG-elementeissä SVG-ominaisuuksien määrittelemiseen glyph-orientation-verticalja glyph-orientation-horizontaljotka ovat nyt vanhentuneita. glyph-orientation-verticalon nyt aliaksen kohteelle text-orientation.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi	Firefox	IE	Reuna	Safari
48	41	Ei	79	10,1 *

Matkapuhelin / tabletti

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	10,0-10,2

Erittely

CSS-kirjoitustilat, taso 3 (toimittajan luonnos)

Lisää tietoa

Miksi tekstin pystysuunta on painajainen selainten yhteensopivuudelle? Nikhil - perusteellinen selitys text-orientationja writing-mode.
Luo sivuteksti helposti Adi Purdilan CSS-ominaisuuden kirjoitustilassa - Tutustu käytön lisäksi erilaisiin lähestymistapoihin text-orientation.
2 tapaa luoda pystysuoraa tekstiä CSS: ssä WS Tohin avulla - Suorempi vertailu lähestymistapojen välillä käyttäen writing-modeja text-orientation.
Chris Coyierin tekstin kierto - lähestymistapa pystytekstiin käyttämällä transform- writing-modetai -merkkiä text-orientation.