Kaskádové styly – roztahujeme slova

V minulém díle jsem popsal základní formátování textu. Náplní tohoto dílu budou ty vlastnosti kaskádových stylů CSS, které také slouží pro formátování textu, ale nepoužívají se tak často.

Někdy se na zvýraznění nějakého slova, nebo skupiny slov, používá roztažení textu. Třeba takto: Toto je  z v ý r a z n ě n é  s l o v o . Tento efekt můžete vyrobit také v čistém HTML i bez použití kaskádových stylů. Stačí mezi písmena nastrkat nedělitené mezery:

s l o v o

Tento postup je ale dost pracný, a také dost nepřehledný. Jak vidíte výše, je vůbec těžké najít, jaké slovo jste napsali. Navíc je to také příliš hrubé, nelze zvětšit mezery mezi písmeny v jemných krocích. Pomocí kaskádových stylů lze totéž vyřešit velice elegantně pomocí vlastnosti letter-spacing:

Toto je <span style="letter-spacing:0.25em">zvýrazněné</span> slovo.

Tento příklad by měl nastavit mezeru mezi písmeny na čtvrtinu šířky písmena M, celé to tedy dopadne takto: Toto je zvýrazněné slovo. (Vše uvidíte správně pouze tehdy, pokud váš prohlížeč vlastnost letter-spacing podporuje).

Jak tedy vidíte, vše můžete jemně řídit. Můžete si přímo předepsat šířku mezery mezi slovy, a to pomocí různých jednotek. Je možné použít všechny jednotky, které jsou popsány v kapitole o velikosti písma s výjimkou procent, které nefungují. Takže třeba nastavení velikosti mezery na dva milimety je snadné:

.vyrazne-slovo { letter-spacing: 2mm; }

Kaskádové styly umožňují nastavit i mezeru mezi slovy, a to pomocí vlastnosti word-spacing, která pracuje podobně, jako letter-spacing:

Toto je ukázka <span style="word-spacing:0.5em;">větší mezery mezi slovy</span>.

A výsledek: Toto je ukázka větší  mezery  mezi  slovy.

U obou vlastností, tedy jak u word-spacing, tak i u letter-spacing, je možné uvést slovo normal, které vrací vše do původního stavu:

.normalni { word-spacing:normal; letter-spacing:normal; }

Pro úplnost je nutné říci, že obě uvedené vlastnosti jsou sice součástí normy pro kaskádové styly v první verzi, tedy CSS I, ale podmínečně. Je u nich napsáno, že jejich podpora je volitelná. Takže, pokud je u vašeho prohlížeče zaručena podpora CSS I, není tím ještě zaručeno, že bude umět pracovat s vlastnostmi word-spacing a letter-spacing. Pokud ale prohlížeč podporuje CSS II, tedy druhou verzi normy, potom je pro něho podpora obou těchto vlastností povinná.

Při zkoušení jsem zjistil, že Netscape Navigator 4.51 roztahování celkově nepodporuje. U Internet Exploreru verze 4 jsem zjistil podporu vlastnosti letter-spacing, vlastnost word-spacing není podporována.

A to je pro tento díl vše.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.