InDesign to HTML

[Leonardo_Studio]

Hi people

I'm trying to export a simple InDesign document to an HTML file for newsletter import. Somehow, when I do the export, the elements are all there but they appear one after another instant of overlapping as in my InDesign document.

How do I correct this ? I also notices that I don't have an HTML folder after the export (only a CSS and Images folder...)

Thanks !

[BobLevine · Accepted solution]

The only way to get good HTML out of inDesign with all of the page geometry intact is with Export HTML5 from InDesign with in5 - Home

[Leonardo_Studio]

Thanks for the quick answer, I was wondering if that option would work as easily as it shows, but I understand now that I need another plugin to make it work correctly.

[Pickory]

We have a free ( for now ), plugin. Originally designed to export to the Baker Framework, since development on that has stopped, our plugin is looking for a home.

Baker Export - Kerntiff Publishing Systems

P.

Mac CC 2018.

[Eugenio.NYC]

You can export HTML from InDesign and connect with a CSS, but you have to create the CSS style manually

not the best workflow

Regards

E

[JonathanArias]

if this newsletter is for an email blast, none of these will work as options since for email you need to work with tables with inline styles. and none of these things you are doing will have that.

you can run that HTML thru this to fix most of it however:

Premailer: pre-flight for HTML email

but... there are issues that some email programs will give you, particularly google and outlook.

[BobLevine]

Good point. If it’s for email, use Constant Contact or Mail Chimp.

[rayek.elfin]

BobLevine  wrote

The only way to get good HTML out of inDesign with all of the page geometry intact is with Export HTML5 from InDesign with in5 - Home

That is not entirely true: the free html script does a proper job too, and only needs a simple javascript fix to repair all the links.

Download the Export FXL HTML script here:

InDesign Scripts by Keith Gilbert

Install the plugin (see instructions sheet), save your work, and export your page(s).

If you need working links between pages, forget about that secondary script to add page links, and instead just open the idGeneratedScripts.js file in a text/code editor, and make this change:

function goToDestination(ref) {

var result = window.top.isPreviewFile(ref);

if(result.spread == -1 || result.pages == -1) {

window.top.handleExternalLink(ref);

}

else {

if(window.top.shouldNavigate(result)) {

window.location.href = ref;

}

}

}

replace with:

function goToDestination(ref) {

window.location.assign(ref);

}

That's it. Save, and you now have a working web output with links all correctly working between pages.

The only thing to be careful of is typefaces that may not transfer/convert properly due to licensing. In that case either switch to a different typeface, or right-mouse click the problematic object, and open the object export options: set it to rasterize container. The ppi depends on the documents' intent: if it is a web document, 72ppi or 144ppi will suffice, depending on whether you target retina screens or not.

No need to purchase a plugin for simple web export from InDesign.

PS the generated html is obviously pretty horrendous, and fixed layout. No responsive pages, of course. Can't help that. And as stated before in this thread by others, this output is utterly unsuitable for email newsletters.

[BobLevine]

Certainly depends on your needs.

[rayek.elfin]

Indeed, true that. Personally I would never use InDesign to create web pages in, but for prototyping and layout design (perhaps) or export FXL epubs for conversion to mobile apps with Cordova. The layout as shown by Leonardo_Studio would take at most 30 minutes to rebuild in Pinegrow. And be responsive and have proper clean human readable code.

But yes, depends on the situation and requirements.

[BobLevine]

I’ve been using in5 to build web apps. Results are terrific.

[rayek.elfin]

You got me curious now! Any examples online?

[BobLevine]

Nothing I can share, unfortunately.

[Pickory]

Too modest. Go on, show us.

[rayek.elfin]

I made a simple example using assets from an interactive adventure game book based on Pepper and Carrot which I am working on as a personal side project. Animated in InDesign, exported with the free Export FXL HTML script in InDesign, although I did optimize and convert all the images to webp format. Firefox and IE don't support this image format (yet: FF will get support soon, finally!).

The example doesn't include state objects, but all interactive content works fine when output this way. The second page has a simple environmental sound playing in the background.

Btw, I never allow InDesign to optimize assets for this kind of work (which does a terrible job both with resampling as well as file size) and I make sure InDesign uses my prepared intermediate assets instead. Then during the final stage I optimize the heck out of all the assets. The example images add up to a mere 392kb. I could have done even better, though, but I did not spend a lot of time on this example. For fixed layout epubs I use heavily optimized PNG and JPG files - all done with external free tools. (I believe in5 also uses various command line tools to optimize files better?)

Aside from custom image optimization, I added a bit of custom simple css to hide the frame overflow, and use a black background. The example took me 20 minutes to do in InDesign, and ten minutes for the image optimization, code changes and upload (the assets I already had).

The use of webp does mean this example should be viewed in either Chrome or Opera. Other browsers will display a white page :-).

html export from InDesign example link

It's a nice proof of concept, I think. InDesign is quite a good prototyping tool for this type of work too. Fast to test some concepts and preview in the epub viewer. I just wish Adobe would extend the interactive features - they haven't touched them in years now. A simple animation timeline would be nice, for example.

While it is possible and actually quite simple to use this output as a basis for app conversion to desktop and mobile devices using a tool like Cordova (or even Photogap), my actual project is done using Godot Engine. InDesign is fine for simple interactive books, but lacks variables and conditional logic which I need.

[BobLevine]

Agree 100% on the interactive features. They’ve gotten no attention since many of the were introduced in CS5. MSOs in particular are a complete pain to work with.