A “feature” of the PDF file format is that it will generally let you do whatever you like to create your document regardless or how much, or how little sense it makes. Whether that be positioning with limitless accuracy, or using 9000 complex clipped shapes to shade a giraffe, Adobe’s PDF reader handles this with ease.
Today I am dealing with PDF page containing a shape that is disappearing when we convert our PDF file into HTML5.
The shape in question is a vertical line that is being output as an image for the HTML5 page. The image gets output correctly, and it is properly linked in the HTML file, so why do we not see it?
On closer inspection, we are dealing with a shape 1px wide starting at (236,-13479) and going to (236,49563). Our page is only 1053px tall!
This leaves us with a shape that is 1px by 63042px, with only 1.67% of it actually seen!
I am currently using Firefox, so decide to give the file a try in Chrome. Still no luck. Oddly enough, when I try with Opera, Safari and Internet Explorer, all three browsers show the file and the image correctly!
After some experimentation, I have discovered that Firefox and Chrome only like images that are up to 32767px wide or tall (that is 2^15 – 1 for those wondering).
Any larger, and they will not display the image. Is this a limitation in Firefox & Chrome, or do they know something that the others don’t?
The solution for our PDF to HTML5 Conversion is simple – crop the image to the width and height of our page and adjust the position to match.
Are you a Developer working with PDF files?
Our developers guide contains a large number of technical posts to help you understand the PDF file Format.
Do you need to solve any of these problems?
| Display PDF documents in a Web app |
| Use PDF Forms in a web browser |
| Convert PDF Documents to an image |
| Work with PDF Documents in Java |
