Adobe

decor

Web Platform Team Blog

Making the web awesome

Fragmentation of masked and clipped content – Part 1

Clipping and masking are graphical effects for partly or fully hiding portions of an object. A clipping path defines an area where the content will be visible. Content outside the area is invisible. An image can be used as a “mask” and the luminance of the image will determine how much of your content will be visible on the screen. Photoshop and Illustrator users are probably already familiar with clipping masks and layer masks/opacity masks. Our team is working on enabling these features in browsers with the help of CSS. The article “CSS Masking” explains CSS Masking and clipping in more detail.

The clipping path in the middle clips the image on the left side. The result can be seen on the right.

Fragmentation of content

Clipping and masking can be applied to SVG elements and HTML elements. An HTML element also has the property that it can be “broken“ into different pieces. This principle is called “fragmentation” and allows web authors to use layouts like CSS Multi-column or CSS Regions. Content that does not fit into one column or the current region is broken into different fragments and continues on the next column or region.

This article looks at clipping path examples to help decide how they should be influenced by fragmentation. Masking would follow the choices we make for clipping. To simplify the examples, the article just analyzes CSS Multi-column layout with equally sized columns. Other layout proposals like CSS Regions can create fragments of different widths and will be considered in a follow-up article.

How does a clipping path apply to content that is split into different fragments? This question is currently discussed within the CSS WG. This article demonstrates different possible solutions taking CSS Multi-column as example. In the illustration below, the clipped content is a black colored text. The text flows from the first column into the second and third column. Each column has an equal width.

An example of CSS Multi-column in use. The content flows into three columns.

An ellipse, centered on the content area, with a horizontal and vertical radius of 50% is taken as clipping path.

The elliptical clipping path.

The markup for the example could look like this:

<div>
  <h2>Lorem ipsum</h2>
  <p>Lorem ipsum dolar...</p>
</div>
<div id="content">
  <h2>Lorem ipsum</h2>
  <p>Lorem ipsum dolar...</p>
</div>
<div>
  <h2>Lorem ipsum</h2>
  <p>Lorem ipsum dolar...</p>
</div>

body {
  column-count: 3; 
}

With the clipping path applied:
#content {
  clip-path: url("#clip");
}

<svg>
<clip-path id="clip" clipPathUnits="objectBoundingBox">
  <ellipse cx=".5" cy=".5" rx=".5" ry=".5"/>
</clip-path>
</svg>

or simply:
#content {
  clip-path: ellipse();
}

The following graphics shows the clipping path applied to an element that is not fragmented:

The element on the left is not fragmented. The element on the right is the same element with a clipping path applied.

“Copy” the clipping path

A simple solution would be to “copy” the clipping path into each fragment. The clipping path would be sized and position for each fragment of the element individually, just as if each fragment is a separate element.

The elliptical clipping path is “copied” into each fragment of the element. Each fragment is responsible for positioning and sizing the clipping path individually.

Even though this seems to be a simple solution, it might not be the most desirable one. Breaking the clipping path into different fragments might be as desirable as breaking the content into different fragments.

Clipping and masking share the problem of fragmentation with the “background-image” and “border” properties. Therefore, parts of the discussion here may apply to these properties as well.

Note: The “copy” behavior may still be useful. It was suggested to let the “box-decoration-break” affect clipping and masking as well. Authors could switch between “copy” or one of the following considerations.

First consideration

In the first consideration, the browser assumes for each fragment that the content was not broken into different pieces.  The clipping path is sized according to the dimension of the “unbroken” content and positioned relative to the fragment position.

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.

The clipping path in the first fragment is positioned at the top, in the second at the middle and in the third at the bottom.

Second consideration

The second consideration is a variation of the previous one. The clipping path is still sized as if the content was unbroken. But the position is relative to the top left of the reference box of each fragment.

The clipping path is sized as if the content was not broken. Each fragment positions the clipping path on its top left relative to the reference box.

Sizing relative to the “bounding client rect”

Another interesting solution is to compute the smallest rectangle (the “bounding client rect” named after the function getBoundingClientRect()) that includes all border boxes of each fragment and their descendants. The clipping path would be sized and positioned according to this rectangle. All fragments are clipped together as one piece by the same clipping path.

The clipping path is sized and positioned relative to the bounding client rect. The fragmented element is clipped as a “whole”.

The described behavior does not really count as fragmentation but is used by Firefox at the time of writing this article.

Conclusion

Fragmentation is an important part of the CSS layout and is documented in its own specification. The article presented different possible rendering models for clipping on fragmented content. There are more variations that can be considered.

The examples above all used the CSS Multi-column layout. CSS Multi-column has the benefit that the width of each fragment is of equal size. Other layout proposals like CSS Regions allow fragments of different widths.

Example of CSS Regions. The content flows between three regions.

How would fragments with different widths influence the sizing of clipping paths? This problem will be looked at in a follow-up article.

The CSS WG will need to decide which rendering model will be used in the future. Participate in the discussion! Sign up for the www-style mailing list and send your feedback.

Comments are closed.