Rozšírené hľadanie
Piatok 29. Marec 2024 |
meniny má Miroslav
Rodina vlastností text-decoration v CSS

Vzhůru dolů 30.03.2020 08:30 Když se pustíte do studia dříve jednoduchých vlastností v CSS, můžete být překvapení jejich robustností . 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 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: || || Například: text-decoration: underline; text-decoration: dotted underline; text-decoration: dotted; Na tomhle místě se hodí říct, že specifikace má jednu dokončenou úroveň 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 trikem s vlastností border, takhle to fungovat nebude: .shorthand a V Exploreru s ním nic nenaděláme , ale v Safari to můžeme ještě zachránit uvedením jednotlivých vlastností: .individuals a 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. Obrázek: Matice vlastností pro dekoraci textu a možných hodnot. Zde podle CSS Text Decoration Level 3. 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 | 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 , nebo . 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: 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. Obrázek: Ty nejnovější vlastnosti z  CSS Text Decoration Level 4, které ale nebudou fungovat všude. text-decoration-skip-ink – zamezení křížení linek Vlastnost, která určuje, zda se bude linka dekorační čáry 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 | ] Hodnoty left a right se týkají asijských jazyků, které se zapisují ve svislém směru . Pro nás je zajímavá hodnota under, která zajistí vykreslení pod dolní dotažnice . 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 | 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. Související Jednotky pro tvorbu webu : Kde použít jakou? CSS3 Text Shadow: stíny u textu Hodnotu 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 | ; text-decoration-thickness: auto | ; 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, je opět doporučovaná v em, aby se přizpůsobovala velikosti textu. text-emphasis – umístění důrazu 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 podtržení overlines samotný text emphasis marks line-through 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. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .