soy Kseso y esto EsCSS

CSS shape-outside: y el texto sigue el contorno

La propiedad CSS shape-outside y complementarias para hacer que el texto contornee formas y figuras. Su laterales dejarán de ser verticales para adaptarse a la forma que tenga el elemento colindante.

CSS shape-outside: y el texto sigue el contorno

Por Kseso ✎ 8

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

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:

CSS: .el { float: left; shape-outside: circle(); width: 300px; height: 300px; } HTML <div class='el'></div> <p>El plenilunio o luna llena es una fase lunar que...</p>

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.

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 Don Kseso Kseso

Comentarios: 8

  1. Interesante por demás, no conocía esa propiedad. Gracias por el post css de cada día!

    ResponderEliminar
  2. Interesante y práctico, pero en Firefox no funciona. Gracias

    ResponderEliminar
    Respuestas
    1. Gracias Santos

      Veo que ni en los 4 meses desde la redacción del post ni en estos días desde su revisión ha habido cambios a lo indicado en el último punto del artículo "Soporte a shape-outside".
      No solo en lo que se refiere a Firefox, también el resto como los Edge que sigue "under consideration".
      Solo los que comparten el motor WebKit lo hacen.

      Un saludo

      Eliminar
    2. Lo supuse, pero no estaba seguro. Gracias

      Eliminar
    3. Una puntualización: Firefox soporta shape-outside previa activación de la propiedad layout.css.shape-outside en about:config. Eso sí, está aún en desarrollo porque en los pens del artículo solo funciona con círculos y líneas rectas pero no en formas más complejas.

      Eliminar
  3. Mientras no se implemente el motor WebKit en todos los navegadores habrá que utilizar https://github.com/jasonwyatt/jQSlickWrap

    ResponderEliminar
    Respuestas
    1. Echando un vistazo rápido, ese script solo funciona con imágenes y para iniciar el proceso de recorte todos los parámetros se pasan a una función JS. Además de que requiere jQuery. No me termina de convencer.

      Para emular el comportamiento de shape-outside en navegadores que no soporten esa propiedad yo usaría este polyfill. Tú solo tienes que preocuparte de escribir el CSS y el script lo leerá y aplicará las propiedades pertinentes para simular el efecto, eso sí, con ciertas limitaciones.

      Eliminar
  4. Es correcto, pero sobre la base de utilización del atributo "svg xmlns" y no sobre el uso convencional de imagen PNG. Ref. https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course
    En definitiva son soluciones que cumplen su finalidad una mas compleja que otra.
    Refere
    Gracias por tus respuestas

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap