Si la tendencia reciente del diseño plano ha demostrado algo, es lo increíblemente limitados que son los diseñadores web en lo que respecta a la composición. Ahora que ya no nos distraen los biseles, los degradados y el brillo, queda claro que los diseñadores web tienen una estructura para construir sus diseños en torno a: rectángulos.
Por supuesto, hay tantas formas de componer grupos de rectángulos como píxeles en una pantalla, pero cuando se tienen en cuenta las demandas de tipo y la necesidad de diseñar para diferentes resoluciones, las opciones de diseño comienzan a verse claramente limitadas.
Todos sabemos que todas las esquinas no son ángulos rectos; todos sabemos que las líneas no siempre son rectas. De hecho, algunos de los diseños más emocionantes del siglo pasado han salido de la cuadrícula y se han escindido en arcos y ángulos, creando tensión, drama y emoción. Es una propuesta fácil en el diseño de impresión: abra un documento en InDesign, seleccione la herramienta de elipse y dibuje un círculo en el escenario, seleccione la herramienta de escritura y haga clic en el círculo, ahora pegue el texto; ahora prueba lo mismo en CSS, adelante, haré un café mientras espero ...
Por supuesto, hay muchas formas de dibujar un círculo en una página web, pero si hace flotar el texto alrededor de una, descubrirá que no es realmente un círculo; su cuadro delimitador sigue siendo rectangular. La única opción para crear texto que flota en una curva es insertar espacios al comienzo de cada línea y saltos de línea al final, indentando artificialmente el texto; algo que paga estragos con accesibilidad.
Para abordar el problema, el W3C está desarrollando CSS Shapes. Lanzado el 20 de junio su primer borrador de trabajo público, Módulo de formas CSS 1, detalla el uso de formas no rectangulares en relación con el modelo de caja y el comportamiento de flotación. Actualmente un trabajo en progreso las adiciones propuestas a CSS incluyen las formas rectangulares, recuadro-rectángulo, círculo, elipse y polígono.
En la implementación inicial, solo podremos flotar alrededor de las formas. Para hacer eso usaremos la propiedad shape-outside, así:
Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.