CSS box-shadow and text-shadow #13

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

Comments

Projects
None yet
2 participants
@SimonSapin
Member

SimonSapin commented Oct 3, 2012

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

This comment has been minimized.

Show comment
Hide comment
@SimonSapin

SimonSapin Jan 10, 2013

Member

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

Member

SimonSapin commented Jan 10, 2013

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

@SimonSapin

This comment has been minimized.

Show comment
Hide comment
@SimonSapin

SimonSapin Apr 8, 2013

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.

Member

SimonSapin commented Apr 8, 2013

#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

This comment has been minimized.

Show comment
Hide comment
@liZe

liZe Dec 27, 2013

Member

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 😄)
  • 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 😢)
  • 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?).

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 😄)
  • 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 😢)
  • 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

This comment has been minimized.

Show comment
Hide comment
@liZe

liZe Dec 27, 2013

Member

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

Member

liZe commented Dec 27, 2013

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

@liZe

This comment has been minimized.

Show comment
Hide comment
@liZe

liZe Dec 27, 2013

Member

text-shadow added with tests for syntax.

Member

liZe commented Dec 27, 2013

text-shadow added with tests for syntax.

@liZe

This comment has been minimized.

Show comment
Hide comment
@SimonSapin

This comment has been minimized.

Show comment
Hide comment
@SimonSapin

SimonSapin Oct 22, 2014

Member

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

Member

SimonSapin commented Oct 22, 2014

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

@SimonSapin

This comment has been minimized.

Show comment
Hide comment
@SimonSapin

This comment has been minimized.

Show comment
Hide comment
@SimonSapin

SimonSapin Nov 1, 2014

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.

Member

SimonSapin commented Nov 1, 2014

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