Visualitzacions diverses i antialiaising

En les darreres setmanes he estat dedicat a fer un repàs al disseny de tres dels blocs on participe, més en primer pla ací i a La paraula nostra, i més en un segon pla a Amics de Joan Valls. Com que treballe amb mac i no tinc cap ordinador que còrrega sobre windows ni a casa ni a la feina, no tenia cap manera de comprovar com es previsualitzen els canvis que anava introduint en el css i l'html. Ara he trobat un servei en línia que fa captures de pantalla d'aquelles pàgines que es vulga amb diferents navegadors i diferents sistemes operatius. Es tracta de Browsershots i el resultat ha estat poc encoratjador.
Mentre que La paraula nostra es veu passablement bé –si no fos pel problema de l'antialiasing, tan en windows com en linux, i del que m'ocuparé després– i Amics de Joan Valls també, llevat d'algun desbordament del text que espere resoldre en breu, la visualització d'aquest bloc sobre windows, especialment, però també amb alguns navegadors de linux és prou defectuosa.
Això afecta, sobretot, el navegador Internet Explorer, el qual, com sabeu, és el més utilitzat pels internautes en estar instal·lat i configurat com a navegador per defecte en tots els ordinadors que corren windows, és a dir, en més del 90% dels ordinadors. Tot i el relatiu èxit de navegadors més ben dissenyats i menys intrusius que l'Explorer en el món windows, com ara Opera i Firefox, el ben cert és que lamentablement encara hem de comptar que el gros de les visites que rebrà un lloc web serà amb l'Explorer i, per tant, si volem que el nostre lloc es visualitze tal i com l'hem concebut, ens veiem obligats a fer alguns trucs per superar les seues limitacions i els seus capricis, per no dir la seua defectuosa i abusiva manera de mostrar en pantalla el codi.
Vos pose un exemple. Aquesta és la captura que ha fet Browsershot d'aquest bloc amb Firefox 2 sobre Windows 2000 (punxeu-hi per veure-la més gran):



Així és com està previst que es veja Bloc is bloc, llevat de l'efecte pixelitzat de les lletres –l'antialiasing que deia abans– i com s'hauria de veure en qualsevol situació. Tanmateix, si esteu fent servir l'Explorer, ho deveu veure d'una manera completament diferent. Segons Browsershots ho veieu d'alguna d'aquests maneres.
Així, amb MS Internet Explorer 7.0 sobre Windows XP,



amb la qual cosa han desaparegut del seu lloc dues columnes que haurien d'ésser a la dreta del cos principal i que imagine que deuen aparéixer al final de tot. Crec entendre que es tracta del problema descrit en aquesta pàgina, un bug prou conegut de l'Explorer, segons el qual dobla la quantitat de marge de cada element flotat a l'esquerra, de manera que, en aquest bloc, les columnes de la dreta, senzillament, no caben en la caixa que els conté, i són desplaçats al final de la pàgina. He estat provant amb les solucions que s'hi proposen, però encara no he trobat la tecla que resolga el problema. Continuarem investigant.
De tota manera, encara pot ser pitjor, com veiem ací, un exemple de MS Internet Explorer sobre Windows 2000:


Directament, ni s'hi veu, i per a açò no sé si sóc capaç de trobar altra solució que recomanar als visitants d'aquest bloc que facen servir el Firefox, que a més té molts altres avantatges quant a seguretat i funcionalitats especials, de les quals ara no parlaré.

Altre assumpte és el que esmentava de l'antialiasing, que resulta molt desagradable quan es tracta de pàgines amb molt de text, com ocorre en qualsevol bloc. Ocorre que, quan un objecte requereix més resolució d'eixida de la que és capaç la resolució estàndard dels monitors dels ordinadors, les línies que no són absolutament verticals o horitzontals apareixen pixelitzades. Vegem uns exemples.
Ací tenim la capçalera d'aquest bloc tal i com es veu amb Firefox sobre windows:



Si fem una ampliació veurem que les línies dels caràcters presenten un aspecte pixelitzat, com si estigués ratat:


Aquest desagradable efecte ja fa molts anys que es va resoldre molt satisfactòriament al sistema operatiu MacOs amb la introducció d'un filtre precisament anomenat antialiaising i que permet que les imatges d'alta resolució, com ara els tipus, es presenten en pantalla d'una forma més agradable. Vegeu com es veu la mateixa capçalera amb Firefox sobre MacOs X:


Els caràcters ja no es veuen tan pixelitzats com en el cas anterior i apareixen com si estigueren millor traçats, més ben definits i, per tan, resulten més agradables i, sobretot, més bons de llegir. Tanmateix, aquest efecte s'aconsegueix amb un engany del cervell: a determinades resolucions, l'ull és incapaç de distingir clarament entre el fons i el primer pla –la gestalt dixit – de manera que si incloem uns pocs píxels que hi facen una transició als màrgens de les línies, el resultat és, paradolxalment, que percebrem els límits d'una manera més nítida. Vegeu l'ampliació de la imatge anterior:

Veiem que al voltant dels caràcters hi ha uns píxels grisos que els empasten sobre els fons. En la imatge amb zoom, l'efecte és desagradable però, a resolució normal, aconseguim un text més fàcil de llegir. Això encara és més important per a llargs fragments de text, com els que solen aparéixer als blocs.
Sembla que a les darreres versions de Windows, s'hi ha inclòs una funcionalitat que emula el filtre d'antialiaising del Mac, el ClearType però cal activar-lo i tinc entés que presenta algunes incompatibilitats de fonts. Feu la prova i digueu si millora un poc.