Si la récente tendance du design plat a démontré quelque chose, les créateurs Web sont extrêmement limités en matière de composition. Maintenant que nous ne sommes plus distraits par les biseaux, les dégradés et la brillance, il est clair que les concepteurs de sites Web ont une structure unique pour créer leurs conceptions: des rectangles.
Il y a bien sûr autant de manières de composer des groupes de rectangles qu'il y a de pixels sur un écran, mais lorsque vous prenez en compte les exigences de type et la nécessité de concevoir pour différentes résolutions, les options de mise en page apparaissent nettement limitées.
Nous savons tous que tous les coins ne sont pas des angles droits; nous savons tous que les lignes ne sont pas toujours droites. En fait, certaines des conceptions les plus intéressantes du siècle dernier se sont détachées de la grille et sont devenues des arcs et des angles, créant des tensions, des drames et de l’excitation. C'est une proposition facile dans le design d'impression: ouvrez un document dans InDesign, sélectionnez l' outil Ellipse et dessinez un cercle sur la scène, sélectionnez l' outil Type et cliquez sur le cercle, collez-le maintenant dans votre texte; maintenant essayer la même chose en CSS, allez-y, je vais faire un café en attendant ...
Bien sûr, il y a beaucoup de façons de dessiner un cercle sur une page Web, mais si vous flottez autour d'un texte, vous découvrirez que ce n'est pas vraiment un cercle; sa boîte englobante est encore rectangulaire. La seule option pour créer du texte qui flotte sur une courbe consiste à insérer des espaces au début de chaque ligne et des sauts de ligne à la fin, en retrait artificiellement du texte; quelque chose qui fait des ravages avec l'accessibilité.
Pour résoudre le problème, le W3C développe des formes CSS. Sorti le 20 juin de leur premier projet de travail public, Module de formes CSS niveau 1, détaille l'utilisation de formes non rectangulaires en relation avec le modèle de boîte et le comportement du flottant. Actuellement, les ajouts proposés aux CSS incluent les formes rectangle, rectangle, cercle, ellipse et polygone.
Dans la mise en œuvre initiale, nous ne pourrons que flotter autour des formes. Pour ce faire, nous utiliserons la propriété shape-outside, comme ceci:
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.