Newbie Q: rendering differences Flash, HTML 5

Is there anything I can do about losing some of my text in the HTML5 version of a demo course I've built?

The default version is at http://www.lighttouchlearning.com/scenarios/home_visit_sl/story.html

When I look at the HTML5 version the question prompts cut off some of the intro text.  I know there's too much text but I want to understand if this is something I should expect and design for.

Here's the HTML5 version http://www.lighttouchlearning.com/scenarios/home_visit_sl/story_html5.html

These screenshots are from Firefox, but on an iPhone it's worse.  On the iPhone if you click the 'About' link, on the lightbox slide that appears you can never see the close button, no matter how you rotate the phone.

If this is all documented somewhere, please point me at it and I'll go off on my merry way!

6 Replies
Ashley Terwilliger-Pollard

Hi Norman,

If you're publishing with Storyline 1 and viewing it on your iPhone or iPad using Mobile Safari and have iOS5 or later - you should be seeing it ok. The iPhone does not support the mobile player here.  There are some elements that won't work as they do in Flash while viewing in HTML5 and you can view that comparison chart here.   You may want to also review this article about mobile Safari's memory limitations especially based on which version of the iPad or iPhone you're using. 

Do you have a copy of your .story file so that we could take a look at that? 

Ashley Terwilliger-Pollard

Hi Norman,

Thanks for sharing the file. I think what you were seeing was the text boxes were not set to autofit and therefore some of the text (the portion being cut off) was falling outside and not displaying in HTML5. I fixed the box on the very first slide and tested that version here.  You'll have to ignore some of the odd text formatting, as I don't have the same font you used - so it reverted to a default.