When you use the Digital Publishing Suite to create folios, you can create articles based on either InDesign documents or HTML files. For basic information on creating HTML articles for use in the Digital Publishing Suite, see Using HTML.
When you create HTML articles for Android-based Viewers, note the following instructions.
Guidance and requirements
HTML Meta tag
In a previous release, the user guide included instructions to put a meta tag in all HTML files so they would be scaled properly. This meta tag is no longer required; remove it from HTML files. The custom Viewer now contains a JavaScript that scales HTML content properly. If your HTML file requires a meta tag for a different reason, remove the "target-densitydpi" and "user-scalable=no" parameters. If either of these parameters appear in the meta tag, the HTML stacks do not scale properly when rendered on tablet devices.
JavaScript requirements for AIR Viewers
Do not add the following DOM leveo 0 and DOM leve 2 event handlers to content meant to display the navigation bar when tapped:
- onmouseup (DOM level 0)
- onmousedown (DOM level 0)
- ondblclick (DOM level 0)
- onclick (DOM level 0)
- mouseup (DOM leve 2)
- mousedown (DOM leve 2)
- mousemove (DOM leve 2)
- mouseclick (DOM leve 2)
- touchstar (DOM leve 2)
- touchmove (DOM leve 2)
- touchend (DOM leve 2)
Tto use the Javascript addEventListener method for DOM level 2 JavaScript events, do one of the following:
- Include a relative reference to the AdobeViewer.js script in the <head> block, before any other scripts in the head tag:
<script type="text/javascript" src="../_AdobeViewer_HTMLResources/AdobeViewer.js"></script>
- Move any addEventListener calls out of your onload() or $.ready() event handlers and into the custom Adobe window.onAppear() event handler.
- Use only DOM Level 0 events, such as onclick=””.
Embed fonts
Some iPad publications such as The New Yorker use fonts that are built in to the viewer. For Android devices, embed the fonts using CSS. To embed fonts using CSS, change the CSS reference from local to url, as follows.
Change from:
src:local("NYIrvinEM");
To the following:
src:url("../fonts/NYIrvEM.otf");
In addition, copy all fonts to the HTMLResources/fonts folder. Only OpenType fonts are supported.
Target mobile devices of different sizes
If you use the same 1024 x 768 size for Android devices that you use for the iPad, the final folio appears letterboxed on the Android device. This solution isn't good long term, because the body text can be too small to read on some devices such as the Galaxy Tab.
If possible, design HTML stacks to be more fluid to account for different screen sizes. For example, avoid setting margins that have a fixed pixel width.
If you target the 1024 x 600 resolution screen size, consider creating a second set of assets that references a CSS designed specifically for 1024 x 600 devices. Therefore, you can take advantage of the entire viewable area. It's also necessary to resize InDesign articles for the 1024 x 600 format.
Dynamically resize HTML image galleries
To support dynamic resizing of HTML image galleries for smaller devices such as the Galaxy Tab, include the following javascript snippet:
var ORIGINAL_CONTENT_WIDTH_PORTRAIT = 768.0;
var ORIGINAL_CONTENT_HEIGHT_PORTRAIT = 980.0;
var ORIGINAL_CONTENT_WIDTH_LANDSCAPE = 1024.0;
var ORIGINAL_CONTENT_HEIGHT_LANDSCAPE = 740.0;
var CONTENT_SCALE_MODE = "none";
function adjustScale( scaleLevel ) {
var metaId = "scale-adobedmp";
var meta = document.getElementById(metaId);
if( !meta )
{
meta = document.createElement('meta');
var head = document.head;
head.appendChild(meta);
meta.setAttribute("id", metaId);
// be sure to set the name first, because only 'content' attribute triggers a reprocess
meta.setAttribute("name", "viewport");
}
meta.setAttribute("content", "initial-scale=" + scaleLevel + "; minimum-scale=" + scaleLevel + "; maximum-scale=" + scaleLevel + "; width=device-width; user-scalable=1");
// Force re-layout. Sends a sync message a short while after this has occurred.
document.body.style.display = "none";
setTimeout(function(){document.body.style.display = "block"; }, 0);
};
function scaleContentToViewport() {
if (typeof adobe == 'undefined' || typeof adobe.dps == 'undefined' || typeof adobe.dps.utils == 'undefined')
{
return;
}
adobe.dps.utils.getDimensions(function(data)
{
var isPortrait = data.width <= data.height;
if ( (isPortrait && CONTENT_SCALE_MODE == "portrait") || (!isPortrait && CONTENT_SCALE_MODE == "landscape") )
{
return;
}
var originalContentWidth = 0.0;
var originalContentHeight = 0.0;
var curWidth = data.width;
var curHeight = data.height;
if (isPortrait)
{
CONTENT_SCALE_MODE = "portrait";
originalContentWidth = ORIGINAL_CONTENT_WIDTH_PORTRAIT;
originalContentHeight = ORIGINAL_CONTENT_HEIGHT_PORTRAIT;
}
else
{
CONTENT_SCALE_MODE = "landscape";
originalContentWidth = ORIGINAL_CONTENT_WIDTH_LANDSCAPE;
originalContentHeight = ORIGINAL_CONTENT_HEIGHT_LANDSCAPE;
}
if (curWidth < originalContentWidth)
{
adjustScale(curWidth/originalContentWidth);
}
else if (curHeight < originalContentHeight)
{
adjustScale(curHeight/originalContentHeight);
}
else
{
adjustScale(1.0);
}
});
};
Use the following method to call this function:
adjustScale(window.innerWidth / originalContentWidth);
The function is called under any of the following circumstances:
- Only scale when window.innerWidth is less than the original content width to prevent upscaling.
- If the content is orientation-independent, call the function in the onLoad or the $.ready block.
- If the content is orientation-dependent, call the function when the orientation changed event is dispatched.
Playing video and audio
When you want to display audio or video in your HTML article, turn off preload to allow the page to load correctly. Example:
Incorrect: <audio id="congratulationSound" preload="auto" autobuffer>
Correct: <audio id="congratulationSound" preload="none" autobuffer>
In addition, the "videofile://" prefix for playing videos is not yet supported in Android viewers.
