CSS2 – mluvené styly

28. ledna 2003

•

Dnešní, spíše teoretický, závěrečný článek bude trochu netypický. Pravděpodobně nebudete mít příležitost si nově získané vědomosti někde vyzkoušet. Také budou chybět tabulky použitelnosti v daném prohlížeči. Řeč totiž bude o mluvených stylech (aural style sheets). Symbolicky se tak rozloučíme se seriálem, který se snažil ukázat progresivní cesty ve webdesignu.

Jak si mluvené styly nejlépe představit? Asi nejčastěji jsou kaskádové styly používány na formátování textu a nastavení písma. Pomocí font-family lze určit konkrétní font nebo zvolit font generický a vlastností font-size ovlivníte jeho velikost. Samozřejmě takových vlastností existuje celá řada a jejich vzájemnými kombinacemi lze získat vizuální podobu textu, která autorovi vyhovuje.

A nyní si představte, že si text neprohlížíte na obrazovce, ale pomocí čtečky (hlasového syntezátoru) si jej necháte přečíst. A možná vás napadne, že by nebylo úplně od věci nějak „formátovat“ i tento hlasový výstup. Například kontrolovat hlasitost, používat pro nadpisy ženský hlas a pro odstavce mužský a za důležitými větami nechat na chvíli pauzu.

A přesně k tomu slouží mluvené styly. Podívejme se tedy, co nám vše umožňují.

CSS2 a mluvené styly

Norma CSS2 definuje pro mluvené styly vlastní třídu média aural. Mluvený styl tedy můžeme zapsat do bloku @media aural {}. Není to však nutné, neboť vlastnosti patřící do množiny mluvených stylů nijak neovlivňují samotný vzhled. Lze je bez problému psát přímo mezi ostatní klasické vlastnosti.

Čtení elementu

Nastavení hlasu

Základní vlastností je voice-family, která je podobná svému textovému protějšku font-family. Její hodnota je tvořena seznamem čárkami oddělených hlasových fontů. Podobně jako při vizuálním formátování můžete nejdříve uvést několik konkrétních hlasových fontů a pro jistotu na konec přidat i font generický. Čistě na ukázku zkusme nastavit hlavním nadpisům, aby byly čteny ženským hlasem: h1 {voice-family: Anna, "angry wife", female;}. Pokud na příslušném zařízení nejsou nalezeny hlasy Anna nebo angry wife (oba dva jsem si pochopitelně vymyslel), je použit generický hlas female. Dalšími generickými hlasy, které W3C předpokládá, jsou male, child, tedy mužský a dětský hlas.

Další důležitou charakteristikou, která vás možná napadla, je hlasitost zvukového výstupu. Ta se určuje pomocí vlastnosti volume. Můžeme ji nastavit buď číselnou hodnotu od 0 do 100, kdy 0 představuje nejmenší slyšitelnou hlasitost, 100 nejvyšší bezpečnou úroveň, nebo pojmenovanými hodnotami x-soft, soft, medium, loud, x-loud. Také lze použít hodnotu silent pro úplné ticho nebo relativní procentuální hodnotu.

Některý text by také mohl být čten jinak rychle. K tomu slouží vlastnost speech-rate. Její hodnota se udává ve slovech za minutu. Také se mohou použít pojmenované hodnoty x-slow, slow, medium, fast, x-fast a relativní hodnoty slower, faster.

Další zajímavou hodnotou je pitch, určující výšku (frekvenci) hlasu v hertzích. Typický mužský hlas má kolem 120Hz, zatímco ženský až 210Hz. Také lze nastavit rozsah frekvence pomocí vlastnosti pitch-rate v intervalu 0-100. Pokud chceme získat monotónní hlas, zvolíme nulovou hodnotu, naopak hodnota okolo 50 poskytuje normální lidskou modulaci.

Další možností mluvených stylů je nastavení přízvuku (stress). Toho docílíme pomocí vlastnosti stress. Taktéž nabývá hodnoty z intervalu 0-100, hodnota 50 představuje normální přednes v angličtině.

No a konečně vlastnost richness ovlivňuje bohatost (jas) hlasu. Průměrná hodnota 50 představuje normální přednes. Vyšší hodnota pak zřetelný jasný hlas a nižší zase klidnější a laskavější.

Způsob čtení textu

Ač se to možná na první pohled nemusí zdát, existuje více možností, jak přečíst daný text.

Vlastností speak lze nastavit, zda se má text číst normálně, nebo hláskovat. Docílíme toho pomocí hodnot normal, spell-out. Další hodnotou může být none přikazující, že se text nemá číst vůbec a má být přeskočen. Všimněte si, že existuje významný rozdíl mezi volume: silent; a speak: none;. Pro první nastavení platí, že text sice nebude přečten, ale zůstane pomlka odpovídající jeho délce. Naopak druhá možnost zajistí, že daný text bude přeskočen úplně. Analogicky se chovají visibility: hidden; a display: none; při vizuální prezentaci dat.

Další vlastnost ovlivňující způsob čtení je speak-punctuation a určuje čtení interpunkčních znamének. Standardně (hodnota none) čteny nejsou, ale jsou namísto nich vloženy pomlky. Někdy ovšem můžeme požadovat, aby interpunkční zaménka čtena byla (například při výpisech kódu programovacího jazyka). Toho docílíme hodnotou code.

Také se nám může hodit nastavení čtení čísel. Někdy budeme chtít číst celé číslo jako hodnotu (151 jako sto padesát jedna), jindy zase po jednotlivých číslech (151 jako jedna pět jedna). K tomu nám poslouží vlastnost speak-numeral, která může nabývat hodnot digits (čtení po jednotlivých číslech) nebo continuous (čtení dohromady).

Generovaný obsah

Podobně jako při vizuální prezentaci můžeme občas požadovat vložení určitých zvuků nebo pomlk na začátek, respektive konec elementu.

U některých elementů (například u nadpisů) by bylo zajisté vhodné, aby jejich přečtení předcházela pomlka. Tohoto chování docílíme pomocí vlastností pause-before, pause-after, pause. Určitě vás nepřekvapí, že vlastností pause-before nastavíte pomlku před a vlastností pause-after pomlku za elementem. Vlastnost pause představuje zkrácené volání obou předchozích. Mohou nabývat číselné hodnoty (v sekundách a milisekundách, jednotky s, ms) a nebo se procentuálně vztahovat k vlastnosti speech-rate.

Někdy budeme chtít vložit před, respektive za element nějaký zvukový soubor, nikoliv pouze pomlku. Dosáhneme toho pomocí vlastností cue-before, cue-after, cue. Jejich hodnotu tvoří adresa zvukového souboru. I zde je vlastnost cue zkráceným ekvivalentem cue-before, cue-after.

Čistě pro procvičení nyní nastavme všem nadpisům druhé úrovně, aby je předcházela pomlka délky 1 sekunda a aby se po přečtení přehrál soubor dong.wav:

h2
{pause-before: 1s;
cue-after: url(„dong.wav“);}

Pokud se na jedné straně elementu setkají obě vlastnosti pro vložení pomlky a souboru, je nejdříve realizována pomlka a až poté přehrán zvukový soubor následovaný obsahem samotného elementu.

Zvuková kulisa při čtení

Vlastnost play-during je analogická k vlastnosti background vizuálního zobrazení. Nastavuje totiž zvuk, který bude přehrán (nebo přehráván) v průběhu čtení elementu. Základní hodnotu tvoří adresa a jméno samotného zvukového souboru. K tomu můžete přidat klíčové slovo mix, které značí, že zadaný zvuk je vmixován do zvukové kulisy rodičovského elementu. Pokud toto klíčové slovo není uvedeno, ztichne zvuk rodičovského souboru a je přehráván pouze aktuální soubor.

Další klíčové slovo repeat prohlížeči nařizuje, aby byl daný zvukový soubor přehráván stále dokola. Toto je samozřejmě nutnost v případě, že zvukový soubor je kratší než samotná stopáž elementu. Klíčové slovo auto určuje, že se má pokračovat v přehrávání zvuku rodičovského elementu. Pokud chcete vypnout jakoukoliv kulisu (tedy i kulisu rodičovského elementu), provedete to hodnotou none.

Následující styl způsobí, že pod elementem strong bude stále dokola přehráván soubor alert.wav a pod elementem em soubor warning.wav, který bude vmixován do zvuku rodičovského elementu:

strong {play-during: url(„alert.wav“) repeat;}
em {play-during: url(„warning.wav“) mix repeat;}

Směr zvuku

Poslední dvě vlastnosti azimuth, elevation umožňují nastavení směru, ze kterého bude zvuk přicházet. Pochopitelně ne každý systém bude schopen takový požadavek splnit, ale i obyčejné stereo se dokáže alespoň částečně s tímto úkolem vypořádat.

Vlastnost azimuth určuje horizontální směr zvuku. Nastavuje se ve stupních (jednotka deg) v rozsahu -360deg až 360deg. Úhel 0deg popisuje přímý čelní směr, 180deg zase směr zezadu. Také lze použít pojmenované hodnoty left-side, far-left, left, center-left, center, center-right, right, far-right, right-side a relativní hodnoty leftwards, rightwards.

Pro nastavení směru zvuku ve vertikálním směru slouží vlastnost elevation. Její hodnotu tvoří úhel od -90deg do 90deg, 0 deg opět značí přímý směr zepředu. I zde lze použít pojmenované hodnoty below, level, above a relativní vyjádření higher, lower.

Čtení tabulky

Pokud se hovoří o problematice XHTML a CSS, jsou tabulky věčným evergreenem. Nejinak je tomu při nastavování mluvených stylů. Podívejme se na následující krátkou tabulku:

<table>
<tr>
  <th> </th>
  <th>výdělek</th>
  <th>výdaje</th>
</tr>
<tr>
  <th class=“header“>včera</th>
  <td>50,-</td>
  <td>500,-</td>
</tr>
<tr>
  <th class=“header“>dneska</th>
  <td>10,-</td>
  <td>1500,-</td>
</tr>
</table>

Nabízí se více možností, jak ji přečíst. Problém je totiž v záhlavích tabulky. Mají se přečíst za každou datovou položkou nebo jen jednou? To lze nastavit vlastností speak-header. Styl .header {speak-header: once;} přinutí prohlížeč přečíst tabulku přibližně takto:

včera výdělek padesát výdaje pětset
dneska výdělek deset výdaje patnáctset

Zatímco druhá možnost nastavení .header {speak-header: always;} způsobí toto:

včera výdělek padesát včera výdaje pětset
dneska výdělek deset dneska výdaje patnáctset

Vlastnost speak-header tedy může nabývat jedné z hodnot once, always. Dovoluje nám určit, zdali se má určité záhlaví tabulky číst pouze jednou nebo znovu před každou datovou položkou.

Vše jednou končí

A nejinak je to s tímto seriálem. Doufám, že vás tento spíše teoretický článek nijak neotrávil a naopak zvýšil váš zájem o normu CSS2. Stejně tak věřím, že vám celý seriál ukázal nové cesty a východiska v nesmírně zajímavém oboru, kterým webdesign rozhodně je.

Lze z celého seriálu vyvodit nějaký smysluplný závěr? Jasně se ukázalo, že podpora už 5 let starého standardu není zdaleka taková, jakou bychom si ji všichni přáli. Jednoznačně nejhorším prohlížečem se ukázal být IE6, který v podstatě ignoruje všechny novinky a to včetně skutečně elementárních věcí jako nové selektory, podpora tisku nebo generovaného obsahu. Naopak u konkurenčních prohlížečů je patrná snaha o implementaci co největší množiny vlastností. Pomyslným vítězem se podle mého názoru stává Opera 6.05, která nejlépe zvládá nastavení tisku a generovaný obsah včetně číslování. Ovšem ani Mozilla 1.1 na tom není nijak špatně a před IE6 má velký náskok. Uvidíme, jak se s tím vývojáři Microsoftu vypořádají.