Web Platform Team Blog

Making the web awesome

Fragmentation of masked and clipped content – Part 2

The first part of the article “Fragmentation of masked and clipped content – Part 1” described possible scenarios how a clipping path can be broken into different fragments. The demonstrations used the CSS Multi-column layout with equally sized columns.

Fragmentation of clipping path for CSS Multi-column. The clipping path is sized as if the content was not broken into different pieces. For each fragment, the clipping path position is determined relative to the position of the current fragment in the virtually unbroken content.

Other CSS layouts like CSS Regions or CSS Overflow allow more flexibility on styling of fragment containers. A fragment container is a box that contains a fragment of the element. In a multicolumn element, each column is a fragment container.

The following example has three fragment containers. Each container has a different size and position. The content “Lorem ipsum” flows from the first container into the other two containers.

Three fragment container of different size. The content flows into each container.

Like in the first part of this article, the second part also looks at clipping path examples to help to decide how they should be influenced by fragmentation. Masking would follow the choices we make for clipping. The clipping path is the same ellipse as before with a 50% vertical and horizontal radius.

As a fragment container gets wider, less height is needed to contain the text. Since the elliptical clipping path has a vertical height of 50% the absolute clipping path height shrinks. This can have an influence on the relative offset for each fragment. The following considerations explore different sizing ideas.

The width of the paragraph changes. As wider the paragraph gets, as more shrinks the height.

The variable width of  fragment containers also extends the possibilities how to fragment a clipping path. For this reason, all examples in the second part use the first consideration of the first part of the article. It will not explore the different relative positions of the clipping path on each fragment. See the graphic in the introduction.

First Consideration

Each fragment has a different width. It is not possible to simply assume that the content was not broken anymore. More calculations need to be taken into account. Each fragment could be handled as if it contained the entire element..

The clipping path is sized for each fragment as if the content was unbroken for this fragment.

A reference size gets calculated for each fragment and it is assumed that the content is unbroken for each fragment. That means that the layout for the same content is calculated for each deviating width. This is because for each deviating width the content height differs. The resulting rectangles for the example above are (width x height):

  1. 124 x 512
  2. 182 x 338
  3. 95 x 703

The size of the clipping path for the first fragment is determined by the 124 x 512, for the second fragment by the 182 x 338 and the last fragment by the 95 x 703. The offset of each clipping path would be relative to the offset of the content of the current fragment and is also relative to the size of the current fragment. All these calculations eventually results in the graphic above.

Even if it seems that the cost are high, all the calculations need to be done anyway for proper positioning of the content.

Second Consideration

The model can still be simplified. Instead of creating an individual clipping path for each fragment if would be possible to use one reference rectangle to calculate the clipping path for all fragments.

The clipping path is sized according to the widest fragment in the fragment flow. This clipping path is then used for each fragment.

The behavior in the graphic above is currently used by WebKit. The dimension is calculated by the reference rectangle of a fragment as well – assuming that the content fills the fragment and is not broken. Instead of doing this for each fragment, the widest fragment is chosen to calculate the rectangle for all fragments.

It could be that the idea derives from CSS floats. Imagine a paragraph that is not broken into pieces. A floating element pushes the content by side. The paragraph would still not be broken into pieces. The reference rectangle would use the widest dimension of the paragraph.

Text with floating element. The reference rectangle is determined by the paragraph as a whole.

Of course there are different other possible variations that use a fixed reference rectangle for all fragments. Some examples are listed below:

Third Consideration

So far all of the examples have used an elliptical clipping path that had a relative dimension. Lets consider a circular clipping path with a radius of 62px:

clip-path: circle(62px at 62px 62px);

The following graphic fills the circular clipping path with black to demonstrate the problem:

An absolute clipping path gets repeated into the second fragment because of the smaller reference rectangle of the second fragment.

The height of the second fragment is smaller than the height of the first fragment. Even if the clipping path already covered the first fragment, it will still show up on the second fragment as well giving undesirable results.

The solution for this problem could be to sum up all absolute heights of all fragments. This sum will be the height of the reference rect.

The heights of all fragments are summed up to determine the height of the reference rectangle. The height is calculated to 370px.

The width of the reference rectangle could be with as in the first conclusion or as in the second conclusion.

A circular, absolute clipping path broken at the proper place.


Fragmentation gets a lot more multifaceted if the fragments do not share the same width. Finding the right solution may depend on different factors. There might not be the right solution for all of these use cases.  If you have your own solutions that should be considered as well, mail them to the www-style mailing list. Use “[css-break][css-masking]” to prefix the subject line.

Comments are closed.