Forum How do I...?

Add a drop shadow on a box/image

jmh
Does prince allow drop shadows? The CSS3 box-shadow property isn't listed in the prince documentation.

In particular, I need a drop shadow around some images in a document.
jim_albright
jmh
Those methods will only allow highlighting of only a few pixels wide. Would it somehow be possible to use SVG gradients for the effect?


This is for dynamically generating PDFs on a server. So it has to work with arbitrary image inputs and doesn't need web browser support.
mikeday
Prince doesn't support box-shadow or text-shadow yet. Many SVG gradients are supported, which might be enough to get a shadow effect with some experimentation.
somnath
Hi Mike,
Will these box-shadow properties supported by PrinceXML in any future release?

Thanks,
Somnath
mikeday
In any future release? Almost certainly! Not in the next release, though. :D
mikeday
The latest build now includes support for box-shadow! Finally!
zambadu
Hi folks,

box-shadows seems not to be converted right, it seems that the blur size is not converted probably with different DPIs.

If generated with 72 dpi the size is correct and everything looks nice, with 300 dpi it looks like the shadow was rendered with 72 dpi and than upscaled, as it is pixilated as hell :)

We define the blur with pixel unit size in CSS, could using another unit for this like "mm" brings better results?
mikeday
Can you attach a small sample document? Which version of Prince are you using?
zambadu
Hi, sorry for late reply.

Here is a sample. The PDF in 300 dpi is to large to upload here, I can send you a link if you need.

We use version 13 at the moment, but I will try it with the new 14 again.
  1. 20210203065347pvdoc60196ea0e0756f611339a315 (1).pdf1.6 MB
    PDF 72 dpi
  2. Neue Edition.htm16.6 kB
    HTML