CSS Exclusions are available in Chrome Canary

In October the CSS Exclusions feature made it for the first time in a browser nightly build. If you have Canary and you enable the experimental WebKit features flag then you can actually play with this feature (about:flags and then find ‘Experimental WebKit features’ flag and enable it; don’t forget to restart the browser).

So what can you do with this feature for now? Pretty amazing stuff actually. Suppose you are a big fan of E.A. Poe and you want to render “The Raven” like this (cheesy I know but beautiful nevertheless):

Then it is possible using this feature :) Here is the CSS guilty of formatting in this shape:

.wrap {
    background: url('crow-feet.svg') no-repeat;
    -webkit-shape-inside: polygon(59.015% 76.618%, 49.316% 72.894%, ...);
}

You can get this demo and others from here (don’t forget to use a Canary browser if you want to see this feature in action.)

A few words about this implementation. This is work in progress and as a result only a subset of the shape-inside functionality is available. Some of the restrictions are related to the shape itself. You can only use a shape that has the top edge horizontal and doesn’t break the text in more than one segment. Hans Muller has explained all of this in great detail in this post.

Do you think that this is awesome or not?

Update: you can find the Polish translation of this post here thanks to Katia Osipova and the Czech one here thanks to Daniela Milton.

One thought on “CSS Exclusions are available in Chrome Canary

  1. Pingback: Wyłączenia CSS są dostępne w Chrome Canary | Science TranslationsScience Translations

Leave a Reply

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