HTML5 Text Rendering Quality-Why so different?

I have been pursuing ways to make Storyline content compatible with non-iPad mobile devices. I understand that Storyline does not support Android/non-iPad mobile, but I'm still interested in finding out what DOES work and WHY inconsistencies occur.

I've been testing content on my Kindle Fire HD. Two screenshots are visible below. Note in the first one that:

  • Text in the menu is pretty sharp
  • Text in the player is blurry but readable
  • Text in the slide title has all the letters, but is really grainy
  • Text in the box is missing 'random' letters!

The second screenshot is from a multiple choice question. This time:

  • All the letters are there
  • It's still pretty grainy

Any ideas why text in some areas drops letters, and why the Menu text is so much sharper than the Slide text?

10 Replies
Ashley Terwilliger

Hi David, 

It's important to remember that the HTML5 standard is not yet finalized (and that a stable HTML5 recommendation is not scheduled for release until the end of 2014), so HTML5 is truly a "bleeding edge" technology at this time.

While the Articulate products do an excellent job of producing HTML5 content, unfortunately most Internet browsers have not fully adopted the HTML5 standard yet.  For an excellent overview of the state of HTML5 adoption in modern browsers, I recommend taking a look at html5test.com.

As you mentioned, we don't support Android platforms, but if you would like to see future support I'd suggest submitting a feature request. If you're able to replicate the issues on your iPad, we're happy to take a look. 

David Sensenig

Thanks Ashley; I'm struggling to come up with what my options are and you've been very helpful in educating me with the state of the technology. I had initially thought the Kindle Fire HD was completely incompatible, but then I discovered that I could ALMOST make it work. I guess I will have to stay informed and monitor progress. 

Zio Fonta

I was searching how to solve issue of bad text rendering in html5 desktop player on SL360 and found out this post. It seems that this issue has not been considered seriously anyway in SL2 because of flash player priority, but with the new possibilty to export in html5 only, text readability on html5 desktop version is becoming very important.

Ashley Terwilliger

Hi Zio,

This discussion is quite a bit older, but with SL360 we've seen some new issues with how text rendering is occurring in the HTML5 output, especially in the latest Chrome browsers. Our team is taking a look at all of these things, and are making incremental improvements such as ones noted in the release notes like the issue with WOFF font files, but we know there is still work to do! I see you shared some other information in a few other discussions, so I'll take a look at those too and try to keep responses there to limit any confusion with these older discussions. 

Alexander Reid

Are there any updates on this?  Using Storyline 2 Update 11 and just noticed ultra low-fi resolution in the text.  Couldn't figure out what was going on, but when I tried with Safari it prompted me to use Flash and rendered picture-perfect.  On Chrome which was probably blocking Flash by defaulted, it took the HTML5 version which looked super poor quality.  It's like it's trying to scale from a 200 pixel-wide JPEG when the native size of the design is using the default 16:9 option (720 x 405)

Leslie McKerchie

Hello Alexander,

Thanks for reaching out and letting us know what you are seeing in your course.

I'm curious to know how your course was published and if it included the HTML5 fallback version or if it's searching for Flash.

With your permission, I'd like to take a look at your project file to investigate what's happening. You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.

On another note, just wanted to let you know that we've had a couple of updates to Storyline 2 since your version.

Alexander Reid

Originally HTML5 was included with the publication.  When I disabled it, it forced the Flash version to load and everything was picture perfect.  

I ran the "check for update" function in the application and it said there were no new updates, which I found weird, possible broken server interaction.  I'll try manually downloading.

Alexander Reid

Updated to Release 13.  No change.  Here's a comparison of the HTML5 and Flash versions, the HTML5 being the pixelated one.

I had to include them as attachments as you can't tell much of a difference when inserted as images.

Ashley Terwilliger

Hi Alexander,

Thanks for sharing those images, and letting me know you've also updated Storyline. 

I’m sorry you’re running into an issue here with how the HTML5 output is displaying in Chrome. As the various browsers updated their HTML5 output, it changed the way images and text would display in HTML5 and we noted it as a bug for Storyline 2. We’ve addressed this in Storyline 3 and in the latest version of Storyline, Storyline 360 through an overall of our HTML5 output and features such as modern text that help with the font display issues. 

We are maintaining the basic functionality of Storyline 2, but our primary focus is on maintaining and creating new features for current versions of Storyline. I’d recommend looking into using an updated version of Storyline to address this. You can start a trial of Articulate 360 here or Storyline 3 here. Our Sales team is also available to answer any questions you have about upgrading. 

Let us know if we can help with anything else!