You can import HTML-based articles into a folio so that it can be displayed in the viewer as an article. One advantage of HTML articles is a much smaller file size that is better suited for weekly publications and simple, text-intensive articles. HTML articles can also include interactivity not available in the Folio Overlays panel.
For information about using Adobe Edge to create HTML for DPS, see Raghu Thricovil’s article Enhance your DPS Folios with HTML animations using Adobe Edge.
If you are importing the HTML article into a single-orientation folder, add an _h or _v suffix to the .html file, such as index_h.html.
If you don’t add a suffix, the article is imported as a dual-orientation article. If you try to preview or publish the single-orientation folio, an error message appears.
You can create a single HTML file that works for both portrait and landscape orientations, or you can create separate HTML files for the two orientations. To use separate HTML files for portrait and landscape, add the _v and _h suffixes to the end of the HTML filenames, such as “index_h.html.” If you’re creating a single-orientation folio, you need only one HTML file. Include the _h or _v suffix for the HTML file in a single-orientation folio.
Dynamic HTML (DHTML) files currently are not fully supported.
For file structure, one method is to place all associated graphics and scripts for the HTML file in the individual article folders. Another option is to place associated graphics and scripts for the entire folio in an HTMLResources.zip file. You import the HTMLResources.zip file into the folio from the Folio Builder panel or the Folio Producer on the web. See Import HTMLResources folder.
Example of an HTMLResources folder
Make sure that you use relative paths in your HTML code. If you’re linking to an image on the same level as the HTML file, use this approach:
If you’re linking to an image in the HTMLResources folder, use this approach:
For information on creating hyperlinks to and from HTML articles, see Create navto hyperlinks for HTML articles.
For guidance and requirements on creating HTML articles for Android Viewers, see Create HTML articles for Android Viewers.
For information about creating articles using HTML5, see Johannes Henseler’s article A single file HTML5 framework.
For information about using CreateJS to create HTML5 using Flash Pro, see Toolkit for CreateJS.
For information on which fonts are available in HTML articles and Web View overlays on the iPad, see www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/.
Rufus Deuchler created a video tutorial about using Adobe Muse to create HTML content for digital publications.
For InDesign articles, the viewer automatically generates the thumbnails that appear when you drag the scrubber. However, generating thumbnails for HTML articles takes more time, sometimes resulting in poorly rendered thumbnails. To improve thumbnail performance in HTML articles, you can manually add image files to the HTML article folders.
Create png files that are named “scrubberthumbnail_h.png” and "scrubberthumbnail_v.png” (you can also use _l and _p suffixes). Add these files to the HTML article folder. There is no size restriction for these images, but note that they are scaled down proportionally to a height of 166 pixels. As a point of reference, when thumbnails are generated, landscape thumbnails are 221x166 pixels, and portrait thumbnails are 125x166 pixels.
When you create a single-orientation HTML article with video links, rotating the device can cause the playing video to rotate as well. In addition, when the video is finished playing, the in-app browser playing the video can be dismissed. To enable this behavior, use a “videofile://” prefix in your HTML video link.
For examples of video behavior, see the Effects issue of the free DPS Tips app.
Standard video behavior
With this example, the video plays within an in-app browser and does not rotate in a single-orientation folio.<a href="Links/video.mp4">Play Video</a>
or<a href="../HTMLResources/videos/video.mp4">Play Video</a>
Enhanced video behavior
With this example, the video rotates properly in a single-orientation folio and returns to the article when the video finishes.<a href="videfile://Links/video.mp4">Play Video</a>
or<a href="videofile://../HTMLResources/videos/video.mp4">Play Video</a>
or<a onclick="window.playFullscreenVideo('../HTMLResources/videos/video.mp4');">Play Video</a>