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.
Are you viewing the right article?
This article refers to Digital Publishing Suite. For the Digital Publishing Solution (DPS 2015) article, see Create HTML articles for DPS 2015.
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 might be imported as a dual-orientation article. If you try to preview or publish the single-orientation folio, an error message appears.
Choose the "Import a Single Article" option, click the Location folder icon , and specify the HTML folder.
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.
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. This option is available only for iOS apps.
For examples of video behavior, see the HTML Examples issue of the free DPS Tips app (English only).
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>