Exporting to HTML5 from InDesign pt5 - meta tags

0800 156 0777

Exporting to HTML5 from InDesign pt5 - meta tags

Running on from my last post on using the in5 plugin to export to HTML5, I noticed that when you chose as an output the iPad web app option, testing this in your browser on your iPad produced an interesting result. The pages were all in fullscreen mode, and they were locked that way. You could not see the normal browser buttons etc, you were fully immersed in the set of pages that you exported. This was interesting, and I guessed that it must be due some meta tags that were telling the browser what to do. Looking at the source code, here are the meta tags created when you export…

<meta name="generator" content="In5 v1.4.6">
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

The first meta tag is obvious, and the next one is commonly used for mobile/tablet work to set the viewport. But the next two are interesting. Reading them you can see that they look like they change the behaviour of the web page. So let us look at the safari documentation and see what it has to say on these meta tags.

The apple-mobile-web-app-capable meta tag sets whether the web application runs in full-screen mode (if set to yes). This is really handy, and I can see this being very useful for on-line presentations and as such.

The apple-mobile-web-app-status-bar-style meta tag sets the style of the web app status bar, and has no effect unless the previous meta tag is set. You can choose default (status bar is normal), black, where the status bar has a black background, black-translucent (the status bar has a black and translucent background). If the setting is default or black, the web content is set below the status, however if you set it to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.

Coupled with the Mac version of Safari being able to remotely debug your web pages, this makes for some interesting results for you to play around with. So when you are exporting to html5 from InDesign (using the in5 plugin) check the source code, and see what else you can do.