Se la recente tendenza del design piatto ha dimostrato qualcosa, è quanto incredibilmente limitato sono i web designer quando si tratta di composizione. Ora che non siamo più distratti da smussature, sfumature e gloss, è chiaro che i web designer hanno una struttura per costruire i loro progetti: i rettangoli.
Ci sono naturalmente tanti modi per comporre gruppi di rettangoli quanti sono i pixel su uno schermo, ma quando si prendono in considerazione le esigenze di tipo e la necessità di progettare per risoluzioni diverse, le opzioni di layout iniziano ad apparire distintamente limitate.
Sappiamo tutti che tutti gli angoli non sono angoli retti; sappiamo tutti che le linee non sono sempre diritte. In effetti, alcuni dei progetti più entusiasmanti del secolo scorso sono usciti dalla griglia e si sono trasformati in archi e angoli, creando tensione, drammaticità ed eccitazione. È una proposta facile nel design di stampa: apri un documento in InDesign, seleziona lo strumento ellisse e disegna un cerchio sul palco, seleziona lo strumento testo e fai clic sul cerchio, quindi incolla il testo; ora prova la stessa cosa in CSS, vai avanti, farò un caffè mentre aspetto ...
Naturalmente ci sono molti modi per disegnare un cerchio su una pagina web, ma se si sposta il testo su uno si scoprirà che non è proprio un cerchio; il suo riquadro di delimitazione è ancora rettangolare. L'unica opzione per creare testo che fluttua in una curva consiste nell'inserire spazi all'inizio di ogni linea e interruzioni di riga alla fine, rielaborando artificialmente il testo; qualcosa che paga devastazione all'accessibilità.
Per risolvere il problema, il W3C sta sviluppando forme CSS. Rilasciato il 20 giugno il loro primo progetto di lavoro pubblico, Modulo CSS Shapes Livello 1, descrive l'uso di forme non rettangolari in relazione al modello scatolato e al comportamento flottante. Attualmente un work in progress le aggiunte proposte al CSS includono il rettangolo di forme, il rettangolo di riquadri, il cerchio, l'ellisse e il poligono.
Nell'implementazione iniziale saremo in grado di fluttuare attorno alle forme. Per farlo useremo la proprietà shape-outside, in questo modo:
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.