Text-align

Ve své základní podobě (zarovnání vlevo, vpravo, na střed či do bloku) je široce podporovaná napříč prohlížeči.

Co jde zarovnat

V aktuálních prohlížečích funguje text-align pouze na řádkové (display: inline) nebo řádkově-blokové (display: inline-block) prvky.

Dříve šlo v IE v QUIRK režimu přes text-align zarovnávat i bloky. Ve Firefoxu a Chrome jde toto chování simulovat hodnotami s CSS prefixy. Ukázka.

Různým způsobům centrování se věnuje samostatný článek.

Dědičnost

Zarovnání pomocí text-align od rodiče dědí jeho potomci.

<div>Bude vlevo (výchozí)</div>
<div style="text-align: center">
  <div>Bude uprostřed</div>
  <div style="text-align: right">
    <div>Bude vpravo</div>
  </div>
</div>

Ukázka

Základní zarovnávání

left

text-align: left

Výchozí chování u textu psaného zleva doprava (ltr – left to right).

right

text-align: right

Zarovnání textu k pravé straně.

center

text-align: center

Zarovnání textu na střed.

justify

text-align: justify

Zarovnání textu do bloku jako je tomu běžné například u novinových sloupků. Používání text-align: justify je trochu problematické s ohledem na fakt, že ne všechny prohlížeče umí dělit text uprostřed slova. Při zarovnání do bloku tak snadno vznikají tzv. řeky, kdy jsou mezi jednotlivými slovy nepřirozeně velké mezery.

Rozdělování slov spojovníkem na konci řádku jde v něterých prohlížečích zapnout CSS vlastností hyphens.

Začátek a konec

Mimo IE fungují dále hodnoty označující začátek a konec řádku (v závislosti na směru psaní textu).

start

text-align: start

V případě u nás běžného psaní zleva doprava je start ekvivalentem text-alight: left.

end

text-align: end

Zarovnání textu na konec řádku, což se chová v podporovaných prohlížečích jako right.

Zarovnání posledního řádku

Zvlášť v případě zarovnání do bloku (text-align: justify) je většinou cílem, aby se poslední řádek do bloku nezarovnával.

Prohlížeče tak činí – poslední řádek zarovnávají na začátek řádku. Vlastností text-align-last je možné toto chování změnit a poslední řádek bloku například vycentrovat.

Nastavení zarovnání posledního řádku funguje ve všech IE (od IE 5.5) a ve Firefoxu s prefixem.

Ukázka centrovaného posledního řádku.

Specifikace

CSS specifikace do budoucna počítá, že text-align bude zkratka pro:

• text-align-last – zarovnání posledního řádku
• text-align-all – zarovnání všech řádků

Zarovnání podle znaku

CSS specifikace dále počítá s možností zarovnávat podle určitého znaku – třeba podle desetinné čárky nebo jednotek.

text-align: ".";
text-align: start ".";
text-align: "." end;

U následujícího seznamu by se to velmi hodilo:

• 10,1
• 5,55
• 105,55
• 5,525

Bohužel to v žádném prohlížeči nefunguje.

Pevný počet desetinných míst

Nejrychlejší řešení, jak se o takové zarovnání pokusit, je zajistit pevný počet desetinných míst, nastavit šířku a zarovnat obsah doprava.

Dobře bude fungovat ale jen u neproporcionálních písem, která mají všechny číslice stejně široká.

Tabulka

Další možnost je tabulka. Ať už klasická nebo v CSS s využitím tabulkových hodnot vlastnosti display.

Samostatná ukázka

To funguje zdánlivě hezky, ale jen do chvíle, kdy bude nutné text kopírovat — rozdělení do sloupců totiž způsobí vložení tabulátorů mezi ně.

10	,	518

Pevná šířka celého čísla

Jako funkční postup se zdá obalení celého čísla <span>em a nastavení jeho šířky a zarovnání doprava:

Samostatná ukázka

Potřebný HTML kód pro správné zarovnání je potom ideální generovat na straně serveru.

Další nevýhoda kromě úprav HTML je, že pevná šířka není universální pro různě dlouhá čísla. To by mohl vyřešit kousek JavaScriptu, co čísla přeměří a šířku nastaví podle toho nejdelšího.

Samostatná ukázka

Odkazy

• DevDocs: text-align
• W3C: Text Alignment: the ‘text-align’ shorthand