CSS3 – formátování textových informací
Tento článek je zaměřen především na nové možnosti týkající se textu a řádkových elementů, jejichž obsah je nejčastěji tvořen právě textovými informacemi.
V podstatě celým článkem se bude prolínat zkratka DTP (DeskTop Publishing). Konsorcium W3C se totiž rozhodlo přinést do světa kaskádových stylů nové formátovací možnosti řádek a textu, které jsou spíše známé právě z oblasti profesionální sazby, ať už jde třeba o různé metody kladení posloupnosti řádek nebo rozdílné algoritmy zarovnávání textu do bloku.
Řádkujeme na vyšší úrovni
Prvním důkazem, že se W3C tentokrát zaměřilo na posílení možnosti z oblasti DTP sazby, jsou nové vlastnosti a možnosti modulu Line, zabývajícího se především rozložením a formátováním řádek uvnitř blokového elementu. Modul se zatím nachází ve stavu pracovního návrhu, takže není úplně zřejmé, které vlastnosti nakonec přežijí až do finálního doporučení.
Nastavování výšky řádek a umístění jejich obsahu
V druhé verzi stylů šlo výšku řádky ovlivnit pouze pomocí vlastnosti line-height
. Do takto vysoké řádky je posléze vkládán samotný text a další inline nahrazované elementy (obrázky a podobně). Hodnota line-height
je obvykle tvořena přibližně 1,2násobkem velikosti největšího textu použitého na řádce (pokud je obsah řádky tvořen pouze textem) tak, aby nad i pod textem zůstalo trochu místa. Způsob, jakým je počítána velikost textu (od které se potom počítá hodnota line-height
), lze nyní nově určit vlastností text-height
. Nejčastěji bude pravděpodobně ponechána výchozí hodnota auto
, která velikost textu počítá na základě vlastnosti font-size
, lze však nastavit i specifičtější chování.
Pro vertikální umístění inline boxu uvnitř jeho řádky byla původně vyhrazena vlastnost vertical-align
. Její hodnoty nyní zastupují nejdůležitější čtveřice hodnot novinkových vlastností alignment-baseline
, alignment-adjust
, baseline-shift
, dominant-baseline
, které umožňují mnohem přesnější nastavení pozice textu než dříve. Přesto lze očekávat, že ve většině případů budou hodnoty vertical-align
bohatě stačit.
Kontrola posloupnosti řádek
Další důležitou část modulu Line tvoří nové možnosti kontroly toku řádek v rámci bloku. Nejdůležitější vlastností z této množiny je line-stacking-strategy
určující metodu, kterou jsou jednotlivé řádky bloku kladeny pod sebe. Hodnota inline-line-height
v jednoduchosti znamená, že řádky jsou řazeny přímo pod sebe bez dalších mezer a každý řádek má nejmenší potřebnou výšku (v jednom bloku se tak mohou vyskytnout řádky s různou výškou). Toto chování je vlastní první a druhé verzi kaskádových stylů. CSS3 však nově dovoluje nastavení jednotné výšky všech řádků daného blokového elementu. Hodnoty block-line-height
, max-height
, grid-height
upřesňují, jakým způsobem se má tato jednotná výška počítat.
Metodu řazení řádků lze ještě upřesnit vlastnostmi line-stacking-ruby
a line-stacking-shift
, nebo souhrnou vlastností line-stacking
.
Vylepšené formátování prvního písmene
Poslední množina nových vlastností modulu Line se týká značně vylepšených možností formátování iniciály, tedy prvního písmene odstavce vybraného pomocí pseudoelementu ::first-letter
. Pomocí nových drop-initial-*
vlastností lze nyní upravovat velikost prvního písmene (do kolika řádků má zasahovat) a jeho přesné zarovnání vůči těmto řádkům. Jde o vlastnosti drop-initial-value
, drop-initial-size
, drop-initial-after-align
, drop-initial-after-adjust
, drop-initial-before-align
a drop-initial-before-adjust
, jejichž názvy hovoří samy za sebe.
Formátujeme text
Modul Text obsahuje rozsáhlou množinu novinek ovlivňujících prezentaci textu. Nachází se již ve stavu kandidáta na doporučení, je tedy pravděpodobné, že zde popsané nové vlastnosti se budou lišit od finální verze dokumentu pouze nepatrně.
Velká část nových vlastností upravuje formátování textů psaných v, pro nás, exotických jazycích, převážně z asijského kontinentu. V tomto článku se o nich nebudu zmiňovat, neboť popis těchto nastavení dalece vybočuje z jeho zaměření. Naštěstí však tento modul obsahuje další nové vlastnosti aplikovatelné i v našich zeměpisných šířkách.
Dekorace textu na nové úrovni
V druhé verzi stylů se dala dekorace textu ovlivnit pouze vlastností text-decoration
, která dovolovala jednoduché podtrhnutí, přeškrtnutí nebo nadtrhnutí textu, případně jeho blikání. Přesné parametry těchto grafických operací, jako například šířka nebo barva podtržení, však již ovlivnit nešlo. CSS3 udělalo na tomto poli značný pokrok a zavedlo nové vlastnosti, kterými lze tyto dekorace textu definovat mnohem přesněji.
Všechny tři druhy dekorace pomocí čáry mají nyní samostatnou vlastnost. Jde o text-underline-style
, text-line-through-style
a text-overline-style
. Počáteční hodnota none
danou dekoraci vypne úplně, další hodnoty solid
, double
, dotted
, dashed
, dot-dash
, dot-dot-dash
a wave
určují styl dané čáry. Jejich význam je totožný s hodnotami používanými při nastavování stylu okrajů.
Dále půjde u jednotlivých čar nastavovat jejich barvu (vlastnosti text-underline-color
, text-line-through-color
a text-overline-color
) a šířku (text-underline-width
, text-line-through-width
, text-overline-width
). A konečně lze také ovlivnit, jestli má daná čára být vykreslena i přes znaky mezery, pomocí vlastností text-underline-mode
, text-line-through-mode
a text-overline-mode
.
V následujícím příkladu je textu nastaveno podtržení a přeškrtnutí, přičemž podtržení tvoří červená čára zasahující i do mezer a přeškrtnutí tvoří modrá čerchovaná čára, která je nad mezerami přerušována:
span
{
text-underline-style: solid;
text-underline-mode: continuous;
text-underline-color: red;
text-line-through-style: dot-dash;
text-line-through-mode: skip-white-space;
text-line-through-color: blue;
}
Zarovnávání do bloku
Konsorcium W3C si také posvítilo na formátování textu při zarovnávání do bloku pomocí text-align: justify;
. Nově lze při této volbě ovlivnit pomocí vlastnosti text-justify
algoritmus, kterým se do obsahu řádky distribuují mezery tak, aby zaplnil požadovanou šířku. V našich končinách může být použitelná hodnota newspaper
, která distribuuje mezery mezi jednotlivá písmena a ne jen mezi slova, jak je tomu u hodnoty inter-word
(takto se chovají prohlížeče nyní). Další hodnoty této vlastnosti pak pokrývají chování zarovnávání do bloku u exotických jazyků.
Přesněji lze také nastavit při zarovnání do bloku chování poslední řádky. Může být zarovnána doleva (jak je tomu doteď), doprava či na střed, nebo se může prohlížeč pokusit ji také zarovnat do bloku. Toto chování ovlivňuje nová vlastnost text-align-last
.
Hlavně pro jednořádkové elementy může být zajímavá hodnota size
této vlastnosti. Ta totiž prohlížeči přikazuje změnit velikost písma tak, aby se textový obsah daného elementu vešel na jednu řádku. Pokud je na této řádce použito více velikostí fontu, všechny musí být změněny ve stejném poměru. Doladit toto chování pak lze pomocí vlastností min-font-size
a max-font-size
, definujících minimální a maximální velikost fontu použitou při tomto typu zarovnání textu.
Interpretace mezer a konců řádky
V druhé verzi kaskádových stylů se konce řádky a mezery interpretovaly na základě vlastnosti white-space
. V CSS3 byly definovány nové vlastnosti, které samostatně definují chování těchto typů znaků. Jde o vlastnosti wrap-option
, linefeed-treatment
, white-space-treatment
a all-space-treatment
. Některé kombinace hodnot těchto vlastností pak lze vyjádřit i původní vlastností white-space
. Například hodnotu pre
této vlastnosti (chování XHTML elementu pre
) lze rozepsat následovně:
wrap-option: no-wrap;
linefeed-treatment: preserve;
white-space-treatment: preserve;
all-space-treatment: preserve;
V tomto případě může také dojít k situaci, kdy text přesáhne šířku elementu:
div
{
white-space: pre;
width: 200px;
border: 1px solid blue;
text-overflow: hidden; }
Pokud bude text v daném bloku příliš dlouhý, nevejde se do něj celý. Pro tento případ můžeme pomocí vlastnosti text-overflow-mode
nastavit, aby se na konci zobrazené části textu vykreslil znak nebo obrázek upozorňující, že text není zobrazen celý. Vlastnost text-overflow-ellipsis
pak definuje řetězec nebo obrázek, který se má použít pro toto upozornění.
V následujícím příkladu má již uvedený blok navíc nastaveno text-overflow-mode: ellipsis; text-overflow-ellipsis: "…";
:
Ukázka textu přesahujícího přes okraj bloku
Visící odsazení
Vlastnost text-indent
nyní za samotnou délku odsazení přijímá klíčové slovo hanging
, které převrátí odsazení naopak, tedy odsadí se všechny řádky kromě prvního: text-indent: 3em hanging
.
Zkrášlujeme fonty
Poslední krátká část tohoto článku se zabývá novými možnostmi týkajícími se fontů, které jsou popsány ve svém samostatném modulu Fonts. Ten se zatím nachází ve fázi pracovního návrhu, ale už nyní je zřejmé, že bude velmi podobný možnostem CSS2.
Zajímavou novinkou je možnost ovlivňovat z CSS vyhlazování (anti-aliasing) fontů. Slouží k tomu vlastnost font-smooth
, kterou lze vyhlazování úplně zakázat (hodnota never
), vynutit (always
) nebo jej nechat plně v režii prohlížeče (auto
). Použijete-li délkovou hodnotu, bude anti-aliasing použit pouze v tom případě, pokud je velikost font-size
větší nebo rovna hodnotě font-smooth
.
Poslední vlastností, o které se chci zmínit, je font-effect
, definující grafické efekty provedené přímo na fontu. Lze nastavit efekt vyrytého (engrave
) nebo vyvýšeného (emboss
) písma, respektive nechat vykreslovat pouze kontury jednotlivých znaků (outline
).
Souhrn
Podobně jako v předchozích článcích se i zde pokusím o shrnutí svých názorů na novinky z popisovaných modulů, které bych rozdělil na tři části. Vlastnosti týkající se formátování textů psaných v pro nás exotických jazycích nechám bez komentáře, protože jejich užitečnost nejsem schopný posoudit. Druhou skupinu tvoří efekty s textem, jako rozšířená kontrola dekorace pomocí čáry, a efekty prováděné s fonty. Tyto novinky považuji za užitečné a předpokládám, že by mohly být implementovány v dostatečné míře a tím pádem i využívány.
Třetí, nejrozsáhlejší skupinu tvoří popisované vlastnosti dotýkající se světa DTP. Zde vidím potenciální problém, funkce těchto vlastností mohou být některým uživatelům již nesrozumitelné a CSS se tím trochu vzdaluje od původního relativně jednoduchého stylovacího jazyka někam k profesionální sazbě. Na druhou stranu však tito uživatelé budou moci nové vlastnosti ignorovat (protože jejich počáteční hodnoty víceméně kopírují chování z CSS2, což je dostačující). Proto se domnívám, že tyto vlastnosti budou využívány pouze v omezené míře a stejná bude jejich podpora v prohlížečích. Toto je však pouze můj názor a budu vám vděčný za vaše postřehy v diskusi pod článkem.
Odkazy a zdroje
- Internationalized Text Formatting in CSS and XSL – dokument popisující některé možnosti formátování textu přidané do CSS3 (PDF, anglicky)
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
-
Responzivní design: Proč by ho neměl ignorovat žádný vývojář?
27. listopadu 2023 -
Jak se chránit před podvody na internetu – část 2
14. října 2024
Nejnovější
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024
kokot
Říj 21, 2016 v 17:20K čemu ten článek je, když tu nejsou obrázky?