Verticale tekst
Verticale tekst
Verticale tekst
De bedoeling van deze pagina is zonder verdere toelichting wel duidelijk.
Op deze pagina wordt beschreven hoe je teksten verticaal kunt zetten met behulp van CSS.
Het ligt voor de hand om een tekst in een wrapper te zetten en die over 90° te roteren. Op deze pagina is dat zo
gedaan, maar in CSS zou het ook moeten kunnen met de CSS-eigenschap writing-mode.
Toen dit verhaal geschreven werd, ontbrak er helaas nogal wat aan de ondersteuning van writing-mode, daarom
is de hier getoonde werkwijze gebruikt. writing-mode wordt verderop in dit vehaal beschreven.
De code van het voorbeeld bestaat uit CSS (in de <head>) en wat HTML (in de <body>):
<style>
.Kop2L {
transform:rotate(270deg); border:1px solid red;
position:relative; top:20px; text-align:center;
float:left; padding:10px;
font-size:12pt;
font-weight:bold;
color:#900;
text-decoration:underline
}
.Kop2R {
transform:rotate(90deg); border:1px solid red;
position:relative; top:20px; text-align:center;
float:right; padding:10px;
font-size:12pt;
font-weight:bold;
color: #900;
text-decoration:underline
}
</style>
<p class="Kop2L">Verticale tekst</p>
<p class="Kop2R">Verticale tekst</p>
- De aanpak van het voorbeeld
- Zoals je ziet zijn er twee klassen: Kop2Len Kop2R. Beiden zijn identiek behalve:
- Kop2L staat links en heeft daarom float:left. Kop2R staat rechts en heeft daarom float:right.
- In kop2L is de (horizontale) tekst over 90° tegen de klok in gedraaid. Dat is bereikt met transform:rotate(270deg);.
- In kop2R is de (horizontale) tekst over 90° met de klok mee gedraaid. Dat is bereikt met transform:rotate(90deg);.
- De overige dingen dienen alleen voor de opmaak. De rode border zit er om aan te geven waar de klassen zich bevinden. De rotaties worden in CSS altijd uitgevoerd rond het middelpunt. Voor dit geval zouden de rotatie-oorsprong moeten worden verplaatst. Bij tekst moet je dan uitrekenen (of meten) hoeveel die verschuiving moet zijn. Dat is lastig. Als je daarvoor de eigenschap top voor inzet, heb je na een paar keer proberen al een goed resultaat.
- Dit werkt in alle moderne browsers.
- De CSS-eigenschap writing-mode.
- Er zijn vijf mogelijkhden met writing-mode:
- writing-mode: horizontal-tb;
Dit betekent: Tekstregels lopen horizontaal over het papier, van boven naar beneden. Bij het westerse schrift, alsmede bij het Arabisch en Hebreeuws, is dat het geval. Voor Browsers die op dit soort talen staan ingesteld is dit de default-waarde. Je hebt hem in principe niet nodig. - writing-mode: vertical-lr;
Verticale tekst Dit betekent: Regels lopen verticaal over het papier, van rechts naar links. Je kunt dit gebruiken om te tekst verticaal te zetten zoals met Kop2R. - writing-mode: vertical-rl;
Dit zou moeten werken zoals bij Kop2L, maar dat is niet zo. Geen enkele van de grote browsers ondersteunt dit. - writing-mode: sideways-rl;
Dit zou moeten werken zoals bij Kop2R. Alleen FireFox ondersteunt het, andere browsers niet. Het is uit de specificatie verdwenen. - writing-mode: sideways-lr;
Dit zou moeten werken zoals bij Kop2L. Alleen FireFox ondersteunt het, andere browsers niet. Het is uit de specificatie verdwenen.
- writing-mode: horizontal-tb;
- Samenvattend luidt de conclusie: De ondersteuning van writing-mode schiet (nog) te kort. Je kunt het daarom maar beter niet gebruiken. De 'oude' vertrouwde methode met transform:rotate() is veel betrouwbaarder.
