• Convert PDF to flash
• Convert PDF to HTML4
• Convert PDF to HTML5
• Publish large PDF documents

How to convert PDF to HTML5

Converting PDF content to HTML5 for flipbooks or otherwise can be done in a number of ways. This tutorial will explain how to peek under the hood in order to understand how some providers try to convert your content.

The 'lets fake it until we make it' approach

Some publishers claim to convert your content to HTML5 but they're not actually doing this, instead they're just bitmapping your pages. What does this mean? It means that each page in your PDF content will be converted into a JPEG or PNG image in high resolution in order to be shown on the web site. You'll see if this is what they do if you try to zoom in deep enough into a text. Text tends to start to blur eventually with images and text blending together in a bit of a pixelated mess (hello 1998!). Not only does it look bad, it also loads slowly.

How do you ultimately know if this is what's going on? Try zooming deep into a page with your browser and check if the text stays sharp. If you're not afraid of HTML, then peek into the source code of the publication and you should see references to the image for each page. Open the page in a new tab and you'll see if text has been rendered together with images or not.

The middle way - The Canvas

HTML5 offers a number of ways of rendering text and images and while most web pages render images and HTML5 elements as objects, you can also use a canvas to do this which is more similar to what a painter would do if they were drawing a picture on a canvas. Text and images are drawn on the canvas, in a resolution which suits the viewer or zoom level so that they always appear sharp. The images and texts are thus initially separated (before drawn) but as the page is shown, these objects are then blended together. So what's good about this approach?

It can be combined with various 3D rendering methods

The Zine template, which can be seen on the picture, uses this approach when you use FlowPaper to convert your documents into HTML5, resulting in sharp flipbooks and is able to render the publication with 3D effects in a capturing manner.

All the way - Real HTML5

Some conversion tools such as FlowPaper Elements, takes the conversion all the way and converts the text and fonts inside a PDF into real HTML5. It also converts the texts inside the PDF document into real HTML5 elements with their corresponding headers. Why is this a good option sometimes? Its good of three main reasons:

  $('#documentViewer').FlowPaperViewer(
  { config : {
    PDFFile : 'pdf/Paper_[*,2].pdf',
    JSONFile : 'pdf/Paper.pdf_{page}.js',
    RenderingOrder : 'html5'
  }});