Hello,
I have a Connect design template with a div box in a print context. Within that div I have an image. I want to warp that div (respectivly the image) and use the CSS property “perspective” to do that ( transform:perspective(15em) rotateY(5deg); ). In the Designer preview tab everything looks fine. In my print output file (pdf) there`s only the div (warped) but the image is missing. I tried different things (e.g. nested divs, transform only image, transform parent div, image as background-image, static image, dynamic image) but nothing works.
Does anybody have an idea why it does not work?
Thanks,
Thomas
Just to make sure…have you tried no CSS change…just to see if the image is not the culprit?
I did. All images will be printed without css transform (perspective), also nested in divs.
I have tried different approaches. I tried as well pdf file as jpg file.
And if you try the same thing in a Web context? If that work, then it means that our internal HTML engine cannot handle properly some CSS transform option.
In any case, I suggest you open a technical support call through our website.
They will be able to try and test your Template and report it to our R&D if need be.
I tried the same thing in a web context and there it works if I check the option “embed all resources” in the Workflow Plugin “Create Web Content” and save the result as html file.
I will give that case to the technical support and hope it will be possible in a future version to use more css properties for print context. It is very frustrating to see a good result in the Designer preview but nothing (image is missing) in the output.
I tried another thing: If I use an inline SVG (not as image) within a DIV, while the DIV becomes the CSS property transform: perspective(15em) rotateY(30deg); the image will be in the print output.
Base64 encoded image don`t work (image is missing in print output).
But sadly I can not work with inline SVG. I had to convert my PDF to SVG to get the code, but I don`t know any solution that can do it.
Ive found a small command line tool called "pdf2svg" with a dll library to convert PDF to SVG. The converted SVG seems to be good, but only because I dont have text in my PDF files.
I create a PDF in Workflow and convert it via script (command line pdf2svg) to SVG in a specific location. In my Connect Design template I load the SVG as external text and append it to my existing DIV. The DIV has assigned the CSS property transform: perspective(15em) rotateY(30deg); . I can say, with that implementation the PDF output from Designer is a lot faster (compared to using PDF as external dynamic image).
Maybe this information is also interesting for someone else.
PS: To scale the SVG to the parent DIV I remove the width and height attributes from SVG via Script in Workflow.
I have reported the issue that images are missed in output while using css perspective to OL support. I got the feedback that it is a bug and will be fixed in a future release. Just for info…