Adding HTML Objects to Your Layout

mag+ allows you to embed HTML objects that run in a WebKit browser into your layout. 

Note: HTML objects can be placed on the A- or B- layers of an InDesign document. If the HTML object is on a B- layer, however, and an A- layer also exists, users must turn off the A- layer before they can control the HTML object.

The A- layer of the current Vertical is turned off by double-tapping the screen but a checkbox in the Designd Vertical Panel allows you to disable the A-layer completely within the Vertical.

Also note that HTML objects override the default mag+ controls for an app, so pressing and holding a finger on an HTML object area will not, for instance, call up the mag+ navigation controls.

How to Add an HTML Object

1. Create a frame on the A- or B- layers of a mag+ InDesign document.

2. In the Designd Object Panel, change the Object Type to "HTML".

3. In the Designd Object Panel, press the "File" button and navigate to a file with the extension ".html".

The contents of the HTML file will be displayed within the boundaries of the frame you created in Step 1.

4. In the Designd Object Panel, set the desired options.

HTML Object Options:

  • URL: This path points to the HTML file that will be displayed. mag+ will bundle all associated assets into the exported Vertical for inclusion in the final Issue MIB. You can also point to a URL hosted on a website and it will load from that location (as long as the user has an active internet connection).
  • Resize on Rotate: This checkbox resizes the browser window when the device rotates. This is useful for Javascript calls within your HTML that reference browser-window size changes.
  • Scale Contents to Fit Block: This checkbox automatically scales your HTML object proportionally to the size of the frame you’ve drawn.
  • Transparent: This checkbox sets the background of your HTML window to transparent so that the layout below it is visible. 
Note: HTML objects have the same Pinning and Snapping capabilities as other Designd object types. These are set via the Horizontal Pin, Vertical Pin, and Snap drop-down menus.

When you export a Vertical with an HTML object, all files placed in the same folder as the linked HTML file will be copied and bundled into the final mag+ Issue MIB. Therefore, do not place files that are not being used in the same folder or subfolders as the linked HTML file. mag+ recommends that each HTML file and linked assets be placed in its own folder.

How to Embed HTML in the In-App Browser

1. Select a frame (or group) in InDesign that will trigger the in-app browser window.

3. Select the blue Hotspot frame on the "C-Clickable Areas" layer.

4. In the Designd Objects Panel, set the Hotspot Type drop-down menu to "HTML Window".

5. Click the "File" button and choose the HTML file you want to embed.

Tapping the Hotspot in your app will now launch the in-app browser. 

Important Information About HTML in mag+ Apps

mag+ apps use the WebKit resource of the platform to render embedded HTML. This means that testing in a desktop browser is not always sufficient. mag+ always recommends testing your HTML in the context of a mag+ Issue. Also, because devices differ in memory and processing power, behavior can vary across devices—testing on the target device is the best way to guarantee performance.

Properly sizing images

When HTML object assets are being exported, the mag+ InDesign Plugin does not convert linked images as it would for regular graphics placed in the InDesign document. This means that in order for images to be sized properly, all of your assets need to be the correct size for the target device's resolution.

Device examples

The original iPad’s resolution is about 1.83 times bigger then the InDesign template (132 dpi /72 dpi), which means that images need to be 1.83 times bigger than what they are shown in the InDesign document. So if an image placed in the template is 558 px by 419 px, then the image in the HTML element should be 1023 px by 766 px.

The iPad with Retina Display has a resolution of 264 dpi. So images need a pixel dimension that is double of the original iPad.

When working with Android or Kindle Fire you have other resolutions that you must consider. Be sure to check the dpi of the device you are creating for and divide that with 72 to get the conversion number.

Properly sizing thumbnails

You can still put an image in a frame you’ve drawn and labeled as a mag+ HTML object. It will appear in the thumbnail preview of your app's navigation scrubber, but not in the final rendered Issue MIB. This feature is useful for sizing your frame correctly: Place a screenshot of the HTML object into the frame in InDesign and use the “Fit Frame to Content” button to get the right dimensions.

Controlling interactive areas

Because HTML objects have their own programmed gestures, some mag+ gestures will not work when a user taps the HTML object area in your app. The most vital mag+ gestures that are affected are:

  • page-swiping
  • hold down for menu
  • double-tap to make the a-layer appear/disappear

To control where the user can use mag+ gestures and where they can use HTML gestures, it is possible to place transparent boxes over the HTML object. Where the transparent box overlays the HTML object, the user can use mag+ gestures.

URL links in HTML objects

When linking to another website in an HTML object (say, an HTML ad that links to a company’s website), the website will open in the box created for the original HTML object.

To avoid this, simplly type "openwindow-" (no quotes) before the URL in the HTML document. This will force the URL to open a browser window on top of the HTML object (e.g. <a href=”openwindow-”>Mag+</a>).

Custom HTML

The mag+ in-app browser uses UIWebView. When developing and testing custom HTML, be sure to test against UIWebView and not a desktop browser such as Safari or Chrome, otherwise you may see unexpected differences in behavior once you include the HTML in your mag+ application.


Article is closed for comments.
Powered by Zendesk