contorneo imagen

CSS Shapes: Contornear imágenes con texto

Las últimas reencarnaciones de los estándares HTML y CSS trajeron considerables mejoras. HTML5, entre otras aportaciones, incorporó nuevas marcas ( canvas, video, svg…) y elementos semánticos (nav, article, section…). Por su lado, CSS3 tampoco se quedó corto y llegó con nuevos selectores y propiedades. Juntos, supusieron un importante avance en las posibilidades de la web.

Pero aunque la versión definitiva de las especificaciones de HTML5 se publicó a finales de 2014, y las especificaciones de CSS3 son bastante anteriores, hay que entender que ambos estándares no son adoptados de manera absoluta por los navegadores. La W3C, el organismo hay detrás de las especificaciones de ambos estándares, sugiere y recomienda, pero en última instancia son los creadores de navegadores los que validan esas recomendaciones incorporándolas en sus programas. Seguramente, llegarán HTML6 y CSS4 sin que haya habido una implantación completa de sus predecesores. Es por ello, que a veces, cuando queremos hacer uso de alguna nueva prestación, vemos que ésta no ha sido adoptada completamente por todos los navegadores.

De todas formas…

Para nuestro propósito usaremos la especificación CSS Shapes del W3C. Lamentablemente, por ahora no funciona en todos los navegadores (no te preocupes, que hay solución). En caniuse.com podemos consultar cúales soportan esta especificación y comprobaremos que hay algunos importantes que por ahora se han quedado fuera.

Siempre que nos encontremos con situaciones parecidas, es necesario determinar las prestaciones del navegador para servirle una opción que se adapte a sus posibilidades. Y para ello no conozco mejor alternativa que modernizr, que nos ofrece métodos rápidos y eficaces para detectar las prestaciones del navegador.

Moderniza tu página

Una de las ventajas de modernizr es que puedes construir una versión solo con las prestaciones que te interesa detectar, lo que lo hace especialmente ligero. En nuestro caso solo vamos a detectar si el navegador soporta CSS Shapes, con idea de usarlas en caso afirmativo u ofrecer una alternativa si no es así.

Para ello nos dirigimos a modernizr.com/download?setclasses, nos aseguramos de que está seleccionado CSS Shapes y le damos al botón “Build” para descargar el script que nos permitirá detectar si el navegador dispone de esta prestación.
pantalla-modernizr

Una vez bajado podemos renombrarlo como modernizr-shapes.js e insertarlo en nuestra página.

Usado en nuestra página nos permite detectar con facilidad si nuesto navegador soporta ‘shapes

    if (Modernizr.shapes) { 
       // soportado 
    } else { 
       // no soportado 
    }

Lo que hemos hecho hasta ahora solo nos sirve para diferenciar si un navegador soporta o no CSS shapes. Veamos ahora qué hacer en cada caso.


Si nuestro navegador está en forma

Si el navegador soporta las formas CSS hay varias maneras de definir una que sirva para que el texto se ciña a su contorno. En nuestro caso, vamos a usar la propiedad CSS shape-outside apuntando a un gráfico svg que define la silueta.

Empecemos por ver los elementos HTML y a continuación el CSS

 Aliquam sodales ante id nunc pulvinar, sit amet dignissim lectus vehicula. Maecenas vel placerat lacus. Nulla rhoncus augue dignissim dapibus iaculis.
.textwrap-container{
 text-align: justify; 
}
.chuckie-shape {
 float: left;
 width: 272px;
 padding-right: 10px;
 -webkit-shape-outside: url('chuckie.svg');
 -moz-shape-outside: url('chuckie.svg');
 -ms-shape-outside: url('chuckie.svg');
 -o-shape-outside: url('chuckie.svg');
 shape-outside: url('chuckie.svg');
}

La propiedad shape-outside contiene la url del archivo svg que ves a continuación.

SVG (Scalable Vector Graphics) es un formato vectorial que, como puedes comprobar en caniuse, es soportado por todos los navegadores. Puedes crearlo con software propietario (Illustrator, Corel Draw…), software gratuito (InkScape…) e incluso online. Con el HTML y el CSS anteriores ya podemos lograr que el texto se ciña al espacio reservado en los navegadores que entienden la propiedad (Safari, Chrome y algún otro).

Pero… ¿Por qué hemos puesto la propiedad shape-outside con tantos prefijos, incluyendo los que pertenecen a navegadores no soportados?
La respuesta es simple: nos anticipamos al día en que el resto de los navegadores se incorporen. Y si no lo hacen, tampoco hay que preocuparse, les ofreceremos una alternativa.

Para encontrarla hemos probado dos soluciones posibles: CSS Shapes Polyfill y jQSlickWrap. En mi experiencia, el primero, aunque tiene la ventaja de no depender de jQuery, presenta serios problemas de rendimiento y ya no es mantenido de forma activa. jQSlickWrap, si bien depende de jQuery, se ha comportado perfectamente en mis pruebas además de ser más flexible, así que basaremos en él nuestra solución.


¿Y qué pasa con el resto?

Para Explorer, Firefox y el resto de navegadores que a la hora de escribir esto aún no soporta la propiedad shapes, empezaremos por bajar jQSlickWrap y jQuery para usarlos en nuestra página.

Después, basta con invocar slickwrap con la siguiente sintaxis

    $(document).ready(function(){
       $('.chuckie-shape').slickWrap({resolution:26});
    });

Para un mejor rendimiento, es aconsejable que asignemos a resolution el valor del interlineado del texto en pixels. Si lo deseas, puedes consultar la página de jQSlickWrap para mayor información sobre su uso y ajustes.

Recuerda que ya habíamos solucionado este tema para algunos navegadores, y que esta nueva solución va dirigida al resto. Veamos ahora cómo ponerlo todo junto para cubrir todas las posibilidades.


El código final

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper dolor in justo lobortis, eu facilisis massa pharetra. Integer vehicula porttitor nulla nec consectetur. Proin tempus varius erat vitae varius. Vivamus sit amet eros suscipit, dignissim orci a, tincidunt lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec mollis commodo libero sit amet suscipit. Vivamus accumsan turpis et mauris viverra, nec congue dolor feugiat. Morbi feugiat dignissim odio, venenatis euismod lectus malesuada maximus. Sed tempor ligula vitae vestibulum tincidunt. Nullam at eleifend urna. Ut interdum luctus malesuada. Curabitur vitae mauris vitae dui tincidunt pellentesque sed ac lacus. Praesent quis orci tellus. Proin auctor sem at elit condimentum, eu lacinia neque cursus. Vivamus dignissim tincidunt dictum. Maecenas tincidunt venenatis risus ac molestie. Donec id posuere mi. Pellentesque at metus in nisl sollicitudin semper id at quam. In laoreet ex eu neque aliquam pharetra. Nulla facilisi.  

 

El archivo styles.css nos queda, añadiéndole algún otro detallito, como sigue

.wrapper{
display:block;
width: 500px;
}
.textwrap-container{
text-align: justify; 
-webkit-hyphens: auto; 
-moz-hyphens: auto; 
hyphens: auto;
}
.chuckie-shape {
float: left;
width: 272px;
padding-right: 10px;
-webkit-shape-outside: url('chuckie.svg');
-moz-shape-outside: url('chuckie.svg');
-ms-shape-outside: url('chuckie.svg');
-o-shape-outside: url('chuckie.svg');
shape-outside: url('chuckie.svg');
}

El resultado

Con todo lo visto anteriormente obtenemos como resultado algo parecido al texto que ves a continuación y que puede servirte de guía para adaptarlo a tus propias necesidades modificando las imágenes y los estilos. Y añadiendo imaginación nos permitirá efectos más complejos.

contorneo de textoSe acercó sigilosamente, no pude verlo venir. Sin darme cuenta, se ciñó a mi silueta. Aliquam sodales ante id nunc pulvinar, sit amet dignissim lectus vehicula. Maecenas vel placerat lacus. Nulla rhoncus augue dignissim dapibus iaculis. Quisque nulla nulla, fringilla fringilla aliquam et, tincidunt ut ante. Sed volutpat vulputate venenatis. Maecenas convallis, lacus faucibus posuere iaculis, quam sem tincidunt nunc, eu porta elit erat eu ante. Praesent a volutpat ex. Pellentesque imperdiet feugiat nisl cursus dignissim. Nam eget lorem nec leo porta aliquet at eget dui. Cras convallis, mauris ac posuere porta, magna ligula scelerisque diam, et auctor neque enim eget purus. Praesent massa felis, pulvinar eu mi nec, ultricies mollis arcu. Integer molestie nisl tortor, vitae consequat sem sollicitudin eget. Aliquam massa purus, placerat sed vulputate non, placerat nec risus. Ut et purus semper, molestie magna id, faucibus turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.


Puedes descarga todo el código completo con los scripts, el archivo CSS y las imágenes del ejemplo pulsando el siguiente botón


El uso de archivos svg en estilos CSS, como en este ejemplo, está sujeto a CORS, un protocolo de seguridad que por defecto impide hacer determinados tipos de peticiones entre servidores, por lo que no funcionará en Safari ni Chrome en modo local. No habrá ningún problema cuando lo subas a un servidor.


La importancia del mantenimiento: los papeles de Panamá
Vídeos de fondo en iOS (con autoplay)
Tags: