godt webdesign handler ofte om god typografi. Da så meget af en websides indhold præsenteres som tekst, er det en vigtig færdighed at have som webdesigner at være i stand til at style den tekst, så den er både attraktiv og effektiv. Desværre har vi ikke det samme niveau af typografisk kontrol online, som vi udskriver. Det betyder, at vi ikke altid kan stile tekst på et websted på samme måde som vi kunne gøre det i et trykt stykke.
En almindelig afsnitstil, som du ofte ser på tryk (og som vi kan genskabe online), er hvor den første linje i dette afsnit er indrykket en faneblad. Dette giver læserne mulighed for at se, hvor et afsnit begynder, og et andet slutter.
Du ser ikke denne visuelle stil så meget på websider, fordi browsere som standard viser afsnit med plads under dem som en måde at vise, hvor en slutter, og en anden begynder, men hvis du vil style en side for at have det printinspireret indrykningsstil på afsnit kan du gøre det med tekstindryk stil ejendom.
Syntaksen for denne egenskab er enkel. Sådan tilføjer du en tekstindrykning til alle afsnit i et dokument.
p {
tekstindryk: 2em;
}
Tilpasning af indrykningerne
En måde du kan specificere nøjagtigt de afsnit, der skal indrykkes, kan du føje en klasse til de afsnit, du vil have indrykket, men det kræver, at du redigerer hvert afsnit for at tilføje en klasse til det. Det er ineffektivt og følger ikke HTML-kodning bedste praksis.
I stedet bør du overveje, hvornår du indrykker afsnit. Du indrykker afsnit, der følger direkte efter et andet afsnit. For at gøre dette kan du bruge den tilstødende søskendevælger. Med denne vælger vælger du hvert afsnit, der straks efterfølges af et andet afsnit.
p + p {
tekstindryk: 2em;
}
Da du indrykker den første linje, skal du også sørge for, at dine afsnit ikke har noget ekstra mellemrum mellem dem (hvilket er browserens standard). Stilistisk set skal du enten have mellemrum mellem afsnit eller indrykning af første linje, men ikke begge dele.
p {
margin-bund: 0;
polstring-bund: 0;
}
p + p {
margin-top: 0;
polstring-top: 0;
}
Negative indrykninger
Du kan også bruge tekstindryk egenskab sammen med en negativ værdi for at få starten på en linje til at gå til venstre i modsætning til højre som et normalt indryk. Du kan gøre dette, hvis en linje begynder med et anførselstegn, så citattegnet vises i lille margen til venstre for afsnittet, og bogstaverne i sig selv danner stadig en god venstre justering.
Sig for eksempel, at du har et afsnit, der er en efterkommer af et blockquote, og at du ønsker, at det skal være negativt indrykket. Du kan skrive denne CSS:
blockquote p {
tekstindryk: -.5em;
}
Dette ville give starten på afsnittet, som formentlig inkluderer åbningstegnet, der flyttes let til venstre for at skabe hængende tegnsætning.
Med hensyn til margener og polstring
Ofte i webdesign bruger du margen- eller polstringsværdier at flytte elementer og skabe hvidt rum. Disse egenskaber fungerer dog ikke for at opnå den indrykkede afsniteffekt. Hvis du anvender en af disse værdier på afsnittet, placeres hele teksten i dette afsnit, inklusive hver linje, i stedet for kun den første linje.