in5™ Help Documentation
© 2012-2017 Ajar Productions. All rights reserved.
in5 converts Abobe® InDesign® layouts into an open format known as HTML5. Because the output is in an open format, the files that are produced are yours to adjust and post wherever you like. There are no restrictions or monthy fees required to continue using your files.
Who can use in5?
in5 is made with the designer in mind. The HTML and (reflowable) EPUB exporters built into InDesign do not maintain the look of the InDesign layout. in5 creates an exported product with a fidelity similar to the InDesign Flash (SWF) or PDF export, but in an open format that can be viewed in any modern browser, including on mobile devices.
What do I do with the files that in5 generates?
The output created by in5 is essentially a website. An index.html file and an assets folder are generated when in5 is run. If you’d like to post your site to the web, all you have to do is copy the index.html file and the assets folder to a web directory (using an FTP client such as FileZilla).
However, a website is not the only potential destination for in5 files. The files can packaged easily into an app using a product like Adobe® PhoneGap® (or Xcode with the Baker Framework). The files can also be altered to work with ebook formats like EPUB.
in5 can directly export to the Baker Framework (http://bakerframework.com) and the Liquid State Publishing System (http://liquid-state.com), as well as iPad and iPhone Web Apps, with no modification required!
The in5 exporter provides several options in the export dialog box, but there are also several features underneath the hood that help create solid output. This section of the documentation covers some of the features that are not readily visible on the surface.
The basic unit of measurement on the web is the pixel, but InDesign did not support pixels until CS5. In this case, in5 treats points as pixels. When a document uses another measurement format (such as picas, inches, millimeters, etc.), in5 automatically converts those units to pixels. Thus, there is no need to convert a document to another format before using in5.
Colors, Swatches, and Tints are converted to RGB hex values, no matter which type of color space is being used (CMYK, RGB, or Lab). Tint values are calculated using the existing color space, so the hex color closely matches the look of the color in InDesign.
Alt text, an important component in accessibility on the web, is collected from the document in many forms. Button names from the Buttons panel are used, script labels are used (when available), and Alt text from the Object Export Options is used (when available). When textframes are rendered as images and no Alt text is provided using the options listed above, in5 will use text from the textframe as Alt text.
All of the media—movies, sounds, and Flash SWFs—automatically include “fallbacks” when exported. Fallbacks allow different versions of content to be displayed depending on the browser capabilities available. For movies, InDesign supports mp4 movies formatted with H.264 encoding, but not all browsers do. So when you include a link to a local mp4 movie, in5 also searches in the same folder for webm and ogv movies with the same name (in order to support additional browsers). In browsers that do not support one of the available formats (or the HTML5 <video> tag), but do support the Flash player, the Flash player is used to play back the video. Similar fallbacks are available for audio as well. When a SWF is placed in InDesign, but the browser does not support Flash, in5 will display the corresponding poster image (choosen from the InDesign Media panel).
in5 supports native animation and sequenced animation created using the Animation and Timing Panels, respectively. The animation created with InDesign is translated into CSS in the output. Many of the default presets found in the Animation panel are supported by in5. However, presets that rely on blur effects (like Smoke) or complex motion paths (like Wave) cannot be effectively translated into CSS and thus are not supported by in5. For a list of browsers that support CSS animation, visit http://caniuse.com/#feat=css-animation.
As of in5 version 2.3, there is also an option available in the InDesign Object menu, as well as the right-click menu, that lets you convert a selection into a Web Overlay for Adobe DPS. This means you can use in5 to include otherwise unsupported animation in DPS projects.
InDesign CS6 allows pasting of HTML code into InDesign (such as code copied from YouTube, Vimeo, or Google Maps). in5 automatically reads and includes this embedded HTML. As of version 1.4.0, in5 also adds this functionality to CS4, CS5 and CS5.5.
InDesign also offers many ways to add links to a document: with buttons, using the Hyperlinks panel, or by creating a Table of Contents. All of these linking methods are supported by in5.
Button (Rollover and Click) States are also supported. The multiple states are rendered as a single image to reduce calls to the server, as well as file size. The states are rendered in the output by shifting the background position of the image using CSS. The following Folio Overlays are also supported: Scrolling Frames, Slideshows, Web Content (for remote URLs and local HTML files), and the Pan and Zoom Overlay. Hyperlinks and Media are supported through their respective panels.
Form elements and most actions the can be applied within the Buttons and Forms panel are supported by in5. For an updated listed of all InDesign interactive features supported by in5, see http://ajarproductions.com/pages/products/in5/features.php.
Double-click the installer that matches your operating system (Windows or Mac) and follow the onscreen instructions. Once installed, restart InDesign if it is open.
How to Run in5
To export an InDesign document to HTML5, choose File > Export HTML5 with in5, which will open the in5 export dialog. Click OK to export the document (the options inside the dialog are detailed in the paragraphs that follow).
In addition to the export option, in5 adds a Mark as Thumbnail option to the Object menu and the context-click (aka right-click) menu. Thumbnails can be used to create portfolios or photo galleries. When an image that is imported into InDesign, then scaled down and cropped by adjusting the object’s frame boundaries, is marked as a Thumnail, in5 will create a link to the original (uncropped, unscaled) image that was initially imported into InDesign. When the Thumbnail image is clicked or touched in the HTML output it will link to the larger image. When an image that has been marked as a Thumbnail has been selected, the menu item will appear with a checkmark. Selecting Mark as Thumbnail will unmark the object, and the object will no longer be treated as a thumbnail (and thus the checkmark will no longer appear next to the menu item).
The in5 Export Dialog
The export dialog allows for customization of the HTML output.
The Basic section includes settings that will be relevant to nearly every document that is exported using in5.
The title text will appear at the top of the web browser and will appear in search engine results. This field will default to the title within the InDesign document’s metadata (if available), or to the name of the document (minus the .indd file extension).
The destination folder determines the location where the HTML assets will be exported. By default, the destination folder is set to a folder named html5_output that resides in the same folder with the current InDesign document.
The export range allows you to choose All Pages, a single alternate layout (if any are present), or a Custom range. When Custom is selected, a text input appears. This field supports the common InDesign print/export conventions. For alternate layouts, type the layout name followed by a colon, and then the page number(s) e.g., “iPad H:1”. If using section numbering, type the section prefix in front of the number(s), e.g. “a1”. You can also type a plus sign (+) followed by the absolute page number. In addition to these conventions, you can also type “last” or “end” to represent the last page in the document, e.g. “+2-end”.
The page format determines how the pages will be displayed in HTML. There are 6 page format options:
- Continous Scroll (Vertical)
- Continous Scroll (Horizontal)
- Slider (Horizontal)
- Slider (Vertical)
- Slider (Fade In)
The Continous Scroll formats display as many pages as the browser window will allow in a manner similar to the Adobe Reader or Microsoft Word’s page layout format. The viewer navigates through the pages using the browser’s built-in scrolling (or with custom navigation that has been added in InDesign). The Continuous Scroll format supports variable page sizes.
The Liquid format fills the browser window regardless of size, based on options set within the Liquid Layout panel of InDesign CS6/CC. In versions prior to CS6, objects are simply scaled up or down with the browser window. For more on Liquid Layout options see http://helpx.adobe.com/indesign/using/alternate-layouts-liquid-layouts.html.
The Slider formats mask the pages inside a viewfinder, so that only one page is viewable at a time. The pages then slide horizontally or vertically, or they cross-fade during navigation. Pages can be navigated using built-in arrows or using custom navigation built in InDesign.
There are several additional navigation options. The Enable Swipe Navigation and Show Back/Next Arrows options are available for the Slider and Liquid page formats.
Swipe Navigation allow users with a touch screen to move through the pages with swipe gestures (also works with mouse interaction). The available gestures are vertical or horizontal, depending on the exact page format selected.
in5 supports many types of custom navigation that can be created within InDesign (e.g. using buttons or hyperlinks). The Show Back/Next Arrows option offer an easy way to include navigation without needing to build any user interface elements in InDesign.
A Lightbox opens new content on top of the existing content so the viewer does not have to leave the current page. Open External Links in Lightbox allows a user to visit external links in a Lightbox window.
Open Thumbnails in Lightbox opens larger versions of any images that have been marked as Thumbnails. This option can be used to create portfolios or photo galleries. An image can be imported into InDesign, then scaled down and cropped by adjusting the object’s frame boundaries. Choosing Mark as Thumbnail in the Object or context (right-click) menu of InDesign will cause in5 to treat the object as a Thumbnail. in5 will create a link to the original (uncropped, unscaled) image that was imported into InDesign. When the Thumbnail image is clicked or touched in the HTML output (and Open Thumbnails in Lightbox has been selected), the larger image will be revealed in a Lightbox.
The Text Rendering options affect how InDesign textframes will be exported to HTML.
Rendering the text as Images (the default) preserves the exact appearence of each textframe—no matter what fonts the viewer has installed—by rendering the textframes as PNG files.
HTML with Web-Safe Fallback Fonts will translate InDesign copy and styles into HTML and CSS. Unless fonts are chosen carefully in InDesign, it’s likely that the viewers will not have all of the fonts from the document installed. The “Fallback Fonts” option analyzes the characteristics (when possible) of fonts used in InDesign to determine suitable back-up fonts that will be displayed in cases when the the exact font is not available. For more on web-safe fonts, see: http://www.w3schools.com/cssref/css_websafe_fonts.asp.
HTML with Local Font Embedding (when possible) generates web-safe fallbacks, but it also copies Open Type (OTF) and True Type (TTF) fonts from the local machine and embeds them into the CSS using the @font-face rule. This option should be used with caution, because many fonts are not licensed to be embedded freely on the web. For more information, please consult this page: http://www.adobe.com/type/browser/legal/pdfs/faq.html.
SVG (preserves appearance + scalable) renders the text as Scalable Vector Graphics. This option maintains the appearance of text by converting the characters to vector graphics that scale well for Liquid Layouts or HD (retina) displays.
The Output drop-down options determine the output format.
The default option of Web renders the output as a webpage.
The Multi-page web option exports an HTML file for each page in the InDesign document (rather than a single index.html file). An index.html file is also created and redirect to the first page.
The iPad Web App option creates a special version of a webpage that is designed to be added to an iPad Home screen. Special instructions direct viewers to visit the URL on their iPad and save the page to their Home screen. A custom icon for the Home screen can be added in the Advanced section of the in5 dialog. A Web App functions very much like a normal iPad app, but does not need to be submitted to the App Store. Viewers can simply visit a webpage (where the output files have been uploaded) to install.
The iPhone Web App is similar to the iPad Web App except that it targets the iPhone.
The Android Web App is similar to the iPad Web App except that it targets the Android devices. This format is experimental. As of the time of this writing, the “add to home screen” functionality is only available in a beta version of Chrome, and is not as full-featured as the iPhone and iPad apps. For more information, visit https://developers.google.com/chrome/mobile/docs/installtohomescreen.
The Multi-device Web App functions like the iPad, iPhone, and Android Web Apps combined into one format. The outputted “app” detects the platform and displays the correct prompts for the viewer’s device. If the viewer is not on one of these mobile platforms, a different prompt is displayed.
The Baker Framework (HPUB) option exports the files in a format ready to be used by the Baker Framework. Rather than output a single HTML file with all of the pages inside, this option creates an HTML file for each page in the InDesign document. This option all generates an index.html file with thumbnail images for each page, as well a book.json file to be used as a manifest for the book itself. The output can then be compiled into an iPhone or iPad app, or submitted to Apple Newsstand. For more on the Baker Framework, visit http://bakerframework.com.
The Liquid State Publishing System option exports the files in a format ready to be used by the Liquid State Publishing System. Rather than output a single HTML file with all of the pages inside, this option creates an HTML file for each page in the InDesign document. For more information on Liquid State, visit http://liquid-state.com. This format can be used in conjuction with Liquid Layout and the Liquid page format, but is in no way connected (the naming similarity is mere coincidence).
The Clear Previously Exported Files option deletes any existing files within the assets directory of the Destination Folder. This ensures that if the export has been run multiple times, unused files are discarded in order to save file space when the files are uploaded to a web server or packaged as an app.
The Display in5 Link in Footer option adds a link to the in5 website in the footer of the HTML page. Leaving this option checked (the default) helps potential users discover our product and is much appreciated!
The Backgrounds section includes options that allow you to customize the appearance of the page and document backgrounds.
Background Color sets the body color of the HTML.
A custom image (JPG, GIF, PNG, or SVG) can be selected as a background.
Background Image Position
This determines the horizontal and vertical positioning of the background image.
Background Image Size
This controls how the image is scaled.
- The auto option is the default and does not scale the background image.
- The cover option scales the background image to be as large as possible so that the background area is completely covered by the image (some parts of the image may not be in view within the background positioning area).
- The contain option scales the image to the largest size such that both its width and its height can fit inside the content area.
Repeat Background Image
The background image can be repeated (“tiled”) on the x axis (horizontally), the y axix (vertically), or both.
Page Color sets the background color of each page in the layout.
A custom image (JPG, GIF, PNG, or SVG) can be selected as the page background.
Page Image Position
This determines the horizontal and vertical positioning of the page background image.
Page Image Size
This controls how the image is scaled.
- The auto option is the default and does not scale the page image.
- The cover option scales the page background image to be as large as possible so that the page area is completely covered by the image (some parts of the image may not be in view within the page positioning area).
- The contain option scales the image to the largest size such that both its width and its height can fit inside the page area.
Repeat Page Image
The page image can be repeated (“tiled”) on the x axis (horizontally), the y axix (vertically), or both.
SEO & Meta
SEO stands for Search Engine Optimization. The SEO & Meta section provides options to make the output more available to search engines on the web, as well as to add important metadata. Inclusion of metadata in the HTML makes it easier for a search engine to locate and index. Thus, people can more easily find your website with search terms. The fields listed below are automatically copied from the InDesign document’s metadata (if available).
The Description is a basic outline of the content and purpose of the web page. This field is limited to 155 characters to ensure maximum compliance with search engines.
Keywords are comma-separated words that could be used to find your page in a search. The Auto button can be used to grab the most repeated words found in the document.
The Author field can be used to include someone’s name with the web page, e.g., for copyright or search purposes.
Book URL (used with Baker Framework)
The Book URL field is available as a unique identifer for a Baker Framework book. For more on the Book URL, see https://github.com/Simbul/baker/wiki/Book-protocol.
Amazon Web App Verification Key
in5 output can be deployed directly into the Amazon App Store. Part of the submission process to the App Store involves creating a manifest file with a verification key. Instead of creating the manifest file manually, you can simply paste your verification into the Amazon Web App Verification Key field within the in5 dialog and in5 will generate the manifest file for you. For more on Amazon Web Apps, visit https://developer.amazon.com/sdk/webapps.html.
This field is used to add a version number to the manifest file that is generated for an Amazon Web App.
Analytics & Sharing
This section lets you easily include Google Analytics tracking and sharing buttons for social networks.
You can learn more about the behavior of your users/viewers by tracking analytics to see statistics, such as which pages are viewed, for how long, and where people leave your site/app.
Analytics can be enabled by entering a Google Analytics Tracking ID. Once the output files are posted to a server and viewed online, they will automatically send tracking data to the corresponding Google Analytics account. You can also include an App ID (optional). You can track specific events by selecting from the list of items shown under the Track heading:
- Pages - selecting this option tracks different pages viewed within the document.
- Button Clicks - selecting this option tracks every button that is clicked based on the button name from InDesign.
- Audio/Video Playback - selecting this option tracks each time audio or video is played.
- Social Sharing - selecting this option tracks when social sharing buttons are clicked (see below for enabling social sharing buttons).
in5 automatically tracks both app- and web-based events. Sign up for Google Analytics for free and learn more at http://www.google.com/analytics/
By selecting any of the social networks shown in the Sharing list (Twitter, Facebook, LinkedIn, Google+), sharing buttons will automatically be shown in the output.
The Sharing Widget Position position menu lets you control the position of the sharing buttons in the window (left, right, top, bottom).
The Custom URL (optional - for apps & offline content) option lets you add a custom URL to appear when your content is shared on a social network. If this field is left blank (the default), then the current web address is shared.
Note: Your output content must be posted to a web server for the content to properly post to social network sites.
The Resources section makes it possible to customize the look of the output, as well as extend the functionality. Files added as resources will appear in the final output.
CSS files can be added or removed using the plus (+) and minus (-) buttons, respectively. These files will be associated with the final HTML in the order they appear in the list (drag an item to adjust its position in the list). Use the Append to Existing checkbox to add the code within the listed files to a CSS file that is already included in the output, and thus reduce the number of files in the final output.
HTML to Append
The Advanced section provides several additional options.
When exporting to the web, a custom icon (.png format) can be added as a favicon (the small icon that appears next to the URL in the browser (32x32 pixels recommended). When exporting using one of the Web App Output Formats, the icon is used as the app icon on the home screen (129x129 pixels recommended). A default icon is provided by in5 if no custom icon is added for a Web App.
The Image Quality menu options determine the quality of the images produced during the export process.
- Standard - Uses the default in5 settings (typically 72ppi PNGs, 150ppi when using the Liquid Page Format, or JPG is used when the source file is a JPG). Source images are automatically used when the source image is a GIF and the frame matches the dimensions of the image (to allow for animated GIFs).
- Use Source Image (when available) - Copies the source image (i.e., the one shown in the Links panel in InDesign) directly to the output instead of re-rendering. If the source image is not available, a new image is rendered with the default settings.
- Use Object Export Settings - Allows for custom settings (resolution and image format) on each page item. Uses the Custom Rasterization settings from the Object > Object Export Options... dialog (in the EPUB and HTML section). PNG and JPG are supported. GIFs are converted to PNGs.
- High Definition - Automatically exports all images at 144ppi.
- High Definition - Text Frames Only - Exports text frames (or anchored object when rendering text as HTML) at 144ppi and uses the standard export for all other items.
Device Viewport Zoom
Mobile web browsers render web pages in a virtual “window” known as the viewport. The viewport metatag in HTML5 makes it possible to “zoom” a device’s viewport to a certain level. in5 offers the following viewport options:
- Let in5 Choose - in5 will automatically choose the Viewport Zoom setting based on the Page Format used to ensure that the layout fills the device’s viewport. This setting will set the zoom to 100% when the Liquid Page Format is used, and will zoom to the page width in all other cases.
- Let Device Choose - No viewport setting is added and the mobile device estimates the best sizing for the content.
- Zoom to Device Width - Zooms the device display so that the content fills the width of the device.
- Zoom to Page Width - Zooms the device to match the width of a single page.
- Force 100% Scale - Ensures that the device will not zoom in or out by default.
For more information on the viewport metatag, see https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag.
Show Audio Controls generates a standard set of playback controls to start, stop, skip ahead, and adjust volume. The minimum width of the controls is wider than the 60-pixel square that is automatically generated by InDesign when audio is placed. If Show Audio Controls is not selected, the poster image (by default in InDesign, a speaker icon) can be clicked or touched to start and stop the audio.
Application Cache (Offline Viewing)
The Application Cache is a feature of modern web browsers that stores content such that it can be viewed without internet access. The Cache All option will generate a manifest file that includes all of the files generated by in5 (so that the content can be viewed offline).
Apple’s iOS 6 browser for the iPad and iPhone allows 25mb of application cache by default, but many other browsers limit the application cache to 5mb.
The Cache Non-Media Files Only option adds only non-media (files that are not audio or video, which are generally larger in size) to the manifest. This option can be used to cache essential files without exceeding the application cache file size limit.
The Advanced Rendering options provide additional ways to direct how in5 converts InDesign content to HTML.
The Make Overset Text Scrollable adds scrollbars (or touch-scrolling on iOS devices) when the HTML text exceeds the boundaries of the textframes. When this option is not checked, the height of the text automatically expands the height of the textframe (the default HTML behavior). The Folio Overlay panel can also be used to add scrolling to individual textframes.
Render Rectangles as CSS (when possible) renders rectangles as <div> tags and CSS, rather than as PNG images. This option can reduce the file size to some extent and fewer files need be requested on a server.
Lazy Load Images will only load images on the current page and neighboring pages, rather than loading all of the images in the document right away. Turning this option on can dramatically reduce the load time in the browser, especially for long documents.
Render Groups As Images will treat groups as images, rather than rendering the content inside of the group. When this option is checked, some items can be strategically rendered as images to preserve appearance, while other items are still rendered as pure HTML. This can be especially useful for maintaining the appearance of items with complex blending modes or effects that are not well-supported in HTML.
When an object spans across multiple pages (horizontally) in a spread, InDesign still treats that object as if it belongs to a single page. By checking Allow Page Items to Span Across Pages within Spreads, duplicate objects are automatically exported to all affected pages in the spread, such that the output will match the appearance of the InDesign spread.
Use pts instead of pxs for text will assign font and leading (line height) sizes as points instead of pixels. In Some cases, this produces font sizes that more closely match those of the original InDesign documents.
The Include Hidden Layers option makes all layers visible in the outputted HTML.
The Info section contains important information about the in5 extension itself. The Info section is used to check for updates and enter a serial number to activate in5.
Click the Activate button to activate in5 (an internet connection is required for this step).
Updates can be found by selecting the Check now button. If updates are available, a download link and a list of changes will be displayed in the Updates field.