Text-align

CSS vlastnost text-align určuje zarovnání odstavce nebo jiného bloku.

text-align
hodnoty zarovnání odstavce
left doleva
center na střed
right napravo
justify do bloku

V Internet Exploreru funguje text-align i pro zarovnání blokových prvků uvnitř jiného bloku (což je v rozporu se specifikací).

Výchozí zarovnání je doleva. V jazycích, kde se píše zprava doleva, je výchozí zarovnání doprava. (Směr psaní by měla určovat nepodporovaná vlastnost direction.) Odstavec zarovnaný doleva se snaží mít levé okraje přesně pod sebou (popř. s výjimkou prvního řádku ovlivněného vlastností text-indent.)

Zarovnání do bloku (text-align: justify) se snaží mít levé i pravé okraje řádků přesně pod sebou. Prohlížeče toho dosahují zvětšováním mezislovních mezer. Poslední řádek odstavce zarovnaného do bloku se zarovnává doleva.

Funguje to dovnitř

Je důležité si uvědomit, že vlastnost text-align ovlivňuje zarovnání vnitřku prvku, pro který je deklarována. Neovlivňuje zarovnání samotného prvku vůči jeho okolí. Jinak řečeno funguje to dovnitř, ne ven.

Podle specifikace vlastnost text-align má ovlivňovat pouze řádkové prvky uvnitř prvků blokových. Internet Explorer ve quirk módu ale chybně ovlivňuje zarovnání bloků uvnitř bloků. Což nevadí. Centrování bloků (například centrování celé stránky) se má normálně dělat vlastnost margin. Např. centrování bloku se v moderních prohlížečích dělá nastavením margin: 0px auto.

Pro buňky tabulky se mělo dát zapsat i text-align: ",", což by mělo texty ve sloupci tabulky zarovnat na desetinou čárku. Uvádí to specifikace. Dá se prý zarovnávat na jakýkoliv řetězec. Neviděl jsem ale, že by to někde fungovalo.

Podpora

Všude velmi dobrá podpora hodnot left, center a right. Text-align: justify nefunguje v IE 3 a NN4.

Podpora vlastnosti text-align
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer všechny verze  
Firefox všechny verze  
Opera všechny verze  
Chrome ano  

Příklady

<p style="text-align: right">Odstavec zarovnaný napravo</p>
<p style="text-align: center">Odstavec zarovnaný na střed</p>
<p style="text-align: justify">Odstavec zarovnaný do bloku</p>

Vycentrování bloku

V Exploreru se na vycentrování bloku stránky může použít text-align. Pro standardní prohlížeče se používá centrování pomocí margin: auto:

<div style="text-align: center">
 <div style="text-align: left; width: 400px; margin: 0px auto">
  nějaký vystředěný obsah
 </div>
</div>

Další příklady

Centrovaný CSS pozicovaný design

Justify a moralizování

Často se diskutuje, zda je dobré používat na webu text-align: justify. Podle mě není jeho použití na stránkách chybou, ale chápu, proč se na webu moc nepoužívá. Jde o dvě věci. V novinách jsou sloupce vedle sebe a potřebují mít nějaký hezký vzhled. Tam se zarovnání do bloku dobře hodí, protože dvěma sousedícím sloupcům to pomáhá v čitelnosti. Bez zarovnání do bloku by sousední sloupce vypadaly blbě. Nic takového jako sousední čtené sloupce se na webu moc hojně nevyskytuje, takže odpadá primární důvod pro použití vyblokovaného textu.

Druhá věc je dělení slov. Každý software pro sazbu novin má nástroj na dělení slov (to má dokonce i Word). Prohlížeče ale nic takového nemají (pokud vím). Při sazbě novin občas ve sloupcích zarovnaných do bloku vznikají nehezké řeky, ty se ale většinou zahladí dělením slov. Při použití zarovnání do bloku na webu se to dělením slov řešit nedá a tak jsou ty díry v textu opravdu velké a ošklivé. Obzvláště to je znát u úzkých sloupců. Na širokých stránkách jsem kdysi zarovnání do bloku používal, problémy s tím nebyly, ale pak jsem to zrušil, aby ta písmenka tak blbě neskákala při zužování okna.

Text-justify

V případě použití text-align: justify (a jen tehdy) se dá pro Internet Explorer použít ještě vlastnosti text-justify. Text-justify má hodnoty auto, distribute (východní Asie), distribute-all-lines (v bloku i poslední řádek), inter-cluster (zlomy řádků i uvnitř slov - nikde nefunguje), inter-ideograph (?), inter-word (pouze pomocí mezer mezi slovy), newspaper (normálně prostrkává mezi slovy i mezi znaky) a kashida (arabština).

Jediná zásadně zajímavá hodnota je distribute-all-lines, která (v Exploreru) způsobí roztažení posledního řádku i pomocí mezislovních mezer tak, aby poslední řádek vyšel od kraje do kraje. Občas to vypadá příšerně, když ten poslední řádek obsahuje příliš mnoho textu.

Zatím jsem to víc netestoval.

Zarovnání posledního řádku

Vlastnost text-align-last s hotnotami left righ center justify funguje pouze v Internet Exploreru (testováno v IE 6, Firefox 3, Chrome a Opera 10). V jiných prohlížečích nefunguje, ale je to lepší než drátem do oka.

Proprietální vlastnost -ms-text-align-last, kterou lze najít v některých nápovědách, v IE 6 nefunguje.

Moje další pokusy o vycentrování posledního řádku blokového textu v ostatních prohlížečích byly neúspěšné (2010).

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.