Teksta orientācija - CSS-triki

text-orientationĪpašums CSS pieskaņo tekstu līnijas, strādājot ar vertikāls writing-mode. Būtībā tas pagriež vai nu līniju par 90 ° pulksteņrādītāja kustības virzienā, lai palīdzētu kontrolēt, kā tiek rādītas vertikālās valodas - līdzīgi kā tas, kā text-combine-uprightvertikālā skriptā rotē rakstzīmju grupas teksta rindā, bet pilnas teksta rindiņas.

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

Lai apstrādātu divvirzienu tekstu - bloks, kas satur, piemēram, tekstu no kreisās uz labo pusi un no labās puses uz kreiso, pārbaudiet unicode-bidiīpašumu. Tas tiek apvienots ar directionīpašumu, lai ignorētu to, kā pārlūks nolemj parādīt tekstu.

Sintakse

text-orientation: mixed | upright | sideways

Sākotnējais: mixed
Attiecas uz visiem elementiem, izņemot tabulas rindu grupas, rindas, kolonnu grupas un kolonnas
Mantots: jā
Procenti: n / a
Aprēķinātā vērtība: norādītā vērtība
Animācijas veids: nav animējams

Vērtības

/* 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: Noklusējuma vērtība. Rakstzīmes horizontālā rakstā tiek pagrieztas par 90 ° pulksteņrādītāja virzienā. Vertikālā skripta rakstzīmes tiek parādītas to dabiskajā vertikālajā orientācijā.
upright: Horizontālā skripta rakstzīmes ir iestatītas to dabiskajā horizontālajā vertikālajā stāvoklī, ieskaitot dažus burtus. Tātad, ja vertikālās rakstīšanas režīms var pagriezt teksta līniju tā, lai rakstzīmes būtu sāniski, šī vērtība pašas rakstzīmes pagriezīs par 90 ° to dabiskajā stāvoklī. Ņemiet vērā, ka šī vērtība piesaista directionrekvizītu izmantotajā vērtībā ltr, tas nozīmē, ka visas rakstzīmes tiek apstrādātas tā, it kā tās būtu rakstīšanas režīmā no kreisās uz labo.
sideways: Viss teksts vertikālā rakstīšanas režīmā tiek parādīts uz sāniem, it kā tas būtu horizontālā izkārtojumā, bet visa līnija tiek pagriezta par 90 ° pulksteņrādītāja virzienā.
sideways-right: Dažas pārlūkprogrammas šo vērtību ciena kā aizstājvārdu sidewaysvērtībai, kas saglabāta savietojamībai ar atpakaļejošu datumu.

use-glyph-orientationtika noņemta kā atslēgvārda vērtība 2015. gada decembrī. To izmantoja SVG elementiem, lai definētu SVG īpašības, glyph-orientation-verticalun glyph-orientation-horizontalkuri tagad ir novecojuši. glyph-orientation-verticaltagad ir aizstājvārds text-orientation.

Pārlūkprogrammas atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome	Firefox	IE	Mala	Safari
48	41	Nē	79	10,1 *

Mobilais / planšetdators

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81.	10.0-10.2

Specifikācija

CSS rakstīšanas režīmi, 3. līmenis (redaktora melnraksts)

Vairāk informācijas

Kāpēc vertikālā teksta orientācija ir savstarpējas pārlūkprogrammu saderības murgs? autors Nikhils - rūpīgs text-orientationun writing-mode.
Viegli izveidojiet tekstu uz sāniem, izmantojot Adi Purdila CSS rekvizītu “rakstīšanas režīms”. Papildus lietošanai izpētiet arī dažādas pieejas text-orientation.
2 veidi, kā izveidot vertikālu tekstu CSS, izmantojot WS Toh - tiešāks salīdzinājums starp pieejām, izmantojot writing-modeun text-orientation.
Krisa Koijera teksta pagriešana - pieeja vertikālam tekstam, izmantojot vai transformvietā .writing-modetext-orientation