Gràcies al meu nou monitor estic descobrint coses lletges de la programació, i coses lletges de la navegació. Gràcies a que el nou monitor té High DPI veig les coses més nítides, però també descobreixo que no tot està preparat per funcionar amb High DPI. Ja he vist que les aplicacions d'escriptori en Winforms no van bé, però ara resulta que al navegar també hi ha defectes.
Normalment quan el navegador carrega una imatge, la mostra a 1px de la imatge 1px de la pantalla, però jo estic al 125% d'augment, els píxels són més petits, i clar, cal fer un estirament del 25%. Quan les imatges són suficientment grosses, i són fotos aquest 25% no es nota. El problema ve quan les imatges no són tan grosses i contenen text, llavors el text es torna borrós. I jo per fer uns pocs dibuixos per explicar quatre coses sobre programació faig servir text, i clar, al meu xupimonitor es veuen malament, i això és en quatre paraules in-to-lera-ble, inclús afegiria inacceptable.
Remenant pel Internets he trobat una forma de generar imatges i que es vegin bé a qualsevol resolució. Primer he vist l'element HTML5 canvas, però el "canvas" no deixa de ser un bitmap on es dibuixa (normalment amb Javascript) i depenent del navegador pateix de problemes d'escalat a HighDPI. Després he vist el format bo, el SVG, que guarda la imatge com un conjunt de vectors. Clar com són vectors si cal estirar un 25% la figura no hi ha problema, es torna a calcular el resultat i llestos. El problema està en editar els SVG ja que és un llenguatge força espès, cal fer servir un editor de SVG. He trobat el InkScape que és un editor gratuït que he pogut fer servir. No és que sigui la meravella de l'usabilitat però és força acceptable per ser de codi lliure.
Un cop es té el SVG hi ha varies possibilitats per posar-lo a la pàgina. Els navegadors entenen el tag svg, per tant es pot posar dins del HTML directament (obrir amb editor de texts el SVG i copiar i enganxar), és el que s'anomena "inline". O bé fer servir el tag img, especificant en l'atribut src el fitxer .svg. De moment he provat la versió "inline", aquí amb molts bons resultats.
Cal tenir en compte que ara vindrà una onada de dispositius HighDPI, els nous monitors 4K. Als que cal sumar els dispositius que ja són HighDPI, com els nous SmartPhones i Tablets. Per això amb paciència aniré modificant els meus dibuixos per fer-los amb SVG... Si es que se m'acumula la feina.
#20/02/2014 11:42 Software HTML/CSS Autor: Alex Canalda