Share
In deze snelle tip laat ik je zien hoe je tekst kunt weergeven op een webpagina die van boven naar beneden loopt, in plaats van van links naar rechts (of van rechts naar links). Er zijn twee benaderingen, de ene is beter dan de andere, dus laten we er in springen en een kijkje nemen!
Als u bekend bent met CSS, denkt u dat misschien instinctief transformeren zou de beste manier zijn om dit probleem te benaderen, maar laat me je laten zien waarom het niet ideaal is. We beginnen met wat inhoud (enkele kopjes en een paragraaf), dan passen we een transformeren, samen met een transformatie-oorsprong zodat het roteert vanaf het juiste punt, dan een offset om het op het scherm te houden:
Deze benadering werkt in termen van het roteren van de tekst, maar de documentenstroom wordt niet beïnvloed, dus de h2 in ons geval zit nu bovenop de inhoud eronder. Toch geeft het ons een vrij koel abstract resultaat.
Onze tweede benadering zal het document zo laten stromen dat het trouw blijft aan de dimensies van de h2, ongeacht de richting van de tekst. We gebruiken de eigenschap write-mode, zoals deze:
h2 write-mode: vertical-rl;
In dit geval hebben we het een waarde van gegeven verticale-rl, die een weergaverichting van verticaal toepast, en een tekstrichting van rechts naar links. Kijk eens:
Veel beter. Je zult ook merken dat de cursor verandert, wat niet gebeurt met CSS-transformatie.
Je hebt misschien gemerkt dat we een waarde van hebben gebruikt rl (van rechts naar links) terwijl we gewend zijn om van links naar rechts Latijns schrift te lezen. Maar dat komt omdat we de Blokstroomrichting. als we onze geven h2 een ingestelde hoogtewaarde, je ziet de tekstomslag en je zult beseffen dat we in dit geval eigenlijk de regels nodig hebben om te lezen aan de rechterkant van de pagina links:
Dit leidt ertoe dat we moeten definiëren welke delen van al deze uitlijning moeten stromen en in welke richtingen. Latijnse scripts stromen van boven naar beneden (dit is de Blokstroomrichting). Hun tekst leest van links naar rechts (dit is de Inline stroomrichting). En hun personages hebben een basislijn aan de onderkant terwijl ze naar boven wijzen (dit is de Tekenrichting). Zoals dit:
Andere scripts, zoals in het Arabisch, op Han gebaseerd (zoals Chinees en Japans) en op Mongools gebaseerd, kunnen tekst weergeven met behulp van deze drie stromen in elke combinatie van richtingen.
De specificatie voor de schrijfmodus is ontworpen om alle verschillende scripts en schrijfsystemen van de wereld te ondersteunen. We noemden Mongoolse systemen, bijvoorbeeld, ze worden verticaal weergegeven, maar stromen van links naar rechts.
Andere schrijfmoduswaarden die u vandaag kunt gebruiken, zijn onder meer:
Accentsconagua
verticale-lr waar de tekst verticaal loopt maar begint aan de linkerkant van de container die naar rechts loopt.horizontale-tb waar de tekst horizontaal blijft, maar van boven naar beneden stroomt. Dit (je zult het gemerkt hebben) is standaard gedrag.Hier is nog een ding om naar te kijken: een Chinees gedicht, gebruiken verticale-rl schrijfmodus. De inhoud ervan is goed gepropt, zodat je aan de rechterkant van de pagina begint en naar links leest. Maar wat je misschien zult opmerken is dat de personages nog altijd rechtop staan. Latijnse personages zouden anders georiënteerd zijn met exact dezelfde regels. Dit is opzettelijk:
"De Unicode Standard kent aan elk teken een eigenschap toe en browsers kunnen dit gebruiken om de standaardoriëntatie van een bepaald teken te bepalen." - W3C
U kunt de richting van tekens verder aanpassen met behulp van de text-oriëntatie eigendom.
De CSS-schrijfmodus heeft op het moment van schrijven uitstekende browserondersteuning, hoewel sommige aspecten ervan nog in ontwikkeling zijn. Alles wat je in deze tutorial tegenkomt, kan nu in productie worden gebruikt.
Of u dit nu gebruikt voor praktische of esthetische resultaten, laat ons zien wat u in de opmerkingen hebt gedaan!
