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:
|
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:
|
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é:
|
Kaskádové styly umožňují nastavit i mezeru mezi slovy, a to pomocí vlastnosti word-spacing, která pracuje podobně, jako letter-spacing:
|
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:
|
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.
Mohlo by vás také zajímat
-
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
Rychlost serveru: Klíč k lepšímu umístění ve vyhledávačích
7. června 2024 -
Co je to DNSSEC, jak funguje a jak si ho nastavit?
14. srpna 2024
Nejnovější
-
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024