Log in / Register

Forum › How do I...?

Rotating images with CSS transform

Jellby
I have some images that I'd like to rotate when creating a PDF. I can do that with CSS transform, but it results in the image incorrectly positioned, sometimes out of the page. Am I doing something wrong? Is this a bug/limitation?

A sample code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ops="http://www.idpf.org/2007/ops" xml:lang="en">
<head>
  <title>Testdoc</title>
  <style type="text/css">
  div.rotated { transform: rotate(-90deg); }
  div.image { height: 200px; width: 500px; border: solid 1px black; }
  </style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet orci 
eros. In hac habitasse platea dictumst. In hac habitasse platea dictumst.
Vivamus fringilla metus ac lacus rutrum dictum. Aliquam erat volutpat. Nunc
placerat, eros et fermentum semper, dui mauris aliquet est, posuere egestas
felis felis quis erat. Proin vel risus eget tortor elementum rhoncus.</p>

<div class="rotated">
<div class="image">
A rotated div.
</div>
</div>

</body>
</html>


In the PDF (Prince 9.0 rev 2) the frame from the <div class="image"> overlaps the text paragraph above,
mikeday
This is coming from the transform origin, which you can set using the transform-origin property. Its default value is "50% 50%", which depends upon the width of the containing block, which will differ as a browser window is typically wider than a sheet of paper.

Try specifying "transform-origin: 0 0" to rotate around the top left corner of the block, or "500px 200px" to rotate around the bottom right corner, or "250px 100px" to rotate around the center.
Jellby
Thanks, that changes things a bit, but still the main problem is the surrounding elements do not "see" the rotated element, but just the original one. I guess that obeys to the current working draft: "the transform property does not affect the flow of the content surrounding the transformed element".

Is there any other way to make the final PDF look as if the image had been rotated in a picture editing software, without actually modifying the image file? (I think it can be done if I wrap the image in a SVG element and apply transforms inside the SVG.)

Edited by Jellby

mikeday
How about absolutely positioning the image first, to take it out of the normal flow?
Jellby
But I want it in the normal flow. And I may not know the image size (or, at least, I don't want to put that information in the HTML/CSS code). I'd like the method to work with something as simple as:

<p>Some text</p>
<div class="center"><img src="..." alt=""/></div>
<p>Some more text</p>

mikeday
That does seem tricky to achieve without knowing the image size. In the future you could use JavaScript to extract the size, but at the moment we don't have an API for that.
Bayanna
Hi Mike,

I would like to do the same as Jellby; the first post under this subject and it seems to be not working. When I tried adding the below properties to the transformed div this results to show center for vertically and not for horizontally with the images shown below.

.plate-rw {
transform: rotate(-90deg);
transform-origin: center center; Or transform-origin: 50%, 50%;
}

For e.g; as shown in the attached file. Do you have any idea how to achieve this?

Regards,
Bayanna
  1. image on the page is not sit as center-center.png‎ 166.0 kB
mikeday
You could rotate the whole page body and make it a landscape page:
@page { prince-rotate-body: landscape }

Alternatively, you will need to add a translate to the transform to push it down the page. This will require you to know the width of box so you know how far to push it down.
Bayanna
Hi,

I have around 10-12 images in my document and each of the image is in different width and heights. My requirement is that all these images should sit on the page center for both the cases(horizontal and vertical) through CSS.

similar to the above even I do not do the image rotate if the image occurs on per page, it should sit on center for both the cases.

Is it possible using Prince?

Thanks for your any suggestion in an advance.

Regards,
Bayanna
mikeday
You could make a landscape page, then make a table with a single cell that is exactly the size of the page, put the image in it and use text-align / vertical-align center.

It's a bit complicated, because CSS is not good at vertical centering, requiring the table cell trick.
Bayanna
Ok, I will try the above. Thanks mike.