Když při :hover mění text svoji šířku…

Když při :hover mění text svoji šířku, poukazuje to na nedostatečné splynutí webdesignerovy mysli s duchem internetu. Konkrétně se jedná o případ, kdy tvůrce webu chce, aby při najetí myši na odkaz změnil text odkazu svůj řez. Nebo aby se ztučnil. Vykreslil se kurzívou. Zvětšil prostrk mezi jednotlivými písmeny. Cokoliv, co většina z vás pravděpodobě považuje za nepřirozené.

Po delší době jsem zavítal na diskusi jakpsatweb.cz. Narazil jsem na poměrně zajímavý dotaz, který se týkal přesně problému, který jsem nastínil výše.

Zlobivá kurzíva

Uživatel Celebi žádal o pomoc při řešení problému, kdy při najetí myši na odkaz mění text odkazu sklon textu z normálního na kurzívu. Kurzívou psaný text je však o něco málo širší než text normální, proto se při najetí vždy následující text posunul, což samozřejmě není zamýšlené chování. Problém můžeme zapsat například takto: 
<style type="text/css">
  * { font-family: "Times New Roman", serif; }
  a { color: red; }
  a:hover { color: blue; font-style: italic; }
</style>
...
<p>
  Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. In nulla mauris...
</p>

Podívejte se na ukázkovou stránku a najeďte na odkaz. Uvidíte, že zbytek řádku se posune vpravo, možná se i nějaké to slůvko přemístí na nový řádek, čímž způsobí hotové kaskádovité kataklyzma, kdy se přemístí i slovo z dalšího řádku, a to způsobí přesun slova z řádku následujícího… myslím, že nemusím pokračovat. Toto chování je tedy jednoznačně nežádoucí.

Rozbor problému

Hned na úvod musím říci, že všechny odpovědi v odkazované diskusi obsahovaly radu, aby se při hoveru styl písma vůbec neměnil. Toto je i mé stanovisko a předesílám, že v tomto případě více než v jakémkoliv jiném platí, že vyřešit problém znamená se mu vyhnout.

Problém mě však i přesto zaujal a rozhodl jsem se jej zkusmo vyřešit alespoň pro používané, moderní prohlížeče. Nejprve je důležité zamyslet se, co je k řešení třeba. Evidentně se vše točí kolem toho malého místečka, o které se odkaz rozšíří, když na něj najedeme myší. Je tedy třeba, aby už původní odkaz měl tohle místo napravo vyhrazeno. Při najetí myši se pak text jen do tohoto místa roztáhne a text za odkazem se ani nehne.

Jak však zjistit šířku tohoto prostoru? Nějaká konstanta nepřipadá v úvahu, což dokazuje toto řešení-neřešení:

<style type="text/css">
  * { font-family: "Times New Roman", serif; }
  a { color: red; padding-right: 0.7em; }
  a:hover { color: blue; font-style: italic; padding: 0; }
  .vetsi { font-size: 120%; }
</style>
<p>
  Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. In nulla mauris...
</p>
<strong><p class="vetsi">
  Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. In nulla mauris&hellip;
</p></strong>

Definoval jsem dva odstavce o odlišné velikosti textu (ukázka). Odkazům jsem „natvrdo“ přidal pravé vnitřní odsazení o šířce 0.7 čtverčíku, které při najetí myši zruším. Při standardní velikosti textu by mělo tohle nastavení ošetřit situaci v prvním odstavci. Druhému odstavci, ve kterém je definováno větší písmo, však tohle odsazení vyhovovat nebude. Šlo by jistě dosáhnout zajímavých výsledků při použití jiných kombinací jednotek, avšak univerzální řešení takto nestvoříte. Je to tedy slepá ulička.

Obecné řešení

Je třeba definovat kontejner o šířce, která bude stejná jako text odkazu po najetí myši. Do tohoto kontejneru pak odkaz umístit. Tím se zajistí optimální prostor pro rozšířený text. Vložíme tedy odkaz do neutrálního řádkového elementu, spanu. Tento span musí být stejně široký jako odkaz v hoveru. Vpíšeme do něj tedy stejný text jako do odkazu a nastavíme mu, aby jej vykresloval kurzívou. V této chvíli se nastavená kurzíva zdědí i odkazem, proto mu nastavíme normální sklon. 
<style type="text/css">
  * { font-family: "Times New Roman", serif; }
  a { color: red; font-style: normal; }
  a:hover { color: blue; font-style: italic; }
  span { color: #bbb; font-style: italic; }
</style>
...
<p>
  Lorem ipsum dolor sit amet, <span>consectetuer adipiscing<a href="#">consectetuer adipiscing</a></span> elit. In nulla mauris...
</p>

Teď máme span široký jako text při hoveru + text bez hoveru (ukázka). Naším cílem je teď span o šířku odkazu bez hoveru zkrátit. Když se podíváte na příklad, jistě vás napadne řešení. Ano, stačí pomocný text ve spanu zneviditelnit, absolutní pozicování využít k vyjmutí odkazu z dokumentu a jeho přesunutí na začátek spanu. Tím se span zkrátí o šířku odkazu a ustálí se na šířce svého obsahu, která odpovídá šířce odkazu po najetí myši. Zní to složitě, vím, ale kód mluví zcela jasně:

<style type="text/css">
  * { font-family: "Times New Roman", serif; }
  a { color: red; font-style: normal; position: absolute; top: 0; left: 0; visibility: visible; }
  a:hover { color: blue; font-style: italic; }
  span { color: #bbb; font-style: italic; position: relative; visibility: hidden; white-space: pre; }
</style>
...
<p>
  Lorem ipsum dolor sit amet, <span>consectetuer adipiscing<a href="#">consectetuer adipiscing</a></span> elit. In nulla mauris...
</p>

Podívejte se na ukázku finálního řešení. V této chvíli obsahuje span tentýž text kurzívou jako odkaz. Odkaz je vyňat z dokumentu absolutním pozicováním, ve spanu tudíž už není. Vizuálně je odkaz umístěn na začátek spanu. Vzhledem k tomu, že span je neviditelný, zůstane po něm v dokumentu prázdné místo o šířce textu odkazu psaného kurzívou. Toto místo přesně vyhovuje šířce odkazu po najetí myši. Aby nedocházelo uvnitř odkazu k zalomení řádku, přidal jsem také definici white-space: pre, která zabrání zalomení řádku uvnitř spanu. Žádné posouvání textu se nekoná, moderní prohlížeče (IE5+, Moz1+, FF, Op7.5+) nemají s touto konstrukcí problémy, všichni jsou zdánlivě spokojení.

Shrnutí

Zkušenější tvůrci mezi vámi se již ušklíbají. Ano, tohle řešení je samozřejmě v praxi nepoužitelné. Tolik zbytečného kódu kvůli jedné estetické libůstce, navíc nepřístupného, by mohl použít jen blázen. Přesně tak, po dnešku totiž může. :o)

Osobně před tímto řešením také varuji. Odkazy jsou esencí Internetu a toto řešení je znepřístupňuje (!) v prohlížečích s částečnou podporou CSS (IE4, Op7-), proto můj postup prosím v praxi nikde nepoužívejte. Uvádím jej pouze jako zajímavost a demonstraci různorodosti kaskádových stylů.

Umíte lépe?

Uvedený kód jsem stvořil na koleni, je tedy velmi pravděpodobné, že existuje lepší řešení. Možná snad i řešení přístupné, nevyžadující obalové prvky a duplikaci textu. V tom případě bych byl rád, kdybyste se o takové řešení mohli podělit v komentářích. Díky!

14. 5. 2006, 16.00 | (X)HTML, CSS.


38 komentářů k “Když při :hover mění text svoji šířku…”

  1. halogan říká:

    2. Šílené řešení ;) Já mám ještě šílenější, vyžaduje jeden span + jeden atribut odkazu, kterej má obsah jako text odkazu – např. rel nebo title. Navíc to funguje jen v Opeře, Gecku a KHTML. Tudíž prakticky k ničemu.

    http://halogan.php5.cz/kurziva.html

    14. 5. 2006 v 17.25

  2. Pjotr říká:

    3. Prečo by sa to nemohlo používať? Áno, nie teraz, ale v budúcnosti by mohlo.. Vezmime si taký stav CSS, kedy pomocou vlastnosti CSS sa nadefinuje šírka odkazu (so všetkým, čo k nemu patrí) taká, aká bude pri jeho :hover efekte. Proste ide len o to, implementovať to do CSS pomocou nejakej definície, napríklad width:hover.

    Nevidím v tom problém. Pošlite to niekto do W3 ;-).

    I keď, nepáči sa mi žiadna zmena rezu písma pri odkazoch a ich efektoch.

    14. 5. 2006 v 17.25

  3. Pjotr říká:

    4. [2] * pošlite to niekto do W3C ;-).

    14. 5. 2006 v 17.27

  4. Pavel Růžička říká:

    5. Nápad zajímavý, nicméně díky duplikaci textu podle mě vhodný tak pro prezentaci na CD nebo nějaký intranetový help, na skutečném webu se obávám problému porušení sémantiky dokumentu, zkuste si takovou stránku zobrazit na zařízení bez podpory stylování, hlasovou čtečkou… Co takovému obsahu řeknou vyhledávače?

    Nejeví se mi to jako dobrý nápad – možná by šlo ten duplicitní text vyrobit až teprve skriptem, aby nebyl součástí textu dokumentu, poté by bylo možné z něj dopočítat a nastavit patřičnou šířku boxu.

    14. 5. 2006 v 18.21

  5. zirafka říká:

    6. [3] * pošlete to někdo do WC (-;

    btw.: jediný web na kterém toto poskatování vnímám a vadí mi to je La trine. A hele: koukla jsem tam a už žádné posouvání textu a odkazy stojí pěkně zpříma, vzorně podrhané. Dokonce trvale zhubli na font-weight:normal ((-:

    14. 5. 2006 v 18.39

  6. Tomáš Kučera říká:

    7. Taky jsem si s tím pohrál, ovšem díru do světa pravděpodobně neudělám, mám přijatelné řešení pouze pro Mozillu:

    A { COLOR: red;letter-spacing: 1px; } A:hover { COLOR: blue; FONT-STYLE: italic;word-spacing: 1px;letter-spacing: 0.5px; }

    V 50 % dojde jen k malinkému odskočení, v 50 % je to naprosto OK.

    Ovšem takovouhle prasárnu bych vůbec do světa nepouštěl :-) Sám preferuji: a:link {text-decoration: underline;} a:hover {text-decoration: none;}

    14. 5. 2006 v 18.47

  7. error414 říká:

    8. Tohle me pripomina tu soutez kde se co nejjednodussi cinost udela tou nejtezsi cestou.

    14. 5. 2006 v 19.00

  8. Leo říká:

    9. Jen jsem to letmo prelitl a je to primo proti filozofii KISS (Keep it simple…), bez narazky. Proste mnohem jednodussi je geometrii odkazu nemenit. Jsou i weby, kde pri najeti odkaz odskoci tak, ze se na neho mysi proste nedostanete :-) On je a:hover stejne jen nezajimava ozdoba, pokud neslouzi k rozbaleni podmenu (a i to je, vsichni vime jak, funkcni v IE), mnohem zajimavejsi pro uzivatele je a:visited. Ale jako cviceni dobry. Leo

    14. 5. 2006 v 20.17

  9. dgx říká:

    10. kvůli jedné estetické libůstce

    Nebylo by přesnější napsat neestetické libůstce? :-)

    Co se pokusit vytvořit co nejsložitější řešení? Třeba text nahradit obrázkem ve formátu GIF, jehož kód bude vygenerován pomocí nesmírně důmyslného JavaScriptu, následně poslán AJAXem na server, kde ho s otevřenou náručí přijme v PHP 3 naprogramovaná Web Service, konkrétně by šlo o nějaké zvláštní nekompatibilní rozšíření XML/RPC, ta obrázek zpřístupní na webu a jeho URL vrátí přes jakobySOAP service, bude však v šifrovaném tvaru, což ovšem nebude představovat žádný problém, protože o dekódování se postará Flash, který se mezitím natáhne z úplně jiného webu, respektive jen jeho první polovina, protože…

    15. 5. 2006 v 9.14

  10. Error414 říká:

    11. [9] tak tohle jsem presne myslel. Ale tvuje metoda musi byt osetrena nejakym linkerem aby pouzivala co nejpomalejsi konstrukce. JInak je to v pohode.

    15. 5. 2006 v 10.21

  11. Spud říká:

    12. Zkusil jsem Derův výsledek převést na generování za běhu javascriptem… výsledkem je jedna funkce, která se zavolá po natažení stránky a vytvoří potřebný SPANy a ostyluje je (když se uklidí do externího souboru, tak vypadá zdroják pěkně a přístupně). Zkoušel jsem pod IE 6 a Firefox 1.5… Opera vzdoruje. Každopádně, lze to použít i jako alternativu pro prohlížeče, který to podporují jako vlastnost navíc a ty, který to neumí použijí klasika změnu barvy. Ještě jsem přidal test na název třídy odkazu = když obsahuje ‚nebalit‘, zůstane nezměněn.

    javascriptová ukázka

    15. 5. 2006 v 15.05

  12. Marek říká:

    13. >[6] * Ovšem takovouhle prasárnu bych vůbec do světa nepouštěl :-)

    …a presto jsi to udelal…

    15. 5. 2006 v 18.57

  13. Celeb říká:

    14. No podla mojho nazoru je to velka a neprakticka blbost… pretoze to ani nevyzera velmi dobre s tym, ze jedine mozne riesenie tam je nechat volny priestor, co nevytvara velmi prijiemny dojem… Vymyslel si ale celkom dobry sposob… mna by ten span asi nenapadol…

    P.S. ja nemam s celebim nic spolocne a navyse aj povod nasich prezyvok je uplne rozlisny ;)

    15. 5. 2006 v 20.56

  14. dgx říká:

    15. [3] Žirafko, na La Trine jsou tučné nenavštívené odkazy, trvale tedy zhubnou po navšítení. Nejde tedy o klasický hover efekt, ale onclick efekt.

    15. 5. 2006 v 23.42

  15. Jozef Benko říká:

    16. [9] Mno, už som nad tým rozmýšľal a došiel som presne tam, kde Ty. Ale prišiel som na to, ako to učiniť ešte viac efektívnejším. Takže dodatok: Na serveri budú čakať otroci (ktorých kúpime s Lotyšska) a tí tam budú v promiskuitnom stave pripojení na sieť, priamo za firewallom. Dáta budú odchytávať a posunkovou rečou odovzdávať hluchým cirkeným hodnostárom. Tí to prinesú do Vatikánu, pápež dáta posvätí a pošle doporučeným dopisom na Hawai. Tam z listov spravia ananásovú pizzu a následne ju pošlú späť do serverovne pomocou služby synchronyzovaného doručovanie. V serverovni skonzumuje pizzu údržbár, ktorý sa pošmykne a nechtiac pripojí na káble, ktoré tam nechali tí otroci (lebo už odišli na obed), no a dáta sa dostanú späť do siete. K čomu toto všetko? Kontrola parity.

    Jasné, Derov príklad je pekný, ale ako sám napísal – v praxi nepoužiteľný.

    16. 5. 2006 v 15.10

  16. llook říká:

    17. [9] Možná by se to dalo začlenit do mého oblíbeného AJAX frameworku ;-)

    16. 5. 2006 v 15.28

  17. Tomáš Kučera říká:
    18. 16. 5. 2006 v 21.34

  18. tester říká:

    19. </div>

    20. 5. 2006 v 22.14

  19. dsdf říká:

    20. <h1>tiffanychina iphonewholesale fashion</h1>

    31. 12. 2009 v 3.21

  20. fgfe říká:

    21. fsdfzumba dvd wholesalesdf wholesale boots wholesale nflfdsf

    1. 3. 2010 v 10.13

  21. sdf říká:

    22. qqwwholesale MAC Mascara</br> dsf wholesale MAC Concealer</br> sdf wholesale MAC Eyeliner Gel</br> sdf

    3. 3. 2010 v 9.04

  22. Dropship říká:

    23. Rich People Copy Life Gold Mine hello, good luck to you!

    23. 3. 2010 v 7.34

  23. replica watches říká:

    24. replica watches
    Rolex Yachtmaster watch for sale
    Rolex Milgauss watch for sale<BR

    26. 4. 2010 v 6.25

  24. jordan shoes říká:

    25. Dáta budú odchytávať a posunkovou rečou odovzdávať hluchým cirkeným hodnostárom. Tí to prinesú do Vatikánu, pápež dáta posvätí a pošle doporučeným dopisom na Hawai. kappa jacket kappa jackets aka stash house jeansTam z listov spravia ananásovú pizzu a následne ju pošlú späť do serverovne pomocou služby synchronyzovaného

    9. 5. 2010 v 14.30

  25. coach handbags říká:

    26. safe and fast transportation services, especially exporting from China to USA & Europe, including door to door and drop-shipping service. jordan 8 fusion cheap gucci shoes gucci shoes high From managing orders to sending goods to final destinations, we can ensure that you will be satisfied with our services.

    9. 5. 2010 v 14.31

  26. cnc lathe říká:

    27. In the morning pushes the cnc lathe public transportation to go to work, discovered that one female progressive die stamping is lowering the head, motionless, the hair scatters, at first thought reads earnestly, pushes gas bbq prepares to the front door to get out, only then hears the deafening snort sound, rests that Lapel Pin fragrance. .

    25. 5. 2010 v 8.37

  27. Replica Handbags říká:

    28. . come to santahandbags site.Wholesale Replica Handbags

    13. 6. 2010 v 18.00

  28. Express Life říká:

    29. Thanks for sharing, interesting reviewes at: Bar Products Fever Theme Posh Craze Finance Guide

    1. 7. 2010 v 6.26

  29. hollister uk říká:

    30. hollister uk well

    26. 7. 2010 v 10.44

  30. UGG Classic Tall Boots říká:

    31. [url=http://www.uggboots5815.com]UGG Boots,UGG Classic Boots[/url] [url=http://www.uggboots5815.com]UGG Classic Boots,UGG Classic Tall Boots[/url] [url=http://www.uggboots5815.com]UGG Boots,UGG Boots 5815[/url]

    27. 7. 2010 v 10.06

  31. Baby Carriers říká:

    32. power balance

    28. 7. 2010 v 3.23

  32. d&g handbags říká:

    33. d&g handbags develop qulity for discerning lady.Find the new collection of d&g handbags on b2chandbag.com,The best quality of d&g handbags online.Welcome to enjoy discount d&g bags for free shipping,price guarantee.cheap and designer d&g handbags

    28. 7. 2010 v 7.37

  33. abercrombie fitch říká:

    34. It's always nice when you can not only be informed, but also engaged! abercrombie and fitch

    30. 7. 2010 v 15.44

  34. tiffany uk říká:

    35. Well said, such a person should be a good sentenceedtiffany uk eyebrow with this as well mi ma shi 123456789 hha

    2. 8. 2010 v 10.34

  35. UGG Roxy Boots říká:

    36. Buy UGG Roxy Boots on ugg boots cool store,UGG Roxy Boots is one of the hottest uggs,top quality and timely delivery in return. Why not take uggs at here?

    5. 8. 2010 v 16.48

  36. oil paintings říká:

    37. I was very delighted to discover this site on bing.I wished to say many thanks to you with regard to this wonderful read!! I undoubtedly appreciated every little bit of it and I've you bookmarked to take a look at new stuff you post. oil paintings discount paintings

    6. 8. 2010 v 3.03

  37. Wholesale accessories říká:

    38. it is great to see that there is a wide range of cheap tattoo kits available in many online stores as China Wholesalewell as local streets. However, if you are looking forward to bag some latest tattoo kits via internet, then it is seriously advised to consider carrying out a brief online research before purchasing any tattoo equipment including tattoo inks from any of the online stores.

    9. 8. 2010 v 2.41

  38. UGG Boots říká:

    39. then it is UGG Ultra Tall Boots 5245seriously advised to consider carrying out a briefUGG Classic Tall online research before purchasing UGG Classic Paisley 5831any tattoo equipment including tattoo inks from any of the online stores.

    7. 9. 2010 v 10.46

Zanechte komentář





Můžete použít Texy! formátování.
Pokud se obsah boxů níže mění, zatímco píšete, potom žádné číslice nevyplňujte. V takovém případě antispam funguje, pouze se prohlížeči nepovedlo skrýt tento box.