Se a recente tendência de design plano demonstrou alguma coisa, é como os web designers incrivelmente limitados são quando se trata de composição. Agora que não estamos mais distraídos com chanfros, gradientes e brilho, fica claro que os web designers têm uma estrutura para construir seus projetos: retângulos.
Existem, é claro, várias maneiras de compor grupos de retângulos, pois há pixels em uma tela, mas quando você leva em conta as demandas do tipo e a necessidade de projetar para diferentes resoluções, as opções de layout começam a parecer nitidamente limitadas.
Nós todos sabemos que todos os cantos não são ângulos retos; Todos nós sabemos que as linhas nem sempre são retas. Na verdade, alguns dos projetos mais interessantes do século passado saíram da grade e se espalharam em arcos e ângulos, criando tensão, drama e emoção. É uma proposta fácil no design de impressão: abra um documento no InDesign, selecione a ferramenta de elipse e desenhe um círculo no palco, selecione a ferramenta de texto e clique no círculo, agora cole em seu texto; Agora tente a mesma coisa no CSS, vá em frente, eu vou fazer um café enquanto espero ...
É claro que existem muitas maneiras de desenhar um círculo em uma página da web, mas se você colocar o texto em volta, descobrirá que não é realmente um círculo; sua caixa delimitadora ainda é retangular. A única opção para criar texto que flutua em uma curva é inserir espaços no início de cada linha e quebras de linha no final, recuando artificialmente o texto; algo que prejudica a acessibilidade.
Para resolver o problema, o W3C está desenvolvendo formas CSS. Lançado em 20 de junho seu primeiro rascunho de trabalho público, Módulo de Formas CSS Nível 1, detalha o uso de formas não retangulares em relação ao modelo de caixa e ao comportamento de flutuação. Atualmente, um trabalho em andamento inclui as formas de retângulo, retângulo-inset, círculo, elipse e polígono.
Na implementação inicial, só poderemos flutuar em torno de formas. Para fazer isso, usaremos a propriedade shape-outside, assim:
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.