CSS Exclusions and Shapes Split Into 2 Specs

It can often take several years for a W3C spec to go from initial submission (a W3C member submitted a suggestion for a Web standard) to final recommendation status. Often though, a spec is split up into multiple independent  specs to allow each spec to evolve independently, and hopefully faster.

This is what recently happened with the CSS Exclusions & Shapes Specification.  Exclusions and Shapes are in fact two independent features.  Different people could and should therefore be working on the two specs independently rather than having everyone make decisions about both features.  So now we have CSS Exclusions and CSS Shapes.

What exactly is the difference between CSS Exclusions and CSS Shapes though?

Currently, if you want one element to wrap around another, you can use a float.  Take a look at the following text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod ipsum at viverra faucibus. Sed et nunc eu velit commodo facilisis id eget diam. In elementum nunc sit amet nisl pulvinar dignissim. Ut adipiscing ipsum urna, eu hendrerit ipsum hendrerit quis. Sed congue nunc sed mauris consectetur lacinia. Aliquam venenatis leo arcu, id egestas felis fermentum quis. Sed eu nisi non massa porta ornare et eget nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.

The purple “Lorem ipsum…” text is styled with a “float: left”, so the green “Far far away…” text wraps around its right and bottom edges.

CSS Exclusions allow you to extend this wrapping functionality to elements other than floats.  With CSS Exclusions, inline content can be wrapped around any block element.  This allows you to define, for example, a block in the middle of your page, around which text can flow:

exclusion-writing-modes

But what if you want to change the shape of that exclusion area?  That’s where CSS Shapes come in:

float-shape-outside

CSS Shapes work wherever you can wrap inline content around a block element.  Currently that is limited to floats.  In the future when CSS Exclusions are supported, you’ll be able to change the shape of any exclusion area.

In the meantime though, the two specs can charge full steam ahead without one slowing the other down.

For more information on the work Adobe is doing with CSS Shapes, I’d recommend the following: http://html.adobe.com/webplatform/layout/shapes/

 

Tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *