Storyline 360--HTML5 text scrambled

I'm having issues with how text is displaying in HTML5. Here's an example:

HTML5 corrupt text

It seems to be fine in the Flash version. Can anyone tell me what's going wrong? I've tried both HTML5 with Flash fallback and Flash with HTML5 fallback.

Thanks,

Charles Ruhe

PS--Just output the same file via a downlevel version of Storyline, and it seems to have worked perfectly.

18 Replies
Crystal Horn

Hi Charles, and welcome to E-Learning Heroes!

Well that certainly doesn't look right.  Can you verify a couple of things for me?

  • Go to your Help tab and click on About Storyline.  Can you let me know the version number you see?
  • Can you provide a link to your output?
  • When you say "downlevel version," are you referring to Storyline 2?

Thanks for the info; I'll be happy to help out!

Charles Ruhe

Hi Crystal,

Thanks for getting back to me! The version # of my SL 360 is v3.4.10364.0

Here are links to the output of two tests. One was set up as HTML5 with Flash Fallback, the other as Flash with HTML5 Fallback.

http://www.comcourse.com/internal/file.php/1616/PublishedLectures/MED101_Lecture01_test/story.html

http://www.comcourse.com/internal/file.php/1616/PublishedLectures/MED101_Lecture01_test2/story.html

The downlevel version is Storyline 2, and here's a link to that one, which is working fine:

http://www.comcourse.com/internal/file.php/1616/PublishedLectures/Lecture01%20Test%203/story.html

Thanks for your help!

Charles

Crystal Horn

Hi Charles- thanks for all that helpful info!

I can absolutely see the wonky font rendering in the HTML5 version.

We made some improvements to the way HTML5 handles many fonts in our last update of Storyline 360.  Let's get you updated and see if republishing under the latest version fixes you up!

If you "quit" and relaunch your desktop app, you should be prompted for an update for Storyline 360.  Go ahead and choose to update, and then republish your course.

Let me know how you make out!

Teri Cremeans

Hi Alyssa,

Your question about font triggered a thought for me and it did in fact fix it. We used to use Helvetica, and then when we upgraded to Windows 10 and Storyline 3, that font was no longer supported, so we switched to Arial. However, some of the older projects are still done in Helvetica and I was updating those and seeing the scrambled text on some slides but not all. I went through and switched them to Arial, and the text is no longer scrambled! Thank you for your help!

Tonya Thomas

So—what fonts am I not supposed to use??? I've used Calibri, since it's the default in MS Office. Why doesn't that work since most everyone using the latest MS Office has it? I've used Arial in the Title slide alone and it still is swapped out or scrambled. Player font sizes are enlarged, too, even they are unchanged from 100% in the player settings.

See presentation at http://rcmlearning.wayne.edu/courses/budget101/

Was published for HTML5 first, with Flash fallback. You'll see intended styling in the Flash version at http://rcmlearning.wayne.edu/courses/budget101/story_flash.html

This is a high-stakes presentation and is highly visible and about to be promoted. This needs to get resolved immediately—so far solutions I'm reading here aren't helping.

Kendra Herlig

I'm so frustrated! This is messing up in SL2, SL3, and apparently SL360 also. I can't simply try every font and see if it works? My LMS team tells me I have to publish to HTML to Scorm v2.0. And it doesn't always have issues on playback. And depends on the browser. It's worse in Chrome than in IE, but I need it to work on both. The first post on this chain was 2 years ago and the last 20 months ago. Yet a few months ago, it was still wonky when I published to HTML5 and loaded it onto the LMS.