We hebben vandaag een erg korte, maar wel handige webtip voor jullie. We gaan namelijk kijken hoe we op een doodeenvoudige manier tekst verticaal op een website kunnen zetten. Tekst zetten we normaal horizontaal neer, maar er zou een reden kunnen zijn dat je dit niet wilt en een stukje tekst verticaal wilt neerzetten op je website. In de webtip van vandaag gaan we kijken hoe we dit met CSS kunnen realiseren. We gaan 2 manieren bekijken. De eerste is met de CSS3 property 'word-wrap', hiermee zorg je ervoor dat lange woorden worden afgebroken (of niet) als er te weinig ruimte is om deze woorden weer te geven. De tweede manier is met de CSS3 property 'writing-mode'.

Manier 1

Zet het volgende in je CSS stylesheet:

.vertical {
   font-size: 12px;
   position: relative;
   word-wrap: break-word;
   width: .1em;
}

Plaats vervolgens de tekst die je verticaal wilt weergeven in (bijvoorbeeld) een div-element:

<div class="vertical">Deze tekst wordt verticaal weergegeven<div>

Je ziet echter dat deze manier de letters niet 90 graden meedraait. Hier is echter ook een oplossing voor.

Manier 2

.verticala {
   writing-mode: tb-rl;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}

Let wel op dat 'writing-mode' alleen werkt in Internet Explorer, voor de andere (vaakgebruikte) browsers gebruiken we webkit- en moz-transform. Achter writing-mode zien we tb-rl staan. Dit betekent dat de tekst van top-bottom naar right-left wordt weergegeven. Je kunt hier alle mogelijke combinaties van maken.

Demo

Een demo van deze webtip vind je hier. (Tip: Bekijk de demo eens in Internet Explorer én Firefox of Google Chrome en zie het verschil.