I have a file named pg_2.xhtml that uses transform:matrix. In Firefox, the text displays correctly. When I convert with prince the text wrapped in the transforms all disappears. The data is actually added to the output pdf, but the transformation matrix moves it way off of the page. I attached the raw pdf data obtained through a pdf editor to demonstrate.
Forum › Bugs
Transform:matrix not working correctly
This looks similar to an issue we fixed in Prince 8.1 rev 4, where vertical translations were inverted. Perhaps it is still causing problems for matrix() transformations. Can you try using translate() instead, or perhaps negate the y-coordinate?
Unfortunately, the data we are trying to convert is coming from clients, so we cannot change the xhtml to use translate(). I haven't spent alot of time looking into making the data work, but I have worked extensively with converting pdf data into a proprietary format, and an issue we always had was with the coordinate system in pdf. The pdf origin is on the lower left and the viewport and user coordinate system as per W3C is at the upper left. PDF units are different as well, where 1 unit is 1/72". I will play with the values on my side to assist in the resolution of this issue, and respond to this thread.
I forgot to share the style.css file. It looks like this:
body, .back, .text { width: 738px; height: 885px; margin:0; padding:0; overflow:hidden;}
.back, .text { position:absolute; }
div {font-size:1px;}
@font-face {
font-family: 'ComicSansMS';
src: url('Fonts/ComicSansMS.ttf');
}
@font-face {
font-family: 'GillSansMTPro-Book';
src: url('Fonts/GillSansMTPro-Book.ttf');
}
We are specifying a size of 738px x 885px. The clipping path that is specified in the pdf data I attached is 553.5 x 663.75. It looks like you have converted pixels to inches and then multiplied inches by 72 to get the clipping path size. I did the math, it is pretty close...my calculations came out to 7.69 inches x 9.22 inches, or 553.68 PDF units x 663.84 PDF units. The clipping path defined in the pdf data is 553.5 wide x 663.75 high. The tx and ty values are not converted, for instance one cm command looks like this:
1.0007 0.0000 0.0000 1.0000 62.4684 820.6314 cm
which corresponds to this line in the xhtml:
<div style="position:absolute;-webkit-transform:matrix(1.0007, 0.0000, 0.0000, 1.0000, 62.5337, 820.6314);transform:matrix(1.0007, 0.0000, 0.0000, 1.0000, 62.5337, 820.6314)">
The tx and ty values move the coordinate system outside of the clipping path, since they are unconverted from pixel space. Also, the tx and ty in the matrix are transforming an inverted coordinate system relative to pdf. Please investigate, and I will continue to do the same on my side. In the meantime I will pull down the PDF spec, as it has been some time since I have looked at it, and try to help develop an algorithm to convert the tx and ty values.
body, .back, .text { width: 738px; height: 885px; margin:0; padding:0; overflow:hidden;}
.back, .text { position:absolute; }
div {font-size:1px;}
@font-face {
font-family: 'ComicSansMS';
src: url('Fonts/ComicSansMS.ttf');
}
@font-face {
font-family: 'GillSansMTPro-Book';
src: url('Fonts/GillSansMTPro-Book.ttf');
}
We are specifying a size of 738px x 885px. The clipping path that is specified in the pdf data I attached is 553.5 x 663.75. It looks like you have converted pixels to inches and then multiplied inches by 72 to get the clipping path size. I did the math, it is pretty close...my calculations came out to 7.69 inches x 9.22 inches, or 553.68 PDF units x 663.84 PDF units. The clipping path defined in the pdf data is 553.5 wide x 663.75 high. The tx and ty values are not converted, for instance one cm command looks like this:
1.0007 0.0000 0.0000 1.0000 62.4684 820.6314 cm
which corresponds to this line in the xhtml:
<div style="position:absolute;-webkit-transform:matrix(1.0007, 0.0000, 0.0000, 1.0000, 62.5337, 820.6314);transform:matrix(1.0007, 0.0000, 0.0000, 1.0000, 62.5337, 820.6314)">
The tx and ty values move the coordinate system outside of the clipping path, since they are unconverted from pixel space. Also, the tx and ty in the matrix are transforming an inverted coordinate system relative to pdf. Please investigate, and I will continue to do the same on my side. In the meantime I will pull down the PDF spec, as it has been some time since I have looked at it, and try to help develop an algorithm to convert the tx and ty values.
I modified the original document and manually converted the values for tx and ty in the matrices as per my above supposition (which may be wrong...), and the inverted the ty. The resulting document displays as I would expect for the most part. I have attached it.
There are some rectangles that are implemented as clipping paths in the pdf. The origin of these is at (90, 56.25). I have not been able to figure out where that value for the origin came from in my xhtml.
There are some rectangles that are implemented as clipping paths in the pdf. The origin of these is at (90, 56.25). I have not been able to figure out where that value for the origin came from in my xhtml.
We have fixed this issue now, and the fix will be available in the next release. The problem was that the translation offsets using in the matrix() function were scaled in points (72dpi) instead of pixels (96dpi) and the vertical offset was inverted.
Thank you. Do you know when this will be released? Is there any way I can get a "dev" release so I can close out my internal issue?
Sure, just email me (mikeday@yeslogic.com) and let me know which operating system you are running Prince on.
Looks good, thanks. Another related question: Are you going to support the various "browser flavors" of transform (ie -o-transform, -webkit-transform, -ms-transform, -moz-transform)?
Probably not, as our current CSS parser does not support identifiers that begin with a hyphen.
By the way, Prince 9 is now available, including the fix for matrix() in CSS transforms. Thanks again for letting us know! 