Skip to content

CSS box-shadow and text-shadow #13

Open
SimonSapin opened this Issue Oct 3, 2012 · 9 comments

2 participants

@SimonSapin
Kozea member

WeasyPrint currently does not support the CSS box-shadow or text-shadow properties.

The main limitation is that these shadow use a Gaussian blur, but cairo (by itself) does not do such blurs. Since the blur can not be expressed as vectors in a PDF file, they need to be rendered to pixel-based images. It would be best to make images at the surface’s fallback resolution. Scipy can do the gaussian filter on a numpy array based on the image’s data.

@SimonSapin
Kozea member

https://code.google.com/p/cairocks/ has a gaussian filter for cairo image surfaces.

@SimonSapin
Kozea member

#cairo @ Freenode

mrobinson: As far as I know, every standard says something along the lines of "do something like a gaussian."
mrobinson: In WebKit we use three box blurs.

@liZe
Kozea member
liZe commented Dec 27, 2013

box-shadow has been implemented in the "shadow" branch.

Good news:

  • No regressions in tests
  • Multiple inset/outset shadows supported
  • Almost no impact on speed for boxes with no box-shadow
  • Many tests for box-shadow property syntax
  • Quite good results on real-world tests
  • 2 out of 2 (only!) tests in W3C test suite pass, including the one testing the blur rendering (yes, that's a real gaussian blur :smile:)
  • Not so bad performance for small boxes with no blur or small blur

Bad news:

  • Current implementation relies on pillow (well, that's better than scipy)
  • Raster (that can be avoided for box-shadows with no blur)
  • Really poor performance for large boxes with large blur, can easily kill your computer (yes, that's a real gaussian blur :cry:)
  • No tests for rendering (easy to add for box-shadow without blur, more difficult with blur)

It's possible to implement a three-box-blur algorithm instead of the real gaussian blur of pillow. I'm not sure about the impact on speed (who said that it should be included in cairocffi?), but it's a good idea if we want to get rid of pillow (is that what we want?). We could also remove this ugly cairo-surface to pillow-image to cairo-surface translation.

If the code is good for everybody, we can merge and add text-shadow (anyone interested?).

@liZe
Kozea member
liZe commented Dec 27, 2013

Rendering tests added (except for blurs), the code looks really reliable now.

@liZe
Kozea member
liZe commented Dec 27, 2013

text-shadow added with tests for syntax.

@SimonSapin
Kozea member

Interesting… now let’s see if and when it materializes :]

@SimonSapin
Kozea member
@SimonSapin
Kozea member

Also, as nice as they are on screen, I’m told shadows look terrible on print since you have to dither to do grays.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.