Update: JPDF2HTM5 has been rebranded as BuildVu and JPDFForms has been rebranded as FormVu

Free.Aero PDF to HTML5 Digital Magazines with JPDF2HTML5

In a change from the usual blog posts, today we have a guest blog post from Sascha Burkhardt from Free.aero and Voler.info a Worldwide Paragliding and Paramotoring Magazine available free online for everyone.

www.free.aero and www.voler.info is an international digital magazine, specializing in outdoor flying sports (paragliding and powered paragliding). We started the digital magazine in 2011. As we came from the “Print” world, for us it was important to keep a layout very similar to a printed magazine, even if we publish exclusively in digital format. The magazine is free for readers, so we don’t need payment gateways.

Despite of what some people in the publishing industry say, we think that a digital magazine should not be published in a responsive web page like format or any other typical web-format.

Several reasons for that:

  • We know that readers are coming from a paper magazine and still want a paper-like format: a page and typical layout begins very classical on the top left and finishes at the bottom right down. If the reader sees three pages, he knows he will read it in about 5-10 minutes. This is the one reason why various publishing platforms keep formats close to “flip books“, sometimes even simulating the sound of flipping pages. (This is too old fashioned in my opinion)
  • A strict, non responsive layout is the only way to guide the reader in the articles in a way decided by the choices of the editor, on every device. The possibilities of journalistic storytelling are much wider than with responsive designs that change with the type of the device.
  • Placing ads on strategic places is much more easier on a fixed layout than on a responsive design.

Since 2009, we worked already for another magazine company and a Flipbook-Publishing solution like Calameo, but as these formats are not universal, but limited to their specific platforms with a more restricted audience and often have even been based on Adobe Flash (not compatible with iPhone/iPad),  we decided to publish in a more universal PDF-format, either on the web, either on our own iOS-Apps and Android-Apps. This is what we did for several years.

The problem is that readers have (depending on the browser) to load the whole magazine before they can read it. As we work at least at 150 DPI (often even 300 DPI for perfect photo quality even when zoomed), we have 20-30 MB per magazine, this can take quite long time to load, and readers and advertisers cannot deep-link to specific pages in order to share them.

Capture d’écran 2016-02-13 à 07.20.29

Digital Magazine with IN5 and Indesign

We continued looking for a possibility to publish the magazine in HTML with a solution that should  perfectly respect the existing layout that we produce with Adobe Indesign. We tried converter-plugins producing HTML-Output, as IN5 from Ajarproductions, but with the actual versions, the results are still too far from the original layout as it would be in the PDF.

Finally, we found JPDF2HTML5 a PDF to HTML5 converter from IDR Solutions, and started a workflow Indesign -> PDF -> HTML. It was great to see that it is possible to get a result 99% close to the original layout. All our fonts are correctly converted as web  fonts, and the positioning is in most cases perfect.

This is also the case for more complex layout elements, as drop caps in unusual fonts, and in tables. Tables are mostly correctly converted, with a precise positioning. This was a very positive discovery. The actual IN5-Plugin for Indesign for example does not convert tables to HTML, but to images in order to avoid positioning problems. This means: no select-able text any more, no Hyperlinks anymore. However, JPDF2HTML5 allows us to publish HTML with real tables in it.

If necessary, for example in order to replace a picture by an  interactive element as a video playing in an iframe, the converted HTML is very easy to modify with Dreamweaver, as every page has one HTML-document and one folder with the pictures, both named with the number of the page.

Free.aero /Voler.info in the IDRViewer

Free.aero /Voler.info in the IDRViewer

The IDRViewer included as part of JPDF2HTML5 is one of the best viewers that we ever tried. It is clear, neat, fast, intuitive. We applied only two little changes: “Continuous” is the default viewer method when starting, and on desktop devices, the thumbnail-view on the left is active. We also change, in some cases, the background-PNG.

You can see an example of our final conversion here.

For more guest blog articles be sure to check out:

PDF to HTML5 – Thriving in a Transitional Phase
LabBest on working with PDF files in Java,
The Open Journal Project and PDF to HTML5: Removing the barriers,
PDF and PDF2HTML5: The Best of Both Worlds for Teachers,
JPedal thé perfect match for Qtree Solutions
JPedal used as a Smart Software in Retina.

Is there is something you’d like to blog about connected to Java, HTML5, SVG, JavaFX or PDF files? Any tips, tricks or recommendations? contact us and we would be happy to feature you in our new ‘Guest Blogger’ series.

Related Posts:

The following two tabs change content below.
A Guest blogger is a special blogger who wouldn’t normally post on the blog but provides a valid and interesting insight into a certain aspect of a certain field. These are their stories!
guest

About Guest Blogger

A Guest blogger is a special blogger who wouldn’t normally post on the blog but provides a valid and interesting insight into a certain aspect of a certain field.

These are their stories!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>