Loading a PDF file in Safari

How to load a PDF file in a webpage is a rather old and well-debated topic, as this StackOverflow question proves. So far, there are only a couple solutions popularized (I will only summarize them quickly because this post is not about them)

Using a third party service

Either a javascript library, like PDF.JS, developed by Mozilla, or using Google's PDF viewer. In a way, it's a simple solution and pretty much cross-browser but it's not so great because you have to depend on a 3rd party service.

Using the object tag

A straight forward approach, using only plain HTML, something also customizable via PDF options added to the PDF's source, you can find more info about this here.

<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" id="pdf_content">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>

Using the embeded tag

Another simple approach, pretty much like the object method. This one supports Adobe's pdf parameters as well.

<embed type="application/pdf" src="the.pdf" width="500" height="375">

So, you could say you have these 3 main methods. They are pretty great and could fill the needs of almost everyone. However, they didn't do the trick for me.

The following method works only for Safari, on either the Mac OS, or the iOS. The Mac part is so-and-so, since its market share is tiny, but its beauty lies with iOS. What is this method? It is...

Using a PDF file as an img object's source

There is a catch here though. This is a rather particular case and works only for one purpose: clarity.
We had to zoom some images with text using a cross-browser/device approach. The standard approach that used CSS3's transform: scale worked pretty good on desktops, for every major browser that supported it. On the iPad and particularly the iPhone, not so much.

It's a know fact that the hardware accelerated CSS transformations treat the images or the HTML elements as textures and this makes the text blurry on scaling. And using larger and cleared images was not an option. You can use a larger image just to a point in a mobile app since you have to consider the traffic induced by larger images and the download time.

By using single-paged PDF files as images, even though the image itself would still remain blurry after a certain scale, the text will remain clear and very, very readable!

And using it is just as simple as using a regular image:

<img src="mypdf.pdf">

And the amazing part is that you can set the source of a javascript image object as a pdf just as well, and then draw it on a canvas, if this suits your purpose.

Of course, there is a catch with the zooming too, but I will speak about this with another occasion, providing some samples too.

Until then, if you need a quick solution to display a single-paged pdf file on an Apple device, well, it's just as easy as using an image!