Orientacija į tekstą - CSS-gudrybės

text-orientationCSS išlygina teksto linijos nuosavybė dirbant su vertikali writing-mode. Iš esmės, ji pasuka liniją 90 ° pagal laikrodžio rodyklę, kad padėtų kontroliuoti, kaip rodomos vertikalios kalbos - panašiai kaip tai, kaip text-combine-uprightvertikaliame scenarijuje sukasi simbolių grupės teksto eilutėje, bet visos teksto eilutės.

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

Norėdami tvarkyti dvikryptį tekstą - bloką, kuriame, pavyzdžiui, yra tekstas iš kairės į dešinę ir iš dešinės į kairę, patikrinkite unicode-bidinuosavybę. Jis kartu su directionnuosavybe pakeis tai, kaip naršyklė nusprendžia rodyti tekstą.

Sintaksė

text-orientation: mixed | upright | sideways

Pradinis: mixed
Taikoma: visiems elementams, išskyrus lentelių eilių grupes, eilutes, stulpelių grupes ir stulpelius
Paveldima: taip
Procentai: nėra
Apskaičiuota vertė: nurodyta vertė
Animacijos tipas: nėra animacinis

Vertybės

/* 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: Numatytoji reikšmė. Simboliai horizontaliu scenarijumi pasukami 90 ° pagal laikrodžio rodyklę. Vertikalaus scenarijaus simboliai rodomi natūralia vertikalia orientacija.
upright: Horizontalaus scenarijaus simboliai nustatomi natūralioje horizontalioje vertikalioje padėtyje, įskaitant kai kuriuos simbolius. Taigi, kai vertikalaus rašymo režimas gali pasukti teksto eilutę taip, kad simboliai būtų šonu, ši reikšmė pačius simbolius pasuks 90 ° į natūralią padėtį. Atminkite, kad ši vertė verčia directionypatybę į naudojamą reikšmę ltr, o tai reiškia, kad visi simboliai traktuojami taip, tarsi jie būtų rašymo iš kairės į dešinę režimu.
sideways: Visas tekstas vertikalaus rašymo režimu rodomas į šoną, lyg būtų išdėstytas horizontaliai, bet visa eilutė pasukta 90 ° pagal laikrodžio rodyklę.
sideways-right: Kai kurios naršyklės šią vertę vertina kaip sidewaysatgalinio suderinamumo vertės slapyvardį .

use-glyph-orientationbuvo pašalinta kaip raktinio žodžio reikšmė 2015 m. gruodžio mėn. Ji buvo naudojama SVG elementuose apibrėžiant SVG savybes glyph-orientation-verticalir glyph-orientation-horizontalkurios dabar nebenaudojamos. glyph-orientation-verticaldabar yra slapyvardis text-orientation.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“	„Firefox“	T.Y	Briauna	„Safari“
48	41	Ne	79	10,1 *

Mobilusis / planšetinis kompiuteris

„Android Chrome“	„Android Firefox“	„Android“	„iOS Safari“
88	85	81	10.0-10.2

Specifikacija

3 lygio CSS rašymo režimai (redaktoriaus projektas)

Daugiau informacijos

Kodėl vertikali teksto orientacija yra kryžminio naršyklės suderinamumo košmaras? pateikė Nikhilas - išsamus text-orientationir writing-mode.
Lengvai sukurkite tekstą į šoną naudodami „rašymo režimo“ CSS nuosavybę, kurią sukūrė Adi Purdila - be naudojimo, ištirkite įvairius metodus text-orientation.
2 būdai, kaip sukurti vertikalų tekstą CSS, naudojant WS Toh - Tiesioginis metodų, naudojant writing-modeir ir, palyginimas text-orientation.
Chriso Coyierio teksto pasukimas - požiūris į vertikalųjį tekstą naudojant transformvietoj writing-modearba text-orientation.