⇪

La propiedad shape-outside

facebook-svg gplus-svg twitter-svg

Ya sabemos que el texto situado al lado de una caja flotante adapta su contenido para que fluya alrededor del elemento posicionado.

La propiedad shape-outside que define como se ajusta el texto alrededor del elemento flotante exige algunas condiciones básicas:
- que el elemento sea flotante ( elemento{float:left;} - por ejemplo ).
- que tenga dimensiones claramente definidas ( width, height ).

elemento{
  width: 10em;
  height: 10em;
  float: left;
  -webkit-shape-outside: circle();
  shape-outside: circle();
}

La propiedad shape-outside puede tomar una de estas valores:


FUNCIONES

circle():

Es una función utilizada para especificar una forma geométrica básica: un circulo.

elemento{
   shape-outside: circle(radio at posición);
}

El primer parámetro representa el radio del circulo y es opcional. El valor por defecto es closest-side o sea la distancia hasta el lado más cercano.
El segundo parámetro representa la posición del centro (x,y) y es también opcional. Si no especificamos la posición, el CSS considera que el centro del circulo se encuentra en el centro del elemento.
Para especificar el valor del radio o las coordenadas del centro podemos utilizar palabras clave ( closest-side o farthest-side ) unidades de longitud ( px, em etc. . . ) o porcentajes.

  shape-outside: circle(closest-side at 50% 50%); // palabras clave
  shape-outside: circle(5em at 5em 5em); // unidades de longitud
  shape-outside: circle(50% at 50% 50%); // porcentajes
  shape-outside: circle();// los parametros son opcionales

shape-outside: circle()

ellipse()

Se trata de una función utilizada para especificar una forma geométrica básica: una elipse.  A diferencia de circle() necesitamos especificar el radio en x e y de la elipse.

elemento{
   shape-outside: ellipse(radio en x e y at posición);
}

Para especificar el valor del radio o las coordenadas del centro podemos utilizar palabras clave ( closest-side o farthest-side ) unidades de longitud ( px, em etc. . . ) o porcentajes.

shape-outside: ellipse(farthest-side closest-side at 50% 50%);// palabras clave
shape-outside: ellipse(6em 5em at 6em 5em); // unidades de longitud
shape-outside: ellipse(50% 50% at 50% 50%);// porcentajes
shape-outside: ellipse();// los parametros son opcionales

shape-outside: ellipse()

polygon()

La función polygon() está utilizada para especificar una forma geométrica básica: un polígono, y toma como argumentos conjuntos de dos valores representando las coordenadas en x e y de cada punto que forma el polígono.

elemento{
   shape-outside: polygon(x y, x y, x y, . . . . . . , x y);
}

Para las coordenadas, como siempre, podemos utilizar unidades de longitud ( px, em etc. . . ) o porcentajes.

shape-outside: polygon(0 0, 5em 0, 10em 11em, 0 11em);
shape-outside: polygon(0 0, 50% 0, 100% 100%, 0 100%);

shape-outside: pollygon()

inset()

La función inset hace que el texto fluya encima de los bordes de la caja flotada, y toma como argumentos el desplazamiento hacia dentro en unidades de longitud o porcentajes. Exactamente como en el caso de los bordes, el desplazamiento hacia dentro puede tomar cuatro valores:

elemento{
   shape-outside: inset(arriba derecha abajo izquierda);
}
shape-outside: inset(10% 20% 10% 0);
shape-outside: inset(3em 5em 7em 0);

o dos 

shape-outside: inset (arriba/abajo derecha/izquierda);
shape-outside: inset (25%10%);
shape-outside: inset (3em 5em);

o un solo valor.

shape-outside: inset (desplazamiento);
shape-outside: inset (25%);
shape-outside: inset (3em);

shape-outside: inset()

Y también como en el caso de los bordes puede tener esquinas redondeadas introducidas por la palabra clave round seguida por el valor del radio :

elemento{
   shape-outside: inset(desplazamiento round radio);
}

Por ejemplo:

shape-outside: inset(25% 25% 25% 0 round 50%);

shape-outside: inset() con border redondeados

Vea todos estos ejemplos en codepen.info

¡OJO! estoy utilizando AUTOPREFIXER y no necesito utilizar prefijos. Si no quiere utilizar AUTOPREFIXER tendrá que utilizar -webkit-

See the Pen shape-outside circle, ellipse, polygon, inset by Gabi (@enxaneta) on CodePen.

url()

También podemos utilizar una imagen con transparencias y dejar que el texto se ajuste alrededor de esta.
En este caso utilizamos la ya conocida función url() para referenciar la imagen.

.elemento {
    shape-outside: url(‘quijote.png’);
}

En el siguiente ejemplo utilizo un data:uri,  ya que shape-outside tiene problemas en coger el url desde un https.

Para crear un margen alrededor de la imágen utilizo la propiedad shape-margin.

article img{
  width:300px;
  height:414px;
  float:left;   
  shape-margin:1em;
  shape-outside: url(data:image/png;base64,iVBORw0KGgoAAAANSUh . . . 
}

See the Pen shape-outside: url data:uri by Gabi (@enxaneta) on CodePen.

PALABRAS CLAVE

También podemos utilizar palabras clave:

  margin-box; 
  border-box;
  padding-box;
  content-box;

En el siguiente ejemplo el texto fluye alrededor de un div con bordes redondeados: 


div {
    width: 6em;
    height: 6em;
    float: left;
    padding: 2em;
    margin: 0 2em 0 0;
    opacity: .25;
    border-radius: 50%;
    border: 2em solid #000;
    background-color: #6ab150;
    background-clip: content-box;
  }

Si shape-outside: margin-box; el texto fluye hasta el margen de la caja.
Si shape-outside: border-box; el texto fluye hasta el limite exterior del borde (en negro);
Si shape-outside: padding-box; el texto fluye hasta el limite exterior del relleno.
Finalmente si shape-outside: content-box; el texto fluye hasta el limite del contenido (en verde )

See the Pen shape-outside border margin padding content by Gabi (@enxaneta) on CodePen.

Soporte en los navegadores

Por lastima la propiedad shape-outside no está soportada en todos los navegadores. Sin embargo podemos considerarla como una mejora estetica.