Testování problematických prvků pro formátování textu

24.02.2007 - PaedDr. Petr Pexa Počet zobrazení: 128284  

V tomto druhém dílu na téma podpory nových příkazů jazyků XHTML a CSS pro nové verze internetových prohlížečů se zaměříme na příkazy formátování textu na stránce a opět především na ty, které byly v dřívějších verzích prohlížečů podporovány rozdílně či dokonce vůbec.

Zrcadlově otočený text

Ve standardu jazyka XHTML existuje nový příkaz < bdo > < /bdo> (bidirect off, bidi override), kterým je možné zrcadlově otočit text na stránce, tedy zobrazit text zprava doleva. Tento efekt najde využití pravděpodobně především v zemích, používajících např. arabštinu, kde se text píše právě zprava doleva (u číslic je tomu ale v arabštině naopak, píší se standardně zleva doprava). Otočení textu zajistí atribut dir s hodnotou rtl (right to left):

 

Obdobné vlastnosti (unicode-bidi a direction) obsahuje i jazyk CSS ve své druhé verzi:

Oba výše uvedené způsoby jsou již všemi testovanými prohlížeči podporovány dobře.

Nabízí se ještě jedno zajímavé využití těchto vlastností - pokud je použijeme u blokového objektu s nastavenou vlastností overflow (ta zapíná hodnotou scroll či auto zobrazení rolovacích pásů u prvků, do nichž se nevejde jejich obsah), zobrazí se rolovací lišty na levé straně takového objektu (standardně se rolovací lišty např. v textových formulářových polích zobrazují vpravo a neexistuje žádný speciální atribut elementu < textarea> , který by obdobný efekt nastavil). Nesmíme ale zapomenout obsah objektu (text) zobrazit současně zleva doprava ( direction:ltr ), jinak by byl otočený také, viz příklad. Tento efekt je ale zatím funkční jen v prohlížečích Firefox a Explorer, v Opeře se rolovací lišty vlevo nezobrazí.

• funkční ukázka

Vertikálně zobrazený text

V Internet (resp. Windows) Exploreru je podporována zajímavá (ale nestandardní) vlastnost writing-mode pro zobrazení textu vertikálně, tedy shora dolů (resp. zdola nahoru):

• funkční ukázka
  
  

Ve druhém případě (text zobrazený zdola nahoru) musí být navíc použity i vlastnosti z kategorie tzv. filtrů pro vertikální či horizontální převrácení prvku flipv() a fliph() , kterým bude věnován speciální díl tohoto seriálu. Filtry, stejně jako vlastnost writing-mode ale nejsou zatím podporovány prohlížeči Firefox a Opera.

Blikající text

Tento efekt je již dlouhá léta doménou prohlížečů s jádrem Gecko, tedy fungoval vždy jen v Mozille, Firefoxu či Netscape. Opera 9 tento efekt ale již podporuje částečně také, nesmí být ovšem současně použito jakékoliv další formátování (tučné písmo, kurzíva, podtržení, neproporcionální písmo apod.). Explorer tento nestandardní efekt nepodporuje ani v CSS variantě (viz 2. příklad).

Rolující text

Je možné se domnívat, že tento efekt je tak trochu reakcí fy Microsoft na efekt předchozí, fungoval totiž dlouhá léta jen ve verzích Exploreru. Firefox 2 a Opera 9 již tento nestandardní efekt ale podporují také. Pro správné zobrazení ve Firefoxu musíme ovšem použít CSS deklaraci velikosti prostoru, ve kterém text roluje (viz 2. příklad), v XHTML variantě nejsou tímto prohlížečem podporovány atributy width (resp. height ) a text běží přes celou šířku stránky.

Citace v uvozovkách

Ve standardu jazyka XHTML existuje element < Q> < /Q> , který by se měl používat na logické vyznačení citací na stránce. Grafický efektem tohoto příkazu by mělo být automatické zobrazení uvozovek. Opera i Firefox uvozovky zobrazují, Opera programátorské uvozovky rovné a oboje nahoře, Firefox ale někdy zobrazuje české (typografické) oblé a tím pádem nesprávně také oboje nahoře (zahajovací uvozovky oblé by měly být dole). Explorerem tento efekt podporován není.

Změna vzhledu prvku pohybem myši (tzv. hover efekt)

CSS pseudotřída :hover je standardně určena pro změnu vzhledu prvku přejetím myši přes prvek. Byla původně navržena (a používá se především) na změnu barvy či aktivaci podtržení u odkazů s nastaveným vypnutým podtržením ( text-decoration:none ) a také jako možná náhrada obdobných příkazů onmouseout a onmouseover v JavaScriptu. Pro odkazy funguje dobře ve všech aktuálních prohlížečích.

• funkční ukázka

V CSS2 je tato pseudotřída ovšem povolena i pro jiné elementy než < a> (např. < td> , < span> , < div> , < p> apod.). Ve Firefoxu, Opeře a kupodivu i Windows Exploreru 7 je již takto komplexně hover efekt podporován dobře, v Internet Exploreru 6 ale nikoliv, zde funguje jen u odkazů < a> .

• funkční ukázka

Podpora pseudoelementů p:first-line a p:first-letter

Následující odstavec by měl mít první řádek zleva odsazený, modrý a měl by mít první písmeno 2x větší (správná iniciála to ale není, tu je lepší řešit CSS vlastností float:left , viz další příklad). Tyto efekty fungují již celkem dobře ve všech prohlížečích, odsazení prvního řádku je ale nutné řešit standardní deklarací prvku, např. < p style="text-indent:2em"> , protože deklarace pomocí pseudoelementu p:first-line {text-indent: 2em} záhadně nikde nefunguje, další vlastnosti prvního řádku ( p:first-line {color: blue} ) a vlastnosti prvního písmene ( p:first-letter {font-size: 200%} ) fungují dobře. V Exploreru je ovšem odsazení mnohem větší než v Opeře a Firefoxu, je to způsobeno hodnotou 2em (šířka dvou písmen „m"), kterou Explorer chybně nastaví podle prvního zvětšeného písmene.

• funkční ukázka

Iniciála

Následující odstavec by měl mít na začátku typograficky správnou iniciálu. Tento efekt nejlépe vyřešíme CSS vlastností float:left a nastavením velikosti prvního písmene a meziřádkového prokladu.

• funkční ukázka

Efekt stínu

V syntaxi CSS2 se také nachází vlastnost text-shadow. V testovaných prohlížečích ale nefunguje, podporuje jí zatím pouze applovský prohlížeč Safari.

• funkční ukázka

V Internet Exploreru lze stín řešit filtrem shadow , jak již bylo zmíněno dříve, ostatní testované prohlížeče ale efekty filtrů nepodporují . Všechny filtry lze navíc aplikovat jen na blokové prvky, proto musí být text navíc ještě v < div> nebo v buňce tabulky < td> , pro které teprve filtry deklarujeme.

• funkční ukázka