Spec Writing Madness

Hidden image for G+.

In the last SVG Working Group teleconference we discussed some aspects of CSS clipping. This discussion highlighted the sometimes unintended consequences of what seems to be a series of simple rational choices.

First, some background. Chunks of the SVG specification are being pulled out of the spec in order that they can be shared between SVG and CSS. This is overall a good thing. Web designers gains new features that are consistent across both SVG and HTML; things like filter effects, transforms, animation, etc. Web browser vendors are more motivated to perfect their implementation of old SVG features and implement new ones if they are also used in HTML. But this modularization process has its problems. The CSS forces are stronger than the SVG forces and their interests sometimes overwhelm those who see SVG as more of a pure drawing specification.

CSS clipping is part of the CSS Masking spec. With this spec, it is possible to define masks and clip paths in terms of the bounding box of the object that is being masked or clipped. Three ways to determine the bounding box are specified:

  • ‘border-box’
  • ‘padding-box’
  • ‘content-box’

Note that these terms are rooted in the CSS box model.

Image from the CSS2 specification showing a series of boxes within each other.

The CSS2 box model as shown in the CSS2 specification.

Equivalent SVG based terms might be:

  • ‘painted-box’ (includes fill, stroke, markers)
  • ‘stroke-box’ (includes fill, stroke)
  • ‘geometric-box’ (includes fill)
Triangle with fill but no stroke.

The dashed line is the bounding box for ‘geometric-box’.

Triangle with fill and stroke.

The dashed line is the bounding box for ‘stroke-box’.

Triangle with fill, stroke, and markers.

The dashed line is the bounding box for ‘painted-box’.

The default value is ‘border-box’. This may make perfect sense in HTML space.

For consistency, the default value should be the same for masking and for clipping and it should be the same for HTML and SVG.

During our meeting, we discussed what would make the most sense for SVG. Most people (including me) would find it very strange if the clipping of an object depended on what we would consider styling, thus ‘geometric-box’ would make the most sense. It might be possible to have the default style sheet set to that value for SVG but it is not clear this is what the SVG WG will choose to do. If they don’t, then by default, a clip path will depend on styling. Which can lead to some strange effects.

Suppose you have a triangle with a stroke. The ‘stroke-box’ and ‘painted-box’ depend on the thickness of that stroke, the line-join type, and in the case of miter join, the miter-join limit. OK, we can do the calculation to find the resulting bounding box, its just a few CPU cycles. Next lets add a dash pattern to the stroke. I was surprised to learn, that some people think that the dash pattern should effect the ‘stroke-box’ and that many graphics libraries are programmed that way. The box changes depending on if a dash hits a corner or not.

Triangle with fill, and dashed stroke.

The dashed line is the bounding box for ‘stroke-box’.

Now let’s go way out, suppose we animate the dash pattern (something you can so in SVG). As the dashes march around the triangle the bounding box will change. And since the clip path depends on the bounding box, it too will change… Probably not something that you would have expected or actually wanted.

A triangle showing an animated dash pattern marching around the triangle.

Note how the bounding box changes as the dash pattern moves.

This entry was posted in CSS, Inkscape, SVG. Bookmark the permalink.

One Response to Spec Writing Madness

  1. If you have a text element, then even its geometric bounding box is going to change with styling changes, such as when modifying the font-size. So we already have this interaction of styling changes possibly causing changes to objectBoundingBox calculations for clipPath, mask, etc.

    I think the issue of the stroke dashes causing it to be difficult to calculate the bounding box is a separate issue – I can easily imagine that for an example like this where you are animating the dashes around the shape, that you want your percentage-based clipPath or mask shape to be relative to the full stroke area, ignoring the effect the dashes would have. Should this be something the author can choose? Maybe, not sure.