Saate lõike või tabeliridade sisu asetada soovitud asukohta järgmiste atribuutide abil. Neid atribuute saab rakendada ka kõigile teistele elementidele, mis on määratletud või kalkuleeritud kõrguse või laiusega.
Esimene reavahe
Alustame atribuudiga text-indent. See määrab, kuidas lõigu esimene rida tuleb taandada. Vasakule joondamine on samuti võimalik, kasutades negatiivset väärtust atribuudile text-indent. (Täpsemad juhised selle kohta, millal ekstreemne taandamine võib olla otstarbekas, järgnevad pärast seda). Oodatakse numbrilist väärtust.
Näide:
.lõige { text-indent: 2em; }
Brauseris näeb see välja järgmiselt:
Kui kasutate negatiivset väärtust, tekib teksti taandumine esimeses rea tekstis.
.lõige {
text-indent: -2em;
}
Ja siin on muidugi tulemus brauseris:
Nii on ka võimalik. Taandamise määratluse tegemisel arvestage, et sisu oleks siiski loetav, kui see on soovitud. Tegelikult võib text-indent olla huvitav ka otsingumootori optimeerimise seisukohast. Mõnikord eelistatakse näidata pilte teksti asemel.
Kuid kui soovite, et tekst oleks siiski otsingumootorite jaoks kättesaadav, seisate alguses silmitsi dilemmaga. Seda dilemma saab lahendada atribuudi text-indent kasutamisega. See atribuut võimaldab teil tekstiuümberpaigutust teha. Nii saate teha teksti külastajate vaateväljast märkamatuks.
text-indent variandi eelis: Pildi asemel kuvatav tekst on lähtekoodis muutumatu.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Selle süntaksi abil määratakse h1 elemendile taustagraafika. (Selle seeria jooksul on juba tutvustatud background atribuuti). Atribuudi text-indent: -99999px abil nihutatakse pealkirja tekst 99999 piksli võrra vasakule. Tekst ei ole seega nähtav. Kuvatakse nüüd ainult pilt.
Kui keelate stiililehe, on tekst aga jälle täiesti nähtav.
Ridade kõrguse määramine
Ridade kõrgusest olen juba varem rääkinud seoses üldise font atribuudiga. Siinkohal keskendume sellele teemale põhjalikumalt. Ridade kõrguse määratlus koos kirja suuruse (font-size) abil on huvitav.
Ridade kõrgust saab määrata atribuudiga line-height. On lubatud numbrilised väärtused. Protsendilised väärtused on samuti võimalikud. Need viitavad siis elemendi kirjasuurusele, millele ridade kõrgus on määratud. Enne reavahe määratlemist arvestage järgmist: brauser/seade võib reavahe määratlusele eelistada teisi atribuute ja kärpida elemente, kui need on kõrgemad. Eriti häiriv võib see olla graafikute puhul. Seega testige tulemusi enne lehe avaldamist.
Järgmine näide näitab, kuidas kasutada line-height.
<p style="line-height:1.4em; font-size:1em;">Mõnikord loome suurepärase paigutuse, aga fotod veel puuduvad ja kui kasutate ainult tühje raame, näeb paigutus üsna alasti välja. Asi käib paremin:<br /> Selles videoõppes näitan teile parimaid veebiaadresse, kust kiiresti tasuta sobivaid asenduspilte saada. Üks suurepärane loend leidub nt siin <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">siin</a>.</p> <p style="line-height:2em;font-size:1em;">Mõnikord loome suurepärase paigutuse, aga fotod veel puuduvad ja kui kasutate ainult tühje raame, näeb paigutus üsna alasti välja. Asi käib paremin:<br /> Selles videoõppes näitan teile parimaid veebiaadresse, kust kiiresti tasuta sobivaid asenduspilte saada. Üks suurepärane loend leidub nt siin <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">siin</a>.</p> <p style="line-height:1em; font-size:1em;">Mõnikord loome suurepärase paigutuse, aga fotod veel puuduvad ja kui kasutate ainult tühje raame, näeb paigutus üsna alasti välja. Asi käib paremin:<br /> Selles videoõppes näitan teile parimaid veebiaadresse, kust kiiresti tasuta sobivaid asenduspilte saada. Üks suurepärane loend leidub nt siin <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">siin</a>.</p>
Määratletud on kolm tekstilõiku, millele on omistatud erinevad reavahe suurused.
Nagu näete, saab reavahe suuruse abil oluliselt mõjutada teksti loetavust. Seega olge ettevaatlik line-height kasutamisel.
Lõpuks tekib muidugi küsimus, millist reavahe suurust peaks tegelikult valima. Tavaliselt arvestatakse reavahemete suurustena vahemikus 130–150 protsenti.
p {
line-height: 150%;
}
Head loetavust mõjutab aga eelkõige teksti laius. Siin kehtib: Mida pikemad on tekstiread, seda suurem peaks olema reavahe. Seega testige kindlasti lehte selleks, et loetavus jääks tõepoolest tagatud.
Horisontaalne teksti joondamine
Teksti lõikude horisontaalne joondamine ja teiste paisketekstide või inline-elementide blokkide sisu horisontaalse joondamise atribuut text-align määratakse. Järgmised väärtused saab text-align atribuudile määrata:
• left – vasakpoolne joondamine
• right – parempoolne joondamine
• center – keskjoondamine
• justify – täiskiri joondamine
Siin on taas näide:
<!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>Ja nii näeb tulemus veebibrauseris välja:
Märkige, et text-align kehtib mitte ainult tekstisisu suhtes. Atribuut laieneb tegelikult kõigile inline-elementidele. Kui lisatakse pilt, kehtib text-align määratlus ka sellele elemendile.
Üks märkus veel: text-align ei tohiks – vähemalt ametliku CSS-i spetsifikatsiooni järgi – mõjutada blokk-elemente. (Kuigi on brausereid, mis seda rakendavad ka blokk-elementidele). Kui soovite blokk-elemente joondada, siis kasutage nendel juhtudel juba tutvustatud margin atribuute.
