jQuery, Cufon, gelukkig regende het

• Webdesign

• zondag, 17 mei 2009 23:15
• Laatst aangepast op zondag, 14 juni 2009 16:07

Update 24 mei 2009: Zeldman over Webfonts, met bovenaan dit artikel twee links over juridische kwesties.

Update 1 juni 2009: De meeste van de hieronder beschreven effecten zul je niet meer zien in mijn website. Ik heb Cufon toch weer uitgezet, te traag naar mijn zin. Tevens was het flash-achtige menu erg leuk, maar te onrustig naar mijn idee.

Einde updates

Ben bezig geweest met deze website (het weer scheen er geschikt voor) wat jQuery en Cufon:

• Als je over de menu-items van 'Over Dwarshuis' en 'Achtergrondinfo' muist, dan zie je een effect;
• Als je over de afbeeldingen (Twitter, LinkedIn, Rss etc, op de homepage) muist zie je een soortgelijk effect. Alleen als je muist, niet als je door de site bladert via de tab-toets;
• De headings h1, h2 en h3 zijn opgebouwd met Cufon (zie de Cufon website en ook Kilian Valkhof over Cufon vs. Typeface)

Cufon is een nieuw alternatief voor sIFR, maar dan veel eenvoudiger op te zetten (geen eindeloos gepiel met margins, paddings, line-heights, en dat soort dingen). Van de website: "Fast text replacement with canvas and VML - no Flash or images required."

Er zijn wel wat nadelen bij het gebruik van Cufon:

• je kunt de tekst niet selecteren (nóg niet)
• je ziet bij het laden van de pagina soms eerst de originele non-replaced tekst.
• als je je website zonder stylesheet bekijkt, ziet het er uit als een kerstboom, omdat javascript gewoon zijn gang gaat en een canvas aanmaakt, of hoe je het ook wilt noemen
• als je text-zoom gebruikt, zal de Cufon tekst niet meeschalen

En let vooral even op de Notes:

"For simplicity, all examples use the HTML4 strict doctype instead of an XHTML doctype. You may use any doctype you want but a strict (X)HTML doctype will always yield best results. Quirks mode isn’t supported but might also work in some cases. All cufón-enabled pages must be UTF-8 encoded. Compatible encodings, such as US-ASCII, are also fine."

Ik heb alles natuurlijk netjes progressive enhanced gebouwd, met unobtrusive javascript (jQuery), voor zover ik kan overzien. Ik ben er zelf wel blij mee. Al moet er nog wel wat gefinetuned worden.