O webu
Text-decoration

Z historických má text-decoration dva režimy.

  1. Ve své původní podobě umožňuje podtržení, nadtržení, přeškrtnutí a v Opeře 12 blikání. Kromě blikání funguje napříč prohlížeči.

  2. V novější podobě funguje s prefixy ve Firefoxu 6+ a Safari 7.1+ jako zkratka. V těchto prohlížečích text-decoration zahrnuje další vlastnosti:

    • text-decoration-color
    • text-decoration-line
    • text-decoration-style

Původní text-decoration

Symbilický zápis původní podoby vypadá následovně:

element {
  text-decoration: styl (nebo víc stylů);
}
text-decoration: none

Zruší dekoraci textu. Často se používá u odkazů, když jsou zvýrazněny jinak než podtržením (třeba jako tlačítko).

text-decoration: underline

Podtrhne text. Obecně není moc dobré texty kromě odkazů podtrhávat, protože uživatelé bývají zvyklí, že právě podtržení značí odkaz. Navíc podtržení textu snižuje čitelnost.

Někdy se podtrhávání odkazů řeší tak, že se text-decoration vypne a podtržení zajistí spodní rámeček (border-bottom) nebo obrázek (background). Umožňuje si to lépe pohrát se vzdáleností podtržení od textu nebo vytvořit jinou barvu podtržení než textu — s text-decoration: underline to jde jen pomocí vnořeného elementu (ukázka).

Kromě odkazů jsou ve výchozím stylu podtrženy i značky <u> a <ins>.

Občas se používá, když něco, co není odkaz, má jako odkaz vypadat a spouštět nějakou JavaScriptovou akci.

text-decoration: overline

„Čára“ nad slovem. Těžko najít využití. Na nějakém webu jsem to viděl použité pro označení odkazů. Raději bych zůstal u zažitého podtržení.

text-decoration: line-through

Přeškrtnutý text.

Výchozí vzhled přeškrtnutí mají i značky <s> , <del> a <strike>.

Využití se moc nenabízí. Když má být něco přeškrtnuté, bývá vhodné použít přímo HTML značku – <del> nebo <s> v závislosti na případu užití.

Podpora blikání byla z prohlížečů s ohledem na (ne)příjemnost blikání pro uživatele odebrána. Totéž se týká i blikání značky <blink>.

Nahradit se dá například CSS animací pomocí vlastnosti animation nebo JavaScriptovým časovačem. Příklady jsou na Wikipedii.

Skládání dekorací

Jednotlivé dekorace jde skládat, takže jde vytvořit text, který je podtržený, přeškrtnutý i nadtržený (ukázka).

Nové text-decoration

V novější podobě je text-decoration zkratka pro text-decoration-něco vlastnosti.

element {
  text-decoration: 
    [text-decoration-line] 
    [text-decoration-style]
    [text-decoration-color]
}

text-decoration-line

Původní hodnoty text-decoration se staly součástí vlastnosti text-decoration-line. Je tedy shodné s původním text-decoration.

text-decoration-style

Udává styl čáry z text-decoration-line.

  • solid — výchozí čára
  • double — dvojitá čára
  • dotted — tečkovaná čára
  • dashed — čárkovaná čára
  • wavyvlnovka

Samostatná ukázka (momentálně pouze Firefox)

text-decoration-color

Jedná se o nastavení barvy čáry. Díky tomu lze elegantně řešit problém různé barvy odkazu a podtržení (ukázka).

Případně v kombinaci s text-decoration-style: wavy konečně vytvořit podtržení červenou vlnovkou bez nutnosti používat obrázek.

Budoucnost

Až prohlížeče začnou text-decoration chápat jako zkratku, budou pro staré prohlížeče nové vlastnosti neznámé hodnoty, takže zahodí celou deklaraci (ukázka).

Takže pro to, aby se zobrazila alespoň základní čára, bude nutné zdvojení jako například u rgba() barev.

element {
  text-decoration: underline;
  text-decoration: underline double;
}

V CSS draftu jsou ještě další dvě zajímavé vlastnosti text-decoration-*:

text-decoration-skip

Specifikace

Umožní nepodtrhnout mezery slov nebo části písmen, které se nyní kříží s podtržením.

Přeškrtnutí písmen

Mohlo by to vypadat nějak takto:

Nepřeškrtnutí písmen

text-decoration-position

Specifikace

Upravuje umístění podtržení. Z výchozího stavu:

Výchozí posice podtržení

Půjde pomocí hodnoty under přesunout níže:

Nepřeškrtnutí písmen

Odkazy jinam