No Future
Weblog přesunut na atd.havrlant.net
Obrázky v XHTML 2.0 a záhadný tag image
4 leden 2006, 15:15
rubrika XHTML-semantika
V návrzích XHTML 2.0 jsem objevil věc, která se mi opravdu zalíbila. Šlo o mnohem přístupnější a pohodlnější vkládání obrázků než v předešlých verzích HTML či XHTML.
Jak to funguje teď
Nyní je situace taková: Pokud chcete do stránky vložit nějaký obrázek, máte v zásadě tři možnosti. Buď použít klasickou značku<img>, nebo obrázek vložit přes pozadí nějakého prvku
v kaskádových stylech nebo (patrně nejméně známý způsob) pomocí
elementu <object> (nefunguje v MSIE – tady bude
zakopaný pes, proč se to nepoužívá :-)). Za čtvrtou možnost by se
ještě dala považovat značka <embed>, ale ta jednak není
ve specifikaci, ale hlavně zase nefunguje v MSIE.
Vložení obrázku teď příliš řešit nechci. Jde mi o alternativní obsah, pokud se obrázek z jakéhokoliv důvodu nemůže zobrazit. U obrázků vkládaných přes kaskádové styly je situace nejjednodušší, protože žádný alternativní obsah není (respektive pouze barva pozadí), to je také důvod, proč se tento způsob používá – slouží výhradně k vkládání dekorativních obrázků, či obrázků, které prostě alternativní obsah nemají. Řešení při použití značky
<img> je použít povinný atribut
alt, do kterého zapíšeme alternativní text, který se
zobrazí, když obrázek není k dispozici. Značka
<object> nabízí lepší možnosti, ale vzhledem
k jeho nepoužitelnosti se o něm nyní bavit nechci.
Jak to bude fungovat v XHTML 2.0
Předem podotýkám, že návrh není konečný, tudíž se to ještě teoreticky může změnit. Doufám ale, že k výraznějším změnám nedojde (alespoň ne k horšímu). Takže značka<img>
bude nyní „párová“ a obsah elementu bude sloužit právě jako
alternativní text (prakticky stejně to funguje u značky
<object>). Zápis nějakého obrázku by v XHTML
2.0 mohl vypadat takto:
<img src="hora.jpg">Sněžka v zimě</img>Pokud tedy obrázek není k dispozici, zobrazí se text „Sněžka
v zimě“. Zatím tedy žádné změny. Přesto tento zápis má
jednu obrovskou výhodu – text v elementu <img>
totiž můžete pohodlně formátovat a značkovat, jako jakýkoliv jiný obsah
dokumentu. Můžete tedy snadno vyznačit jednotlivé části alternativního
obsahu a nemusíte tak používat nepohodlný atribut longdesc,
který stejně byl prakticky nepoužitelný. Tudíž tento zápis by byl
naprosto v pořádku:
<img src="sleva.jpg">Na obuv <strong>sleva 30%</strong></img>Jistě chápete, že tento způsob zápisu nabízí mnohem lepší sémantiku a také větší možnosti následného formátování. Pokud nyní chcete stylovat alternativní text, můžete ho nastylovat pouze celý najednou, nikoliv jen jeho část. Příklad:
<img src="neexistuju.jpg" alt="červený alternativní text" style="color:red">Stejně tak teoreticky můžete jako alternativní obsah zvolit opět obrázek. Například pokud používáte formát obrázků png a některý prohlížeč tento formát nepodporuje, můžete do alternativní obsahu dát stejný obrázek ve formátu jpg (a jeho alternativní obsah již bude prostý text). Pokud ted obrázek png nebude k dispozici, sáhne prohlížeč po obrázku v jpg. Zápis by mohl vypadat takto:
<img src="obrazek.png">
<img src="obrazek.jpg">
alternativní obsah
</img>
</img>Další vychytávka
Ovšem XHTML 2.0 se s tímto nespokojilo a vymyslelo ještě
rafinovanější způsob na vkládání obrázků. Atribut src,
který v sobě nese adresu obrázku, může totiž obsahovat
každý element. To znamená, že třeba můžete tento atribut
vložit do nadpisu, v prohlížeči se zobrazí obrázek (text nadpisu
nikoliv) a když nebude obrázek k dispozici, zobrazí se právě text
nadpisu. Zápis by tedy vypadal nějak takto:
<h1 src="nazev.jpg">Seznam, najdu tam co neznám</h1>Jedná se v podstatě o tento zkrácený zápis:
<h1><img src="nazev.jpg">Seznam, najdu tam co neznám</img></h1>Tento styl zápisu se mi opravdu zamlouvá a bude zajímavé, kdy ho budeme mocit použít. Upřímně doufám, že se toho ještě dožiji.
Do hry vstupuje tajemný tag image
Že tento tag neznáte? Nedivím se vám, neznal ho prakticky nikdo, dokud ho
Radek Hrabůvka neobjevil a
nezmínil se o ní v diskusi. Omrzelo už vás vkládání obrázku
přes značku <img>? Pak tedy můžete zkusit použít tuto
značku. Tento zápis normálně vloží do stránky obrázek, prohlížeče
(MSIE, FF, O, jiné jsem nezkoušel) obrázek opravdu zobrazí:
<image src="obrazek.jpg">Nevěříte-li, můžete si to
vyzkoušet. Podívejte se do zdrojáku, logo tohoto weblogu je vloženo
přes značku <image>. A kde se vlastně tato značka
vzala? No, moc informací jsem o ní nesehnal, docela špatně se hledá
googlem ;-). Ale něco přece.
Tento tag byl součástí „specifikace“ HTML plus, za kterou stál kdo jiný než Tim Berners-Lee. Nejzajímavější na ní ovšem je ta syntax. Pokud se dobře podíváte, uvidíte tam následující příklad:
<image align=top src="http://spoof.cern.ch/people/tbl.gif">A photo of Tim Berners-Lee</image>Tento zápis se poměrně dost podobá nově vzniklé syntaxi vkládání
obrázků v XHTML 2.0 (obsah elementu je opět chápán jako alternativní
text). Bohužel, žádný z dnešních prohlížečů již tuto
rozšířenou syntaxi nepodporuje, takže předchozí zápis budou
prohlížeče vykreslovat špatně, vykreslí jak obrázek, tak text. Škoda,
že se tehdy nakonec prosadila myšlenka atributu alt,
z jakého důvodu opravdu netuším, ale elementu
<image> je podle mě docela škoda.
komentáře
Hledej na weblogu:
Ereses
— 4. leden 2006, 17:00
odp. Jak to bude fungovat v XHTML 2.0 >> Velmi příjemná zpráva :-) Pokud to takhle bude fungovat, usnadní to spoustu práce. Snad i prohlížeče k tomu budou přistupovat korektně.
— 4. leden 2006, 18:54
Pre prístupnosť budú tieto zápisy užitočné, ako alt a longdesc. Ktovie, koľko budem mať rokov, keď to budem môcť vyskúšať. Dúfam, že starými, trasúcimi rukami budem ešte vedieť ťukať do klávesnice :)
— 4. leden 2006, 18:58
Velice se mi líbí možnost nahrazení textu obrázkem tak jednoduchou metodou jak píšeš. Odpadá tím docela dost zbytečné práce, ale na druhou stranu to už trochu popírá smysl objektového modelu stránky. Prostě se XHTML míchá do vzhledu stylům, což zas podle mě není tak ideální. Spousta lidí to bude využívat špatně a to ani nemluvím o podpoře v prohlížečích.
O tagu image jsem ale už četl v nějaké knize, ale ruku na srdce, kdo si bude zbytečně komplikovat život.
— 4. leden 2006, 22:47
Marty: Moc nechápu, co jsi myslel tím, že se XHTML míchá do vzhledu stylům. Je to pouze lepší zápis atributu
alt, který si můžeš vyznačit HTML značkami a lépe tak vystihnout alternativní obsah. Nevidím na tom nic špatného. Vzhled budou pořád určovat styly.O tagu image jsem zmínil spíš jen tak pro zajímavost, používat ho nijak nedoporučuji.
— 5. leden 2006, 00:10
Již z článku samotného lze vyvodit, že výhodnější bude počkat si na lepší podporu ze strany Exploreru než na vůbec nějakou podporu XHTML 2 alespoň v něčem. Navíc trend XHTML představuje vrchol nepřístupnosti díky nárokům na parser, tudíž výmysly v XHTML 2 nemohou být přístupnější.
Webem bez obrázků brouzdá málokdo. Je sice milé, že si mohu alternativu hezky označkovat, ale jako alternativní text postačí ve většině případů vždy jen prostý alternativní text. Někdy ani ten není potřeba.
K té možnosti osrcovat libovolný element: Obrázek je ze sémantického hlediska pořád obrázkem, proto si plným právem zaslouží element < img> (jestli ne, co si ho zaslouží?). Další háček tohoto vynálezu spočívá v tom, že cílové zařízení nepodporující obrázky nerozezná, která část textu je přístupná pro ty, kdo obrázky znají. Konkrétně: jak pozná bot vyhledávače, že text uvnitř < h1 src="semtex.bum">jsem text< /h1> uvidí jeho uživatelé? Dokud si neověří MIME typ onoho „obrázku“, neví, jakou váhu má textu uvnitř přidělit. Může mít typ „uplny/nesmysl“, takže text vidí každý, nebo může mít „image/gif“ – být třeba průhledným jednopixelovým GIFem, takže text nevidí prakticky nikdo. Bez dodatečné HTTP komunikace se tuto zásadní informaci nedozví. To není moc praktické.
— 5. leden 2006, 12:10
Timy: Ne, já jsem měl na mysli nahrazení textu obrázkem (atribut src v nadpisu). Alternativní text je v pořádku, trochu mi jeho vylepšení přípomíná přechod z RSS na Atom.
— 5. leden 2006, 15:42
Chamurappi:
Mohou být přístupnější než v XHTML 1 ;-). Ale pochopitelně při odesílání application/xhtml+xml stránka samotná bude nepřístupná celá. Chudáci textové prohlížeče… Ale tohle jsem tady řešit nechtěl, šlo mi čistě o ten zápis.
Souhlasím, ale sám jsi podotkl „ve většině případů“. Někdy se tedy hodí. U běžných obrázků většinou stačí, ale ve chvíli, kdy by se měl správně použít atribut
longdescse tento způsob vyplácí.No, pokud obrázek reprezentuje nějaký obsah (třeba tento) , neviděl bych to jako něco strašného. Stejný případ obvykle bývá u nadpisů, většinou jde pouze o „hezčí“ vzhled písma.
— 11. leden 2006, 21:32
Drafty XHTML2 jsem nestudoval, ale je zde tuším stále možnost, že bude img zavržen ve prospěch object. Co ale spíš je jinak je to, že src neurčuje ekvivalent obrázku, ale ekvivalent odkazu.