Rodina vlastností text-decoration v CSS (nejen pro podtržení odkazů)

Když se pustíte do studia dříve jednoduchých vlastností v CSS, můžete být překvapení jejich robustností (a pro někoho také přílišnou složitostí). To se stalo i mě právě teď u vlastnosti text-decoration.

Pojďme to vzít ovšem čistě pragmaticky, jako příručku této rodiny vlastností. Budu vycházet z nejnovějších CSS specifikací pro dekoraci textu.

Seznam vlastností

Ano, ve skupině vlastností text-decoration sice jde hlavně o pouhé podtrhávání odkazů, ale celá rodina slouží pro všechny možné dekorace písma – užitečná je například pro autory různých textových editorů, korektorů, autory technických nebo chemických textů a další.

Nejprve ale ty vlastnosti:

• text-decoration
• text-decoration-line
• text-decoration-style
• text-decoration-color
• text-decoration-skip-ink
• text-underline-position
• text-underline-offset
• text-decoration-width & text-decoration-thickness
• text-emphasis

Ne vždy mají tyhle vlastnosti samozřejmě plnou podporu v prohlížečích. Zastaralý Internet Explorer je skoro vždy mimo hru, ale některé z vlastností nepodporují ani současné moderní prohlížeče. Však uvidíte.

text-decoration – hlavní zkratka (a hlavní problém)

Vlastnost, která je podle nejnovější specifikace zkratkou pro následující tři vlastnosti, přičemž uvést můžeme libovolný počet z nich:

text-decoration:
  <'text-decoration-line'> ||
  <'text-decoration-style'> ||
  <'text-decoration-color'>

Například:

/* Linka zezdola: */
text-decoration: underline;

/* Tečkovaná linka zezdola: */
text-decoration: dotted underline;

/* Nic, protože nedefinujeme text-decoration-line: */
text-decoration: dotted;

Na tomhle místě se hodí říct, že specifikace má jednu dokončenou úroveň (všem dobře známé CSS2) a zároveň dvě v návrhu či implementaci rozpracované aktualizace CSS Text Decoration Module Level 3 a CSS Text Decoration Module Level 4.

No a mezi CSS „dvojkou“ a novými moduly je rozdíl v pojetí zápisu text-decoration. Původně šlo o běžnou vlastnost, nyní je to zkratka více vlastností.

Liší se tedy implementace v prohlížečích. Zatímco Firefox, Chrome a z něj odvozené prohlížeče berou text-decoration „po novu“ jako zkratku, Safari a Explorer „po staru“ jako samostatnou vlastnost.

Takže, pokud bychom chtěli udělat zelené tečkované podtržení odkazů jinak než obvyklým (ale nesprávným) trikem s vlastností border, takhle to fungovat nebude:

.shorthand a {
  text-decoration: dotted green underline;
}

V Exploreru s ním nic nenaděláme (což kvůli klesající podpoře vadí stále méně), ale v Safari to můžeme ještě zachránit uvedením jednotlivých vlastností:

.individuals a {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: green;
}

Hlavní problém bychom tedy měli umět vyřešit. Pojďme se ještě podívat na jednotlivé vlastnosti určené pro dekoraci textu.

text-decoration-line – typ dekorační linky

Udává, jaký typ linky bude přidán k textu.

Možné hodnoty:

text-decoration-line: none |
  [ underline || overline || line-through || blink ]

Ve středoevropském prostoru chcete asi většinou použít podtržení — underline.

Blikající hodnota blink je označená za zastaralou a moderní prohlížeče ji už neimplementují. Chválabohu.

Zápis s hranatými závorkami a značkami logickým operátorem nebo (||), který jsem převzal ze specifikace, říká, že je možné použít více hodnot, například text-decoration-line: underline overline.

Hodnotu line-through mají ve výchozích stylech prohlížečů nastavené HTML prvky <s>, <strike> nebo <del>.

Tahle vlastnost má plnou podporu, když nebereme hodnotu blink.

text-decoration-style – styl linky

Nastavuje styl dekorace textu – například jednou čarou, dvojitou, tečkovanou nebo vlnovkou:

text-decoration-style: solid | double | dotted | dashed | wavy

Používá se jen jedna a jen v případě, že je definovaná nějaká text-decoration-line.

Hodnota wavy je fajn např. u zvýrazňování chyb ve slovech.

Tahle vlastnost má plnou podporu v moderních prohlížečích.

text-decoration-color – barva dekorace

Barva, kterou se decorace vykreslí. Může to být currentcolor nebo jakákoliv barva.

text-decoration-color: <barva>

<barva> může být currentcolor nebo jakákoliv barva.

Vlastnost umí všechny moderní prohlížeče.

Podívejme se teď ještě na vlastnosti patřící do nejnovější CSS specifikace pro dekorování textu.

text-decoration-skip-ink – zamezení křížení linek

Vlastnost, která určuje, zda se bude linka dekorační čáry (dekoračního inkoustu) přerušovat, aby nevzniklo křížení s křivkami textu.

text-decoration-skip-ink: auto | none

Ve výchozích stylech moderních prohlížečů už figuruje nastavení text-decoration-skip-ink:auto, takže to obvykle nemusíme řešit. Snad jen, že bychom to chtěli vypnout. Netuším ale, proč bychom to v běžných situacích dělali.

Původně ve specifikaci figurovala jako text-decoration-skip, ale nyní je tato vlastnost odstraňována - bude rozdělená na více pod-vlastností.

Tahle vlastnost má plnou podporu v moderních prohlížečích.

text-underline-position – pozice dekorační linky

Kde se vykreslí dekorační čára:

text-underline-position: auto |
  [ under || [ left | right ] ]

Hodnoty left a right se týkají asijských jazyků, které se zapisují ve svislém směru (čínština, japonština, korejština…).

Pro nás je zajímavá hodnota under, která zajistí vykreslení pod dolní dotažnice (to, co přečuhuje dolů u písmen jako p, y nebo j).

Ve specifikaci je doporučení použít to v matemetických nebo chemických textech, aby dekorační linka nerušila čísla na spodních indexech.

Vlastnost nepodporuje Safari.

text-underline-offset – posun dekorace

Určuje posun dekorační linky od původní pozice:

text-underline-offset: auto | <šířka>

Chová se různě podle text-underline-position. Při underline jde o posun dolů, ale při overline se offset počítá směrem nahoru.

Hodnotu <šířka> je doporučováno uvádět v jednotkách em, aby se přizpůsobovala velikosti textu.

V době psaní textu vlastnost podporuje Safari a Firefox, ale ne Chrome.

text-decoration-width & text-decoration-thickness – tučnost dekorační linky

Pro nastavení tloušťky dekorační linky máme hned dvě vlastnosti:

text-decoration-width: auto | <šířka>;
text-decoration-thickness: auto | <šířka>;

Přičemž:

• text-decoration-width je standardní podle CSS Text Decoration Module Level 4, ale žádný prohlížeč ji neumí.
• text-decoration-thickness je podle všeho nestandardní. Umí ji Safari a Firefox, ale ne Chrome.

Pokud byste si s tím hráli, <šířka> je opět doporučovaná v em, aby se přizpůsobovala velikosti textu.

text-emphasis – umístění důrazu (v Česku nezajímavé)

Tahle zkratka vlastností je užitečná opět jen pro východoasijské a jiné exotické jazyky, proto ji detailně vysvětlovat nebudu. Vykreslí akcentový čudlík nad textem, pod ním nebo vedle něj.

Patří sem vlastnosti text-emphasis-style, text-emphasis-color, text-emphasis-postion a právě zkratka text-emphasis

Pořadí vykreslení

Protože zde máme ještě další CSS vlastnosti, které dekorují text, je dobré znát pořadí jejich vykreslování. Vezmeme to v pořadí od těch, které se renderují nejvíc dole, takže od stínů:

• stíny (vlastnost text-shadow)
• podtržení (vlastnost text-decoration-line)
• overlines (vlastnost text-decoration-line)
• samotný text
• emphasis marks (vlastnost text-emphasis)
• line-through (vlastnost text-decoration-line)

Podle tohoto seznamu bude prohlížeč řešit konfliky ve vykreslování křivek textu a jeho dekorací.

Příklad se všem vlastnostmi

V závěrečném CodePenu si všechny vlastnosti a jejich podporu v prohlížečích pěkně shrneme přehlednou tabulkovou formou:

Jak vidíte, v současném CSS může být i obyčejné dekorování textu docela věda.