Apps

Experiment with CSS3 Exclusions and Shapes module

The CSS Exclusions module is still in the experimental phase, but you can start learning about it and playing with the code now.

The CSS Exclusions and Shapes Module Level 3 -- currently being edited by folks at both Adobe Systems, Inc., and Microsoft Corporation -- offers a way to define arbitrary area elements around which inline content can flow; Exclusions can be defined on CSS block-level elements, which previously were limited to floats. Geometric shapes can be defined which allow inline content to flow inside any element, for example, a polygon shape can be drawn that will affect inline content to wrap around the form instead of the bounding box.

The editor's draft of the specification is provided for discussion only and may change at any time; therefore, any citation of the document should be taken as a work in progress. Having said that, the experimental nature of the spec means you will need Chrome Canary to view any of the examples provided in this piece. Once the CSS3 Exclusions feature has been fully implemented in modern browsers, web developers will be able to add any inline content which can be spread out into any shape and can be defined with rectangles, polygons, ellipses, circles, and even SVG paths.

Browser support

As I mentioned above ,the browser support for CSS exclusions is quite limited and given the experimental nature of the specification, it still needs to be flagged in Google Canary by enabling the "Experimental WebKit features" flag. For more detailed browser support, you can check the CSS Exclusions and Shapes Support matrix provided by Adobe's GitHub Platform Utilities, which also allows you to run tests in your browser for the support level expressed as a percentage.

Demonstrations

Bear Travis created the Polygon Drawing tool which demonstrates the CSS Exclusion specification in use, and allows you to create various CSS polygon shapes. You can also add in new points by double-clicking the half-points or remove any existing points by double-clicking them as well. The polygon drawing demo page is shown in Figure B below, as viewed Google Canary Version 28.0.1488.0.

Figure B

Another example of the CSS Exclusion in use is provided by Divya Manian with the Shape Inside demonstration ,which was used at the JSCamp: CSS Next talk that Divya gave in November of 2012. The demo page is shown in Figure C.

Figure C

Under the hood: Coding example

A code review of the Shape Inside demonstration utilizes two CSS3 properties with the webkit vendor prefix, the -webkit-hyphens, and -webkit-shape-inside for the polygon shape. Both are shown in the code snippet below which is styled for the paragraph containing the famous quote from Edgar Allan Poe's The Raven:

-webkit-hyphens: auto;
-webkit-shape-inside: polygon(59.015% 76.618%, 49.316% 72.894%, 35.699% 69.153%, 26.106% 58.415%, 20.799% 48.452%, 16.814% 38.447%, 16.595% 26.175%, 18.384% 21.205%, 18.719% 18.314%, 18.022% 17.236%, 16.997% 15.669%, 15.588% 13.887%, 13.017% 12.713%, 9.541% 12.314%, 0.469% 10.522%, 0.000% 9.789%, 11.564% 5.846%, 13.017% 5.484%, 15.253% 4.942%, 21.179% 1.780%, 24.165% 0.000%, 33.508% 0.000%, 38.364% 2.949%, 42.507% 6.335%, 49.130% 11.182%, 54.641% 17.128%, 58.535% 18.696%, 76.920% 38.014%, 79.253% 45.400%, 83.900% 59.241%, 84.697% 63.008%, 87.793% 70.424%, 91.912% 79.192%, 98.501% 89.538%, 97.737% 90.015%, 97.149% 89.675%, 96.576% 90.782%, 97.177% 92.724%, 100.000% 97.907%, 96.912% 99.884%, 94.298% 97.546%, 92.174% 97.456%, 78.240% 97.907%, 69.457% 86.842%, 62.881% 80.381%, 59.015% 76.618%, 59.015% 76.618%);
I decided to create my own polygon using a mash up of the code generated with the Travis Polygon Shape tool, along with similar CSS and HTML code inspired by the Divya Shape Inside demo. The result incorporates the first verse of the famous poem Phenomenal Woman by Maya Angelou, and is displayed in Figure D (Google Canary Version 28.0.1488.0).

Figure D

The CSS and HTML code snippets in this quick example are displayed below:

<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #002b36;
}
.main {
       line-height: 1.4;
       font-size: 1.4rem;
       font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
p {
color: #3FF;
       width: 400px;
       height: 760px;
       margin: 0 auto;
       -webkit-hyphens: auto;
       -webkit-shape-inside: polygon(35.83% 73.12%,2.04% 98.87%,74.00% 98.87%,99.83% 73.74%,84.17% 47.87%,102.38% 24.68%,83.08% 7.25%,-4.79% 1.57%,23.52% 25.60%,-0.67% 49.13%);
}
h3 {
       color: #C36;
       margin: 0 auto;
       width: 280px;
       line-height: 1em;
       font-size: 1.1em;
       font-family:"Courier New", Courier, monospace;
}
</style>
<body>
    <div class="main">
    <h3>Phenomenal Woman by Maya Angelou</h3>
        <p>Pretty women wonder where my secret lies.<br />
        I'm not cute or built to suit a fashion model's size<br />
        But when I start to tell them,<br />
        They think I'm telling lies.<br />
        I say,<br />
        It's in the reach of my arms<br />
        The span of my hips,<br />
        The stride of my step,<br />
        The curl of my lips.<br />
        I'm a woman<br />
        Phenomenally.<br />
        Phenomenal woman,<br />
        That's me.  <br />
        </p>
    </div>
</body>

More examples

These examples can be viewed in Chrome Canary only, and continue to offer more insight into the CSS Exclusions, shapes, and possibilities.

Flowing content with CSS Exclusions: Shape Inside - with CSS Exclusions, this example shows how you can set an element's content area to be an arbitrary shape using Shape-Inside.

Animated Shape Inside - this CSS Exclusions demonstration displays an animated shape which shows the initial WebKit support for certain kinds of polygons. The animated polygon is displayed in Figure E below.

Growing and Shrinking Polygons: Round One - Hans Muller's WebKit Blog about the new WebKit support for polygonal shape-margin and shape-padding.

Figure E

While the CSS Exclusions specification has very limited browser support and is still in the early stages of experimentation and development, it is a fun diversion to play around with the various ways that the polygon shape and inline content can be manipulated.

Some would argue that "experimental" specifications such as this one are a waste of time and serve no purpose, but alas, there is more to it than meets the eye. Experimentation is the orderly process of carrying out a goal of verifying, falsifying, or establishing the validity of a hypothesis. In this case, the explanation that a shape can be defined which excludes inline content has been proven using the Canary experimental browser. Experimental web design techniques help pave the way for further development in the browser, HTML coding languages, and CSS specifications, which ultimately benefits the overall user experience for the online community.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks