Documenting a learning curve

In order to avoid breaking up a css-shape from the surrounding wrapping text to another column, (… which is far from pretty), when using CSS-Shapes (to make text flow around an image or an object) within a multi-column layout: one can use the property break-inside with the value avoid-column on the wrapping element:

September 2014

.wrap-module {
  break-inside: avoid-column;
}

Consider the following HTML-markup one would need in order to achieve this:

<div class="wrap-module">
<div class="shape-rect"></div>
  <p class="has-pullquote" data-pullquote="Eligendi cumque ...">
     Lorem ipsum ...
   </p>
</div>

That is quite some extra HTML-markup for pretty decoration. In this example ¹ those elements are inserted into the page with (jQuery) javascript, to keep the HTML clean (here is a fork of this pen in plain-vanilla javascript, with slightly different nesting of elements). Here the CSS-Shape is combined with the classic pullquote with data-attributes trick, which will even make more sense in the near future. ²

Here the .shape-rect could be a rectangle made with the property shape-outside with the polygon values:

.shape-rect {
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  float: right;
  shape-margin: 1em;
  width: 16em;
  height: 16em;
}

This is what makes it all work: wrapping the text around the shape.

Examples

• example markup inserted with jQuery
• example markup inserted with plain-vanilla javascript

Notes

1. Disclaimer: the example has many pullquotes: normally one wouldn’t use this many pullquotes on one page, but this is just in order to show it not breaking the layout. One can test this by dragging the browser-window, and maybe also see what happens when removing the .wrap-module declaration from the CSS.
2. One day we will be able to use shape-inside and css exclusions for this, but here and now, the pullquote-text pseudo-element is positioned absolute right on top of the css-shape itself.

This article was also published on Codepen