Share
I dette raske tipset skal jeg vise deg hvordan du viser tekst på en nettside som går fra topp til bunn, i stedet for venstre til høyre (eller høyre til venstre). Det er to tilnærminger, en som er bedre enn den andre, så la oss hoppe inn og ta en titt!
Hvis du er kjent med CSS, kan du tenke det instinktivt forvandle ville være den beste måten å nærme seg dette problemet, men la meg vise deg hvorfor det ikke er ideelt. Vi starter med litt innhold (noen overskrifter og et avsnitt), så søker vi en forvandle, sammen med en forvandle-opprinnelse slik at den roterer fra riktig punkt, så en kompensasjon for å holde den på skjermen:
Denne tilnærmingen fungerer når det gjelder å rotere teksten, men dokumentflyten påvirkes ikke, så h2 i vårt tilfelle sitter nå på toppen av innholdet under den. Likevel gir det oss ganske kult abstrakt resultat.
Vår andre tilnærming vil holde dokumentflyten slik at den fortsatt er tro mot dimensjonene til h2, uavhengig av tekstretningen. Vi bruker egenskapen for skrivemodus, slik:
h2 skriftlig modus: vertikal-rl;
I dette tilfellet har vi gitt det en verdi av vertical-rl, som bruker en vertikal displayretning og en tekstretning fra høyre til venstre. Ta en titt:
Mye bedre. Du vil også merke at markøren endres også, noe som ikke skjer med CSS-transformasjon.
Du har kanskje lagt merke til at vi har brukt en verdi på rl (høyre til venstre) mens vi er vant til å lese latinsk skript venstre til høyre. Men det er fordi vi har endret Blokkstrømretning. hvis vi gir vår h2 en sett høydeverdi, vil du se tekstbryteren og du vil innse at i dette tilfellet trenger vi faktisk linjene å lese fra høyre på siden til venstre:
Dette fører til at vi trenger å definere hvilke biter av alt denne justeringen må flyte og i hvilke retninger. Latinbaserte skript flyter fra topp til bunn (dette er Blokkstrømretning). Deres tekst leser fra venstre til høyre (dette er Inline Flow Direction). Og deres tegn har en grunnlinje på bunnen mens du peker oppover (dette er Tegnretning). Som dette:
Andre skript, som arabisk-basert, Han-basert (som kinesisk og japansk) og mongolsk-basert, kan vise tekst ved å bruke disse tre strømningene i en hvilken som helst kombinasjon av retninger.
Skriftmodus-spesifikasjonen ble designet for å støtte alle de forskjellige skript og skrivesystemer i verden. Vi nevnte mongolsk baserte systemer, for eksempel noen de vises vertikalt, men flyter venstre til høyre.
Andre skrivemodusverdier, som du kan bruke i dag, inkluderer:
Accentsconagua
vertical-lr der teksten løper vertikalt, men begynner til venstre for beholderen som kjører til høyre.horisontal-tb der teksten forblir horisontal, men strømmer fra topp til bunn. Dette (du har lagt merke til) er standard oppførsel.Her er en ting å se på: et kinesisk dikt, bruk av vertical-rl skrivemodus. Innholdet er flatt rett, slik at du begynner på høyre side og leser til venstre. Men det du kanskje merker er at tegnene fremdeles er orientert oppreist. Latinske tegn vil være orientert annerledes med disse nøyaktig samme regler. Dette er bevisst:
"Unicode Standard tilordner en egenskap til hvert tegn og nettlesere kan bruke dette til å bestemme standardretningen til et gitt tegn." - W3C
Du kan videre skreddersy retningen av tegn ved å bruke tekst-orientering eiendom.
CSS skrivemodus har utmerket nettleserstøtte på skrivingstidspunktet, selv om enkelte aspekter av det fortsatt er i utvikling. Alt du har sett meg gjør i denne opplæringen kan brukes i produksjon akkurat nå.
Enten du bruker dette til praktiske eller estetiske resultater, la oss se hva du har gjort i kommentarene!
