Control del renderizado de elementos web con Css: propiedades *-rendering 12.2.15
Control del renderizado de elementos web con las propiedades Css. Representación mejorada del texto, color e imágenes.
Control del renderizado de elementos web con Css: propiedades *-rendering
Yo he visto estilos más allá de la especificación Css. He visto propiedades definidas en el corpus de SVG que te pueden ayudar. Y he visto mutar algunas otras como image-rendering que pasan al corpus de Css cambiando las palabras claves de sus valores.
En algún otro artículo del blog ya he mencionado la existencia de propiedades Css definidas fuera del corpus específico del propio Css. Y no por estar allí son menos. El lugar donde están recogidas ni las hace menos usables ni les resta potencialidad ni mucho menos impide su uso. Sólo hace que su difusión y aprovechamiento sea un poco más minoritario. Hasta que se difunden o se dan a conocer.
Uno de esos campos donde puedes encontrar "otros estilos Css" es la especificación que desarrolla los Gráficos Vectoriales Redimensionables (Scalable Vector Graphics) o SVG.
Entre otros aspectos, hay dos detalles que hacen más que interesante echarles un vistazo de vez en cuando:
- Que los elementos a los que aplican estas propiedades no son solo los objetos SVG
- Que permiten controlar aspectos que las especificaciones de Css no contemplan.
Un ejemplo de lo anterior ya lo vimos en el artículo sobre la propiedad Css pointer-events.
El renderizado de los elementos en la web
Otro de los campos que se escapaban al control del desarrollador era todo lo relativo al renderizado de los objetos presentes en la web. Dos situaciones, viejas conocidas, son la gestión del color según el modelo que el motor del navegador implementa y el perfilado de las tipografías. Si estos temas te son nuevos, una simple consulta en google.
Para ayudar en algo y en algunas situaciones, el documento mencionado incluye una serie de propiedades para actuar en el renderizado web. Las que vamos a ver son:
- Renderizado del texto
- Renderizado del color
- Renderizado de las imágenes
La propiedad Css text-rendering
La propiedad text-rendering le indica al motor de renderizado del navegador qué aspecto debe primar al representar los textos.
El valor inicial es 'auto', se hereda y aplica a todos los elementos de texto. También se puede animar.
Los valores admitidos, además de 'inherit, y su significado son:
auto
- Indica que el agente de usuario deberá hacer concesiones para equilibrar la velocidad, la legibilidad y la precisión geométrica, pero a la legibilidad le da más importancia que a la velocidad y a la precisión geométrica.
optimizeSpeed
- Indica que el agente de usuario hará hincapié en la velocidad de procesamiento sobre la legibilidad y precisión geométrica. Esta opción provocará que a veces se desactive el anti-aliasing para el texto
optimizeLegibility
- Indica que el agente de usuario hará hincapié en la legibilidad sobre la velocidad y la precisión geométrica.
geometricPrecision
- Indica que el agente de usuario se hará hincapié en la precisión geométrica sobre la legibilidad y la velocidad de procesamiento.
En las pocas pruebas que he realizado he notado mínimas variaciones a mejor con ciertas tipografías con las dos últimas: optimizeLegibility y geometricPrecision
Puedes ver información complementaria y soporte en este artículo del Mozilla Developer Network
La propiedad image-rendering
Al igual que en la representación del texto, con las imágenes también se le puede indicar al navegador vía Css qué aspecto priorizar con la propiedad image-rendering.
Los viejos valores definidos para image-rendering han sido cambiados por completo. Sólo a efectos de información, eran éstos: auto optimizeSpeed optimizeQuality inherit
Tenían el mismo significado que en text-rendering. Pero repito, estos valores ahora ya no existen.
La propiedad image-rendering ha cambiado su definición al documento CSS Image Values and Replaced Content Module Level 3
, pero no en el que se encuentra con status CR de fecha 17 Abril de 2012. Ha sido traspasada a él en el más reciente Editor’s Draft, del 10 de Febrero de 2015.
La propiedad image-rendering le indica al navegador qué aspecto de la imagen debe priorizar cuando la imagen se escala. Esto es, al representarla en un tamaño mayor o menor al que que tiene la propia imagen.
Los valores actuales, recogidos en el Editor’s Draft del 10 de Febrero de 2015 son: auto crisp-edges pixelated y éste su significado. Tomemos la pequeña imagen adyacente a este párrafo y el resultado al ampliarla x3 sería el mostrado en la imagen de abajo que acompaña a las definiciones de los valores. Estas imágenes son del documento del W3c.
auto
- El valor por defecto. Al aumentar o disminuir el tamaño de la imagen para mostrarla en la página el navegador prioriza "la apariencia" suavizando los colores. En especial para lograr una transición suave de unos a otros. Indicada para fotos.
crisp-edges
- Este valor preserva (prioriza) el contraste y los bordes existentes en la imagen. Indicada, por ejemplo, para lo que se conoce como
pixel art
pixelated
- La imagen es escalada con el algoritmo "nearest neighbor" o similar para que el resultado final sea un aspecto de imagen pixelada. Este valor es el que más difusión está teniendo.
Sugerencia: puedes pinchar en la imagen de las 3 para verla a su tamaño original y así observar mejor el resultado final de declarar un valor u otro.
Comentaba que el valor pixelated es el que mayor interés y difusión está teniendo por lo efectista y vistoso que resulta al declararlo a imágenes que necesitan mantener su aspecto pixelado bien sea por estética (como las imágenes que en origen tienen esa apariencia) o por necesidad, como pueden ser los códigos QR.
Puedes ampliar información sobre image-rendering: pixelated en estos artículos:
- image-rendering: pixelated en Html5Rocks
- La propiedad image-rendering en MDM
- Demo y códigos privativos en un icono de 16x16px
El manejo y gestión de las imágenes vía Css se ve complementada con las propiedades image-orientation además de la ya vista image-rendering
La propiedad shape-rendering
Para elementos shape* la misma especificación define la propiedad shape-rendering con los valores:
auto | optimizeSpeed | crispEdges | geometricPrecision | inherit.
Personalmente no he apreciado diferencias al jugar con la propiedad 'image-rendering' en FF. En Chrome, el inspector de código tacha (line-through) los valores de obtimización con y sin prefijo -webkit-.
*Shape:
- Un elemento gráfico que se define por una combinación de líneas rectas y curvas. En concreto: ‘path’, ‘rect’, ‘circle’, ‘ellipse’, ‘line’, ‘polyline’ y ‘polygon’
La propiedad color-rendering
La propiedad 'color-rendering' se puede declarar a container elements, graphics elements, ‘animate’ y ‘animateColor’. Para desambiguación de estos términos ver la definición de los mismos aquí.
'Color-rendering' indica cómo optimizar la interpolación de color y las operaciones de composición del mismo. Tiene prioridad sobre la propiedad 'color-interpolation-filters'.
Los posibles valores son: auto | optimizeSpeed | optimizeQuality | inherit. El significado es el visto en las propiedades anteriores.
También se hereda y se puede animar.
Junto a 'color-rendering' hay otras dos propiedades que aplican a la gestión del color que realiza el navegador: color-interpolation y color-interpolation-filters
Sobre estas propiedades no he realizado pruebas. Quizás un campo propicio para probarlas sea con objetos con gradientes Css. ¿Te animas y nos dices tu opinión al respecto?. Gracias.
Artículo publicado originalmente el 29 de Agosto de 2013. Actualizado el 12 de Febrero de 2015 por las modificaciones tan sustanciales habidas, especialmente en el apartado referente al manejo de las imágenes escaladas (image-rendering).
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Gracias Kseso,
ResponderEliminares una pena que SVG no esté tan extendido por la incompatibilidad de IE 8 y otras razones, pues permite editar y animar los gráficos en código.
De paso te pregunto, en una web estoy usando la tipografía Museo que se ve bien en todos los navegadores salvo en Safari que en negrita se vuelve más feo el grosor del texto, ¿conoces alguna propiedad de WebKit para el antialiashing o el tratamiento de textos?.
Hola Sergio
EliminarEn el sidebar bajo el epígrafe "Top 10" tienes el enlace a un extenso artículo sobre @font-face.
Uno de los apartados es una guía de problemas y soluciones.
Hay algunos puntos específicos para Chrome.
Échale un vistazo a ver si alguno te es útil.
Porque supongo que estarás usando la Museo 700 y no otra a la que cambies su grosor vía font-weight.
De todas formas, ya te anticipo que está en capilla un artículo recopilatorio de soluciones sobre este tema (chrome y @font-face). No se fecha de publicación.
Un saludo