CSS shape-outside: y el texto sigue el contorno 26.7.17

CSS shape-outside: y el texto sigue el contorno

La propiedad CSS shape-outside aparece definida en el documento CSS Shapes Module Level 1 con estatus actual de W3C Candidate Recommendation desde Marzo de 2014. Sí, tres añitos ya en ese limbo.

Existe un borrador posterior [ver] que lo único que aporta (cambios) son un par de aclaraciones.

Con la propiedad CSS shape-outside se puede conseguir que los laterales de un texto en vez de ser rectos (contenidos por el borde vertical de su caja) se adapten o sigan un contorno, bien circular, oblicuo o de formas complejas.

Para que la propiedad CSS shape-outside surta efecto el elemento al que se declara tien que cumplir dos condiciones:

1. Que esté flotado: float ≠ none
2. Que tenga unas medidas definidas. Bien implícita o explícitamente.

Valores de shape-outside

La propiedad CSS shape-outside permite crear diferentes contornos según el valor utilizado. Los posibles son los elementos gráficos SVG o una imagen, además de las palabras claves universales de CSS:

1. circle(): para formas circular.
2. ellipse(): forma figuras elípticas.
3. inset(): rectangulares.
4. polygon(): cualquier forma con más de 3 vértices.
5. url(): para utilizar una imagen.
6. initial: el elemento flotado no se ve afectado.
7. inherit: hereda de su padre el valor de shape-outside.

Dentro del paréntesis en las formas básicas se han de indicar los valores correspondientes para crear la figura y el punto en el que se sitúa "el recorte":

shape-outside: circle(50% at 50% 50%); shape-outside: ellipse(100px 200px at 0 0);

La primera declaración es equivalente a shape-outside: circle() y conforma un círculo tal como lo haría un border-radius: 50%. el valor at 50% 50% sitúa el origen de la forma en el punto central del elemento.

La segunda crea una forma de elipse del tamaño indicado (100 x 200px) a partir del punto 0 0 del elemento. Esto es, la esquina superior izquierda.

Estos valores se pueden complementar indicando qué modelo de caja usar para situar la forma: shape-outside: circle() padding-box;

• margin-box
• padding-box
• border-box

Con el uso de los dos últimos valores ocurre algo peculiar en el elemento flotado que explico más adelante.

La propiedad CSS shape-outside se puede animar (aplicar animaciones y transiciones CSS). Pero recuerda, al igual que ocurre con la propiedad clip-path hay que conservar el número total de puntos o coordenadas indicadas.

Sintaxis de shape-outside

Para lograr el efecto de la imagen previa en la que el texto verás que en su contorno izquierdo se adapta a un círculo sólo es necesario declarar el código siguiente:

Otras propiedades del grupo

El documento del W3C referido define otras propiedades para crear formas en elementos flotados. Son éstas:

• shape-outside: explicada en este post.
• shape-image-threshold: para usar los píxeles de una imagen como máscara de recorte.
• shape-margin: asigna margen a la forma creada.

Ejemplos de uso varios

A continuación unos sencillos ejemplos de uso.

Un caso simple

See the Pen RpVVVp by Kseso (@Kseso) on CodePen.

Diversas formas y figuras:

See the Pen shape-outside & clip-path by Kseso (@Kseso) on CodePen.

Shape-outside: crea formas pero no recorta

A poco que juegues con las demos anteriores en las que uso imágenes verás que la propiedad shape-outside permite el cortorno adaptado a la figura o forma indicada por su valor pero por sí misma no recorta o esconde el sobrante. Si la empleas con una imagen te darás cuanta que el texto adyacente sí se adapta pero la imagen se muestra con ángulos rectos.

See the Pen vxJLbq by Kseso (@Kseso) on CodePen.

Para evitar esto es conveniente recortar también el elemento flotado al que se declara shape-outside. Para los circulares puede servir declarar border-radius junto a shape-outside.

Pero para los otros valores más complejos nada como una vieja conocida: la propiedad CSS clip-path usada conjuntamente y con el mismo valor que el declarado en shape-outside.

En las demos anteriores puedes ver este uso conjunto para crear el contorno y recortar el sobrante para que no haya solapamientos.

shape-margin

Con la propiedad shape-margin podemos separar el texto del elemento flotado la distancia que deseemos.

.el { float: left; width: XXxx; height: YYyy; shape-outside: polygon(...); clip-path: polygon(...); shape-margin: 1rem; }

shape-outside: content-box; Un caso especial

La declaración shape-outside: content-box; o shape-outside: padding-box; me gusta especialmente. Al ser complementada con un margen superior en valor positivo hace que el elemento flotado se desplace hacia abajo tanto como lo indicado por el margen y que ese espacio sea ocupado por el texto.

Con un poco de CSS complementario ya es de lo más sencillo declarar en el HTML un elemento antes que el texto general (por ejemplo una cita resaltada) y que aparezca la cita entre las líneas de los párrafos siguientes:

.cita { shape-outside: content-box; margin: 130px 0 1rem -3rem; shape-margin: 1rem; padding: 0 1rem; float: left; max-width: 60%; }

El resultado de usar shape-outside: content-box; lo ves en la siguiente demo:

See the Pen shape-outside: content-box by Kseso (@Kseso) on CodePen.

Todo junto y algo más

Y para terminar una última demo con la mayoría de lo mencionado en este artículo trabajando de forma conjunta: el texto aparece con sus laterales sesgados en vez de rectos y pese a que los títulos (h1, h2) en el HTML preceden al párrafo son renderizados en medio de él y el texto ocupa el espacio que dejan libre los títulos y sus márgenes superiores.

See the Pen RpjVdN by Kseso (@Kseso) on CodePen.

Soporte a shape-outside

En estos momentos en los webkit (Chrome y Safari) yo la he visto funcionar. En firefox, pese que es posible "activarla" por el usuario en sus preferencias about:config -> layout.css.shape-outside yo no he podido.

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