• Itsy Bitsy Online
• Itsy Bitsy Store

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)

Shop for itsy bitsy baby online at Target. Choose from contactless Same Day Delivery, Drive Up and more. Very small; tiny. Syn: bitty, bittie, teensy, teentsy, teeny, wee, weeny, weensy, teensy-weensy. WordNet 1.5 + PJC It was an itsy-bitsy teeny-weeny yellow polka-dot bikini that she wore for the first time today. We now offer an entire list of available books for you the reader to sign up for plus a drawing for 2 weekly winners! All of the genre links to books available are below, each.

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.

Using the embeded tag

Itsy Bitsy Online

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

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:

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.

Itsy Bitsy Store

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!