-
Notifications
You must be signed in to change notification settings - Fork 357
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
#38 Fix css3 transform #157
Conversation
Implemented skew and scale correctly. The Java2D output of the transform-sample now nearly matches the display of the transform-sample in a browser. Only the "scale(2) rotate(180deg) case is still wrong. The PDF output is still totally off.
- Only generate the common transforms once. - Get the device specific rotation flip factor from the OutputDevice. - setAlpha() is not used anywhere
Translate to translation-origin at start, and translate back when finished. Now in Java 2D all samples work correctly.
the second parameter is 0.
I see you're still adding commits so I'll hold off on merging. I did however find out why my old test cases were working in PDF but not your examples. It turns out the body/page margin was breaking things. Try the following in the sandbox and you get correct results. As soon as a body/page margin is added however, it breaks. <html>
<head>
<style>
@page { margin: 0; }
body { margin: 0; }
div.block > div {
border: 1px solid blue;
display: inline-block;
padding:5px;
}
div.block {
width: 100%;
border: 1px solid green;
margin-bottom:3cm;
}
</style>
</head>
<body>
<h1>Sample to demonstrate CSS Transform</h1>
<div class="block">
<div> 0</div>
<div style="transform:rotate(90deg)"> 90</div>
<div style="transform:rotate(180deg)"> 180</div>
<div style="transform:rotate(270deg)"> 270</div>
<div style="transform:rotate(45deg)"> 45</div>
<div style="transform:rotate(135deg)"> 135</div>
</div>
</body>
</html> The other problem is the box collector is not transform aware. The box collector is responsible for collecting lists of boxes for the current page. So if a rotate, for example, causes a box to move over a previous or following page, it won't show on the extra page. I did have a try at fixing the box collector without much luck a couple of weeks ago. But thinking about it, I think we will need an absolute transform that is in effect for every layer to get the box collector to work. |
By the way, feel free to delete/move Java2D related output device code out of the core. |
@danfickle I had some spare minutes, so I tried around a little bit. But I will go to dinner now and also won't have time till evening to look future (here it is 11:25 AM). So fill free to work in this branch. I wont touch it till evening. |
positions to fix the transform.
@danfickle Thanks for the hint. I fixed it for the PDF case. Did not test if transform works correctly in the margin area. But for my use case thats enough. The detection if the margin must be considered is a little bit dirty at the moment, as I use the flip factor to detect if this is a PDF output. But at least now it works for both the PDF and the PNG output case. |
@danfickle I'm going to do some future work in this branch. So you may want to wait with the merge. Especially I want to
|
@danfickle And I think that is fully ok for a transformed element to be not correctly split over multiple pages. I don't think someone would really want this. A nice looking report should not have some "cut in the middle by page break" elements in it... This would look broken IMHO. |
only top, top-left-corner and left works.
@danfickle I was not able to do as much today as I hoped. Would you mind merging the current state? Top/Left/TopLeft-Corner margins work correctly with transforms, the other margins don't work yet with transforms. |
The current CSS3 transform support is still broken. In this branch I was ably to fix it mostly for Java2D. But nothing has changed with the PDF output.
I've created a sample file to test this. The sample file renders this in Safari:
This way using Java2D:
You may note that in the second line (scaled and rotated) the resulting div for 180 degree and 45 degree has some strange offset, but everything else is fine.
But it is still broken when generating a PDF:
@danfickle I tried around all different things, but I currently have no idea what offset is applied wrong here for the PDF output. Could you please take a look into that?
I did add some generic parameters to some lists. I hope you don't mind.
Thanks.
P.S.: Can we just remove the old Java2DOutputDevice stuff? i.e. com.openhtmltopdf.swing.Java2DRenderer and com.openhtmltopdf.swing.Java2DOutputDevice?