Je kunt alinea's of de inhoud van tabelcellen uitlijnen naar wens met behulp van de volgende eigenschappen. Deze eigenschappen kunnen ook worden toegepast op alle andere elementen waar een gedefinieerde of berekende hoogte of breedte aan kan worden toegewezen.
Inspringen van de eerste regel
We beginnen met de eigenschap text-indent. Hiermee kun je bepalen hoe de eerste regel van een alinea moet worden ingesprongen. Ook het uitspringen naar links is mogelijk door een negatieve waarde te gebruiken voor text-indent. (Uitgebreide informatie over wanneer een extreme uitspringing zinvol kan zijn, volgt later). Er wordt een numerieke waarde verwacht.
Een voorbeeld:
.alinea { text-indent: 2em; }
Zo ziet het eruit in de browser:
Als je een negatieve waarde gebruikt, wordt de tekst uitgesprongen in de eerste regel.
.alinea {
text-indent: -2em;
}
En hier is natuurlijk weer het resultaat in de browser te zien:
Zoals je ziet is dat dus ook mogelijk. Let echter bij het definiëren van uitspringingen op dat de inhoud nog steeds leesbaar is als dat de bedoeling is. De text-indent-eigenschap kan namelijk ook interessant worden in relatie tot zoekmachineoptimalisatie. Soms wil je bijvoorbeeld liever afbeeldingen in plaats van tekst tonen.
Maar als de tekst wel beschikbaar moet zijn voor zoekmachines, sta je voor een dilemma. Dit dilemma kan worden opgelost door het gebruik van text-indent. Want deze eigenschap maakt bekend dat je teksten kunt verplaatsen. Je kunt teksten dus uit het zicht van de bezoekers laten verdwijnen.
Voordeel van de text-indent-methode: De tekst die vervangen moet worden door een afbeelding blijft ongewijzigd aanwezig in de broncode.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Met deze syntax wordt een achtergrondafbeelding toegewezen aan het h1-element. (De background-eigenschap werd al eerder in deze reeks geïntroduceerd). Met text-indent: -99999px wordt de tekst van de kop met 99999 pixels naar links verschoven. De tekst is dus niet meer zichtbaar. Nu wordt enkel nog de afbeelding weergegeven.
Als je de stylesheet uitschakelt, is de tekst echter weer normaal te zien.
De regelhoogte instellen
Over de regelhoogte had ik al eens gewezen in verband met de algemene eigenschap font. Nu gaan we iets dieper in op dit onderwerp. De definitie van de regelhoogte in combinatie met de lettergrootte (font-size) is interessant.
Je kunt de regelhoogte instellen met de eigenschap line-height. Numerieke waarden zijn toegestaan. Ook procentuele waarden zijn mogelijk. Deze verwijzen dan naar de lettergrootte van het element waarvoor de regelhoogte is opgegeven. Let bij het instellen van de regelhoogte op het volgende: het kan gebeuren dat een browser/apparaat voorrang geeft aan de opgave van de regelhoogte en elementen afsnijdt als deze hoger zijn. Vooral bij afbeeldingen kan dit vervelend zijn. Test dus de resultaten voordat je de website online zet.
Het volgende voorbeeld laat zien hoe line-height kan worden toegepast.
<p style="line-height:1.4em; font-size:1em;">Soms heb je een geweldig ontwerp gemaakt, maar ontbreken de foto's nog, en als je alleen maar lege frames gebruikt, ziet het ontwerp er toch behoorlijk naakt uit. Het kan ook anders:<br /> In deze videocursus laat ik je de beste webadressen zien om snel aan gratis passende vervangende afbeeldingen te komen. Een geweldige lijst vind je bijvoorbeeld <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">hier</a>.</p> <p style="line-height:2em;font-size:1em;">Soms heb je een geweldig ontwerp gemaakt, maar ontbreken de foto's nog, en als je alleen maar lege frames gebruikt, ziet het ontwerp er toch behoorlijk naakt uit. Het kan ook anders:<br /> In deze videocursus laat ik je de beste webadressen zien om snel aan gratis passende vervangende afbeeldingen te komen. Een geweldige lijst vind je bijvoorbeeld <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">hier</a>.</p> <p style="line-height:1em; font-size:1em;">Soms heb je een geweldig ontwerp gemaakt, maar ontbreken de foto's nog, en als je alleen maar lege frames gebruikt, ziet het ontwerp er toch behoorlijk naakt uit. Het kan ook anders:<br /> In deze videocursus laat ik je de beste webadressen zien om snel aan gratis passende vervangende afbeeldingen te komen. Een geweldige lijst vind je bijvoorbeeld <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">hier</a>.</p>
Hier werden drie tekstblokken gedefinieerd, elk met een andere regelhoogte.
Zoals je ziet kan de leesbaarheid van doorlopende tekst sterk worden beïnvloed door de regelhoogte. Wees dus voorzichtig met line-height.
Uiteindelijk rijst natuurlijk de vraag welke regelhoogte je eigenlijk moet kiezen. Gewoonlijk wordt uitgegaan van regelhoogtes tussen 130 en 150 procent.
p {
line-height: 150%;
}
Uiteindelijk hangt goede leesbaarheid vooral af van de breedte van het lettertype. Hier geldt: de regelhoogte moet des te groter zijn naarmate de tekstregels langer zijn. Test dus zeker de pagina om ervoor te zorgen dat de leesbaarheid behouden blijft.
Horizontale tekstuitlijning
Met de eigenschap text-align wordt de horizontale uitlijning van tekstblokken en andere doorlopende of inline-elementen in blokelementen bepaald. De volgende waarden kunnen worden ingesteld voor text-align:
• left – links uitlijnen
• right – rechts uitlijnen
• center – gecentreerd
• justify – uitlijnen als blok
Opnieuw een voorbeeld:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>En zo ziet het resultaat eruit in de browser:
Houd er rekening mee dat text-align niet alleen betrekking heeft op tekstinhoud. De eigenschap geldt daadwerkelijk voor alle inline-elementen. Als bijvoorbeeld een afbeelding wordt ingesloten, geldt de definitie van text-align ook voor dit element.
Nog een aanwijzing: text-align zou – volgens de officiële CSS-specificatie – geen invloed moeten hebben op blokelementen. (Hoewel er zeker browsers zijn die dit ook toepassen op blokelementen). Als je blokelementen wilt uitlijnen, gebruik dan in die gevallen de eerder genoemde margin-eigenschappen.
