Tervetuloa

pystysuuntaisen kirjoituksen testinettisivulle!

Tämä sivu ky­häis­tiin ka­saan joulu­kuussa 2020, kun mietimme, miten web-stan­dardit sekä web-selai­met kohte­levat nykyi­sin kirjoi­tus­järjes­telmiä, joi­ta kir­joi­te­taan päin­vas­toin kun län­si­mais­sa y­lei­ses­ti: yl­hääl­tä alas, ja joko va­sem­mal­ta oi­ke­al­le tai oi­ke­al­ta va­sem­mal­le.

Etkö tykkää tästä?



CSS:ssä on pro­per­ty ni­mel­tään writing-mode, jonka arvo voi olla horizontal-tb (oletus­arvo, vasem­malta oike­alle ja yl­hääl­tä alas), vertical-rl (yl­hääl­tä alas, oike­alta vasem­malle), tai vertical-lr (yl­hääl­tä alas, vasem­malta oike­alle). Tämän sivun tyyli­tiedos­tossa on asetettu writing-modeksi vertical-lr.

Lisäksi on olemassa property text-orientation, jolla voi olla arvona:

Vertai­lun vuoksi vähän kiina­lai­sta teks­tiä sekä latina­lai­sia aakko­sia samas­sa kap­pa­lees­sa: 《施氏食獅史》 石室詩士施氏,嗜獅,誓食十獅。氏時時適市視獅。十時,適十獅適市。是時,適施氏適市。氏視是十獅,恃矢勢,使是十獅逝世。氏拾是十獅屍,適石室。石室濕,氏使侍拭石室。石室拭,氏始試食是十獅。食時,始識是十獅屍,實十石獅屍。試釋是事。

text-orientation:


Sellaista asetusta en ole löytänyt, jossa kirjai­met kään­net­täi­siin 90 astetta vasta­päivään. Tällä sivulla käyte­tään arvoa upright, jotta kirjai­met oli­sivat tuttun tapaan pystyssä. Lukeminen on silti varsin hankalaa. Tavu­vii­vat eivät näkö­jään il­mes­ty pysty­suun­tai­sessa teks­tissä.

Firefoxini kehi­ttäjä­kon­soli ehdotti, että nämä propertyt asetetaan :root-pseudo­elemen­tille body-elementin sijaan, mutta minulla toimi ihan hyvin että asetan sen body-elemen­tille.

Kiinan- ja japanin­kieliset teks­tithän perin­teisesti käyt­tivät pysty­suun­taista kirjoi­tusta, jossa teksti­rivit ladotaan oikealta vasem­malle, ja jossa välillä esiintyvä latina­lainen teksti kään­netään 90° myötä­päivään. Tukea tälle näyttää selvästi olevan jonkin verran.

Teksti­kentät­kin ovat jois­sain selai­missa pysty­suun­taisia, toi­sissa vaaka­suun­taisia, kun ennen näin ei ollut: Tällä het­kellä tyyli­tyk­sessä on joi­tain ongelmia: width-tyyli­attri­buutti tosiaan säätää sen leveyttä sivun, eikä tekstin, suun­tai­sesti. Kuu­lin myös hu­hun, että pysty­suun­tai­set teks­ti­ken­tät ei­vät toi­mi ol­len­kaan Chro­mes­sa.

Tyyli­tyk­sessä pysty­suun­tai­sella sivulla pitää muistaa käyttää suuntien "left", "right", "top" ja "bottom" sijaan suuntia "inline-start", "inline-end", "block-start" ja "block-end", jotka sopi­vasti päte­vät sekä pysty- että vaaka­suun­tai­silla sivuilla. Aiempana olevilla napeilla voikin muuttaa sivun vaaka­suun­tai­seksi.

Yhteen­vetona: tämä on mielen­kiin­toinen kokeilu itsensä vuoksi, mutta latina­lai­selle teks­til­le tämä on aika jär­je­tön luku­suunta.

Kuva tästä nettisivusta, kirjaimet oikein päin, asetettu ylhäältä alas sarakkeisiin, jotka on ladottu vasemmalta oikealle. Kaikki napit ovat myös pystysuuntaisia.
Tämän sivuston teksti sellaisena, miltä se näyttää Firefoxin versiossa 83.