Als de recente platte ontwerptrend iets heeft laten zien, is het hoe ongelofelijk beperkt webontwerpers zijn als het gaat om compositie. Nu we niet langer worden afgeleid door afschuiningen, verlopen en glans is het duidelijk dat webontwerpers één structuur hebben om hun ontwerpen rond te bouwen: rechthoeken.
Er zijn natuurlijk net zoveel manieren om groepen rechthoeken te vormen als er pixels op een scherm staan, maar wanneer u rekening houdt met de eisen van het type en de noodzaak om te ontwerpen voor verschillende resoluties, beginnen de lay-outopties duidelijk beperkt te lijken.
We weten allemaal dat alle hoeken geen rechte hoeken zijn; we weten allemaal dat lijnen niet altijd recht zijn. In feite is een van de meest opwindende ontwerpen van de vorige eeuw uit het raster gebroken en in bogen en hoeken afgebogen, waardoor spanning, drama en opwinding ontstonden. Het is een gemakkelijk voorstel bij het afdrukken: open een document in InDesign, selecteer het ovaalgereedschap en teken een cirkel in het werkgebied, selecteer het tekstgereedschap en klik op de cirkel, plaats nu je tekst; probeer nu hetzelfde in CSS, ga je gang, ik zal koffie zetten terwijl ik wacht ...
Natuurlijk zijn er tal van manieren om een cirkel op een webpagina te tekenen, maar als je tekst rond zweeft, ontdek je dat het niet echt een cirkel is; het begrenzingsvak is nog steeds rechthoekig. De enige optie voor het maken van tekst die zweeft naar een curve is om spaties aan het begin van elke regel in te voegen en regelafbrekingen aan het einde, waarbij de tekst kunstmatig wordt ingesprongen; iets dat toegankelijkheid schaadt.
Om het probleem aan te pakken, ontwikkelt het W3C CSS-vormen. Uitgegeven op 20 juni hun eerste openbare werkvoorraad, CSS Vormen Module Niveau 1, details over het gebruik van niet-rechthoekige vormen in relatie tot het doosmodel en zweefgedrag. Momenteel is een werk in uitvoering de voorgestelde toevoegingen aan CSS omvatten de vormen rechthoek, inzet-rechthoek, cirkel, ellips en veelhoek.
Bij de eerste implementatie kunnen we alleen rond vormen zweven. Om dat te doen, gebruiken we de eigenschap shape-outside, zoals:
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.