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.
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.
Do not add the following DOM leveo 0 and DOM leve 2 event handlers to content meant to display the navigation bar when tapped:
Tto use the Javascript addEventListener method for DOM level 2 JavaScript events, do one of the following:
<script type="text/javascript" src="../_AdobeViewer_HTMLResources/AdobeViewer.js"></script>
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.
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.
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:
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.
