Log in / Register

Forum › Bugs

Rotated images have jagged edges

tomprogramming
With the following HTML:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style> 
@page { size: 8.5in 11in; margin: 0; padding: 0; border: 0; } 
img {  prince-image-magic: jpeg-quality(94%); } 
</style>
<div style="position:absolute; left:20%; top:20%;">
<img src=".\Tulips.jpg" style="width:400px; -webkit-transform:rotate(10deg); transform:rotate(10deg)" />
</div>


The resulting image comes out rotated, but with jagged edges. These do not appear in any major browser, but the PDFs from prince seem to suffer from this.

Is there any way to get around this with CSS?


(The image in question is the windows sample image, just moved to the relative directory of the HTML file)
  1. test.html‎ 0.4 kB
  2. test.pdf‎ 210.0 kB
mikeday
Which PDF viewer are you using? Can you attach a screenshot? Also, is it necessary to recompress the JPEG at 94% quality?
tomprogramming
Both Google Chrome and Adobe Reader XI show the image as jagged-edged.

I've removed the jpeg compression for this specific test, but our application allows users to use some pretty high-res images, but we need to recompress to keep file sizes down.
  1. pdf_jagged_adobe.PNG‎ 277.0 kB
  2. pdf_jagged_chrome.PNG‎ 348.7 kB
tomprogramming
It does appear that printing the PDF reveals no jagged edges. Doing some more testing to see if there is a pattern of viewer that has this issue.