HTML & CSS pro začátečníky

HTML a CSS pro začátečníky (část 33): Kontrola průběhu textu

Všechna videa tutoriálu HTML a CSS pro začátečníky

Absázky nebo obsah buněk tabulek můžete zarovnat podle svých přání pomocí následujících vlastností. Tyto vlastnosti lze použít i na všechny ostatní prvky, které mají přiřazenou definovanou nebo vypočtenou výšku nebo šířku.


Odsazení prvního řádku

Začínáme vlastností text-indent. Tímto způsobem určíte, jak má být odsazen první řádek odstavce. Možné je také odsazení doleva. K tomu je třeba použít negativní hodnotu text-indent. (Podrobné informace o tom, kdy může být extrémní odsazení užitečné, následují). Očekává se číselná hodnota.

Příklad:

.odstavec { text-indent: 2em; }



V prohlížeči to vypadá takto:

HTML & CSS pro začátečníky (část 33): Kontrola průběhu textu



Pokud použijete negativní hodnotu, dojde k odsazení textu v prvním řádku.

.odstavec {
   text-indent: -2em;
}



A zde je příklad výsledku v prohlížeči:

HTML & CSS pro začátečníky (část 33): Kontrola textového proudu


text-indent se ve skutečnosti může stát zajímavou i v souvislosti se SEO. Někdy například raději zobrazujeme obrázky než text.

Pokud však chceme, aby byl text stále dostupný pro vyhledávače, ocitneme se před dilematem. To lze vyřešit použitím vlastnosti text-indent. Tato vlastnost vám totiž umožňuje posunout texty. Takže můžete texty vymanit z očí návštěvníků.

Výhoda variace text-indent: Text, který má být nahrazen obrázkem, zůstává v kódu nezměněn.

<h1>PSD-Tutorials.de</h1>
...
h1 {
   background: url(logo.png) 0 0 no-repeat;
   text-indent: -99999px;
   height:200px;
}



Tímto zápisem se h1 elementu přiřadí pozadí. (Vlastnost background byla v této řadě již představena). Pomocí text-indent: -99999px se text nadpisu posune o 99999 pixelů doleva. Text se tedy již nezobrazuje. Zobrazen je pouze obrázek.

HTML & CSS pro začátečníky (část 33): Kontrola toku textu



Pokud se vypne stylopis, text se opět zobrazí normálně.

Nastavení výšky řádku

O výšce řádku jsem již jednou hovořil v souvislosti s obecnou vlastností font. Nyní se budeme více zabývat tímto tématem. Definice výšky řádku v souvislosti se velikostí písma (font-size) je zajímavá.

Výška řádku se určuje pomocí vlastnosti line-height. Povoleny jsou číselné hodnoty. Procentuální hodnoty jsou rovněž možné. Ty se vztahují k velikosti písma prvku, pro který byla výška řádku uvedena. Před definicí výšky řádku si také pamatujte na následující: Může se stát, že prohlížeč/nebo zařízení poskytne výšce řádku přednost před jinými vlastnostmi a prvky zobrazí oříznuté, pokud jsou vyšší. To může být nežádoucí zejména u obrázků. Proto otestujte výsledky, než zveřejníte stránku online.

Následující příklad ukazuje, jak použít vlastnost line-height.

<p style="line-height:1.4em; font-size:1em;">Někdy můžete vytvořit skvělé rozložení, ale stále chybí fotografie, a když použijete pouze prázdné rámce, rozložení vypadá docela holohlavě. Existuje lepší řešení:<br />
V tomto videu vám ukážu nejlepší webové adresy, kde rychle získáte zdarma odpovídající obrázkové zástupce. Skvělý seznam najdete např. zde <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">zde</a>.</p>

<p style="line-height:2em;font-size:1em;">Někdy můžete vytvořit skvělé rozložení, ale stále chybí fotografie, a když použijete pouze prázdné rámce, rozložení vypadá docela holohlavě. Existuje lepší řešení:<br />
 V tomto videu vám ukážu nejlepší webové adresy, kde rychle získáte zdarma odpovídající obrázkové zástupce. Skvělý seznam najdete např. zde <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">zde</a>.</p>

<p style="line-height:1em; font-size:1em;">Někdy můžete vytvořit skvělé rozložení, ale stále chybí fotografie, a když použijete pouze prázdné rámce, rozložení vypadá docela holohlavě. Existuje lepší řešení:<br />
 V tomto videu vám ukážu nejlepší webové adresy, kde rychle získáte zdarma odpovídající obrázkové zástupce. Skvělý seznam najdete např. zde <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">zde</a>.</p>

Zde byly definovány tři odstavce textu, kterým byly přiděleny různé řádkové výšky.

HTML & CSS pro začátečníky (část 33): Kontrola toku textu



Jak vidíte, řádková výška může velmi silně ovlivnit čitelnost běžných textů. Proto buďte opatrní s line-height.

Jde samozřejmě o to, jaká řádková výška by měla být zvolena. Obvykle se pohybujeme v rozmezí řádkových výšek mezi 130 a 150 procenty.

p {
 line-height: 150%; 
}



Nicméně dobrá čitelnost závisí především na šířce písma. Zde platí: Řádková výška by měla být co největší, čím delší jsou textové řádky. Určitě tedy otestujte stránku, zda je čitelnost zachována.

Vodorovné zarovnání textu

Pomocí vlastnosti text-align se nastavuje vodorovné zarovnání odstavců a jiných prvků obsahujících běžný text nebo vnořené prvky blokových prvků. Pro vlastnost text-align lze nastavit následující hodnoty:

left – zarovnání vlevo

right – zarovnání vpravo

center – zarovnané na střed

justify – zarovnat do bloku

Zde je opět ukázka:

<!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>

A vypadá to ve webovém prohlížeči takto:

HTML & CSS pro začátečníky (část 33): Kontrola průběhu textu



Pamatujte, že text-align se nevztahuje pouze na textové obsahy. Tato vlastnost platí skutečně pro všechny vnořené prvky. Takže pokud je vloženo obrázek, platí definice text-align i pro tento prvek.

Poznámka: text-align by se podle oficiální specifikace CSS nemělo ovlivňovat blokové prvky. (I když existují prohlížeče, které ho používají i na blokové prvky). Pokud chcete zarovnat blokové prvky, v těchto případech použijte již představené vlastnosti margin.