Text-decoration
CSS vlastnost text-decoration určuje podtržení textu a jiné "přikrášlení".
| hodnoty | přikrášlení textu |
|---|---|
| none | žádné |
| underline | podtržení |
| overline | nadtržení |
| line-through | přeškrtnutí |
| blink | blikání, nikde nefunguje, zavržená hodnota |
Normálně není text nijak dekorován.
Odkazy mají výchozí dekoraci podtržení (a změnou text-decoration se dá udělat, aby podtrhané nebyly). Podtržený je i obsah tagu <ins> (což mi přijde nelogické). Na webu byste neměli podtrhávat nic, co není odkaz -- a naopak -- odkazy podtrhávejte.
Obsah tagů <s>, <strike> a <del> mají výchozí dekoraci přeškrtnutí. Pomocí text-decoration: none se jim dá přeškrtnutí zrušit. Naopak text-decoration: line-through; použijte u zrušených cen a zrušených textů (které z nějakého důvodu nechcete mazat).
Nové vlastnosti přibližně od roku 2017
Jsou zavedeny nové vlastnosti, které text-decoration rozšiřují. Jsou to:
- text-decoration: line: jaký druh dekorace to vlastně bude , tedy jestli to má být podtržení, nadtržení, nebo přeškrutnutí (viz hodnoty u text-decoration výše)
- text-decoration-color: barva dekorace (např. barva podtržení)
- text-decoration-style: plné, dvojité, tečkované, čárkované, vlnovka
- text-decoration-skip: možnost něco automaticky z dekorace vynechat
Pro všechny tyto tři nové vlatnosti funguje stará vlastnost text-decoration jako jejich zkratka. Za text-decoration: se tedy dají sepsat všechny vlastnosti, tedy druh dekorace, styl dekorace, barva a případný skip.
Příklady
Něco funguje v některých prohlížečích.
text-decoration-color: red;
barva podtržení (nebo nadtržení nebo přeškrtnutí) bude červená
text-decoration: underline dotted green;
souhrnný zápis. Bude to podtržení (text-decoration: underline), tečkované (text-decoration-style: dotted) a zelené (text-decoration-color: green).
text-decoration-style: wavy; text-decoration: underline;
Rozložený zápis nesouhlasné vlnovky a podtržení
text-decoration-skip: ink;
V některých prohlížečích se umí podtrhávat tak, aby se podtržení nedotýkalo spodních dříků písmen.
text-decoration-line: overline underline line-through;
tohle nevím, jestli funguje, ale teoreticky by se mělo podtrhnout, nadtrhnout i přeškrtout
text-underline-position: under;
text-underline-position nemám otestované, ale je to asi další druh, jak říct, kde ta dekorace má být.
Text-decoration-color
Určí barvu podtržení. Příklad zeleného podtržení:
text-decoration: underline;
text-decoration-color: green;
Text-decoration-style
Druh podtržení (nadtržení, přeškrtnutí).
| hodnoty | druh podtržení |
|---|---|
| solid | plné |
| double | dvojité |
| dotted | tečkované |
| dashed | čárkované |
| wavy | vlnovka |
Text-decoration-skip
Které objekty se nebudou podtrhávat a nadtrhávat. Podle mých pokusů je tato vlastnost ignorována při přeškrtnutí (line-through). Týká se zejména prohlížeče Chrome, protože Explorer ani Firefox text-decoration-skip nepodporují.
| hodnoty | co se nebude podtrhávat |
|---|---|
| none | podtrhne se všechno |
| objects | obrázky a jiné inline-block prvky |
| spaces | mezery a bílé znaky - v Chrome nefunguje |
| ink | inkoust: podtržení se nedotkne písmene, na chvíli se vynechá |
| edges | něco s čínštinou, nespojí se asi podtržení sousedních znaků |
| box-decoration | nechápu přesně, ale něco s paddingem a marginem |
| ink objects | kombinace hodnot |
Obzvlášť jsem si oblíbil hodnotu ink, tedy text-dexoration-skip: ink;. Podtržená slova jsou s ním podle mého názoru lépe čitelná.
Text-underline-position
Text-underline-position: under umí čáru podtržení posunout trochu níže, takže neškrtá spodní dotažnice písmen, ale je až pod nimi. Firefox umí i procenta a další hodnoty.
Podpora
Velmi dobře podporovaná vlastnost, dobrá hlavně na podtrhávání.
| Prohlížeč | Základní podpora ve verzích | Nové vlastnosti |
|---|---|---|
| Internet Explorer | všechny verze | nové vlastnosti nepodporuje |
| Firefox | všechny verze | neumí text-decoration: skip |
| Opera | všechny verze | od verze 44 umí vše |
| Chrome | všechny verze | od verze 57 |
Blikání nefunguje v žádném moderním prohlížeči (naštěstí).
Příklady
Jak udělat, aby odkazy nebyly podtržené:
<style>
a:link, a:visited {text-decoration: none}
</style>
Pokud se u odkazů vypíná podtrhávání, často se přidává pravidlo, aby při se při přejetí myší (stav :hover) podtrhly:
<style>
a:link, a:visited {text-decoration: none}
a:hover {text-decoration: underline}
</style>
Další příklady
Poslední aktualizace 4. dubna 2017 a 18. března 2024
Reklama
