Skip to content
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

Merged
merged 13 commits into from
Dec 18, 2017
Merged

Conversation

rototor
Copy link
Contributor

@rototor rototor commented Dec 14, 2017

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:

image

This way using Java2D:
image
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:
image

@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?

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.
@danfickle
Copy link
Owner

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.

@danfickle
Copy link
Owner

By the way, feel free to delete/move Java2D related output device code out of the core.

@rototor
Copy link
Contributor Author

rototor commented Dec 16, 2017

@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.

@rototor
Copy link
Contributor Author

rototor commented Dec 16, 2017

@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.

@rototor
Copy link
Contributor Author

rototor commented Dec 17, 2017

@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

  • cleanup the "flip" flag.
  • get transform working in the page borders.
  • maybe even get my hands dirty with translate() - depending how much time I have later today.

@rototor
Copy link
Contributor Author

rototor commented Dec 17, 2017

@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.

@rototor
Copy link
Contributor Author

rototor commented Dec 17, 2017

@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.

@danfickle danfickle merged commit 3d73f15 into danfickle:open-dev-v1 Dec 18, 2017
@rototor rototor deleted the fix-css3-transform branch December 19, 2017 10:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants