Forum Feature requests

CSS Filter

daneren2005
Are there any plans to add CSS filter to div's/img elements in the near future? We were trying to add some different effects the user is allowed to add to their images, but none of them seem to work with prince at the moment. A list of the possible filters supported in current browsers is up at: https://developer.mozilla.org/en-US/docs/Web/CSS/filter. Even if support for all of them wasn't added, it would be nice to have support for some of them at least.
daneren2005
Do svg filters work?
mikeday
Prince does not support filters in SVG or CSS yet. We are planning to add support for filters in the future. Filters do require rasterising SVG and CSS content and embedding it in the PDF as bitmap images, which can make the PDF file bigger and potentially decrease the print output quality.

If you only wanted to apply filters to non-SVG <img> elements, that would be an easier place to start.
daneren2005
Alright, I am playing around with trying to reproduce css filter effects using ImageMagick. The results have not been great though since the css filter seems to be working under entirely different definitions of the same effects ImageMagick implements.
mikeday
Which CSS filter effects do you wish to use?
daneren2005
Drop shadow is definitely the most important and hardest to reproduce using a work around. Blur and Opacity are probably the next most important. But I will use any filter effects that are implemented since more options are always nice.
Daniel
Hello, I just wanted to see whether you had a roadmap and timescale for implementation of filters as yet?

For my projects filters are critical - among other things to grayscale images.

Thanks
mikeday
No timescale yet, but we are investigating rasterisation which is a requirement for filters.
Daniel
Thanks for the quick reply.

Are there any alternative approaches you can recommend in the meantime? Among other things I need a simple way to grayscale and tint images, potentially at scale, within html documents generated through PHP.

mikeday
ImageMagick, perhaps?
joelmeador
Just throwing in a little more support for this. We've had a couple users ask for this now in our support channel. http://www.imgix.com/ might be another option until it's Baked In™.

Try DocRaptor - PrinceXML web service and official PrinceXML partner

Marcel
Hey mikeday,

we are evaluating prince and would love to use it, but need filters on bitmap images (so no vectors) placed in svg <image>.


We use following filters:

<filter color-interpolation-filters="sRGB">
  <!-- sepia -->
  <feColorMatrix type="matrix" values="0.250 0.669 0.090 0 0 0.220 0.600 0.130 0 0 0.280 0.420 0.111 0 0  0.000 0.000 0.000 1 0"></feColorMatrix>

  <! -- black & white -->
  <feColorMatrix type="saturate" values="0"></feColorMatrix>

  <! -- brightness -->
  <feComponentTransfer>
    <feFuncR type="linear" slope="1"></feFuncR>
    <feFuncG type="linear" slope="1"></feFuncG>
    <feFuncB type="linear" slope="1"></feFuncB> 
  </feComponentTransfer>

  <! -- contrast -->
  <feComponentTransfer>
    <feFuncR type="linear" slope="1" intercept="0"></feFuncR>
    <feFuncG type="linear" slope="1" intercept="0"></feFuncG>
    <feFuncB type="linear" slope="1" intercept="0"></feFuncB>
  </feComponentTransfer>

</filter>


If you have any questions or there is a way I can help you, please let me know.

Thanks
Marcel
mikeday
Our latest builds support CSS filters on bitmap images, but not full SVG filters yet, they will come later.
Marcel
Good to hear. Thanks. How can I be notified / see when this is implemented? Do you have a public roadmap / feature backlog?
mikeday
We have a development roadmap, and you will receive an email when we update this forum thread to announce a new release.
Marcel
Nice, many thanks! Looking forward using prince professional once this feature is shipped.
daneren2005
It would be nice if the css filters cascade. For example in my case I have a div wrapping a div wrapping a img. A bunch of the filters are actually applied on one of the two wrapper divs. I had to do this in order to be able to stack and control the order the filters were applied in (ie: drop-shadow + gray-scale. The drop-shadow has to be on the wrapper or else you get colored drop-shadow on a gray scale image). Doing a bit of quick testing it appears the filters are only supported directly on the img element.
mikeday
We will take a look at this.
oodavid
Following for updates :-)
Marcel
Hey Mike,

very happy to see that it's one of the next items in the pipeline. Any schedule yet? Looking so much forward to this feature.

Thanks a lot!
Marcel
mikeday
It may be April Fools Day, but we have really released a Prince latest build with initial support for SVG filters!

There are limitations: some filters are not supported yet, SVG filters only apply to SVG elements and cannot be applied to other elements, and there are other issues we still need to fix.

But the existing support is already good enough to create some neat effects, give it a try! :D
Marcel
Hey Mike,

thank you very much! I tested the latest build and the filters seem to work at the first glance!

As mentioned earlier we use those filters:

<filter color-interpolation-filters="sRGB">
  <!-- sepia -->
  <feColorMatrix type="matrix" values="0.250 0.669 0.090 0 0 0.220 0.600 0.130 0 0 0.280 0.420 0.111 0 0  0.000 0.000 0.000 1 0"></feColorMatrix>

  <! -- black & white -->
  <feColorMatrix type="saturate" values="0"></feColorMatrix>

  <! -- brightness -->
  <feComponentTransfer>
    <feFuncR type="linear" slope="1"></feFuncR>
    <feFuncG type="linear" slope="1"></feFuncG>
    <feFuncB type="linear" slope="1"></feFuncB> 
  </feComponentTransfer>

  <! -- contrast -->
  <feComponentTransfer>
    <feFuncR type="linear" slope="1" intercept="0"></feFuncR>
    <feFuncG type="linear" slope="1" intercept="0"></feFuncG>
    <feFuncB type="linear" slope="1" intercept="0"></feFuncB>
  </feComponentTransfer>

</filter>


Thanks again and have a nice day!
Marcel
steven_noble
Any thoughts on when support for the blur filter on images will appear in a minor release? I'm using DocRaptor which does not support the intermediate latest builds.
mikeday
Filters won't be available in Prince 10, but perhaps DocRaptor can be convinced to offer a new version soon in the lead up to Prince 11. :)
mikeday
Prince 11 is now out!
daneren2005
It looks like filters applied to div's with img elements underneath still doesn't work. Is there an update on when we can expect that sort of functionality?
daneren2005
Edit: Ignore this post

Edited by daneren2005

daneren2005
It looks like the layering sort of works. I am noticing some issues which may be symptoms of a larger problem:

1) <div style="filter..."><div><svg><image></svg></div></div> doesn't render but if I take out the empty inner div it does. This is partially why I thought it wasn't working in an earlier post. I definitely see some weird edge cases where the filter is not getting applied which makes me worry about how well it handles more complicated filter setups. For example in my case I have 3 divs with different filters going and an img underneath each one in order to get some layered effects going.
2) Chrome does Drop-shadow as "filter: drop-shadow(rgb(255, 0, 0) 9.6px 9.6px 6.4px)" but FF does it as "filter: drop-shadow(9.6px 9.6px 6.4px rgb(255, 0, 0))". It is stupid that they are different, but Prince detects the Drop shadow for FF but not for Chrome.

Edit: This is using the latest stable release of 11.1

Edited by daneren2005

wangp
Can you post a full example for the layering issue? It worked in a simple example I made.

Both Firefox 45 and Chromium 55 on my system (now?) allow the color as the first argument of drop-shadow. I have not seen that before. Prince supports the syntax in the Filter Effects Module Level 1.
daneren2005
I attached a debug file which works. I have also attached one where nothing is different except the rgb value is switched in the drop-shadow filter like Chrome puts it. I am now unable to reproduce the layering issue, so it must have been related to the Chrome issue or something else and I just wasn't realizing it.
  1. debug_chrome.html1.1 kB
  2. debug_works.html1.1 kB