Storyline 360--HTML5 text scrambled

May 11, 2017

Charles Ruhe
By Charles Ruhe

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.

20 Replies
Crystal Horn
almost 6 years ago05/12/17 at 4:46 pm (UTC)

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
almost 6 years ago05/12/17 at 8:15 pm (UTC)

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
almost 6 years ago05/12/17 at 9:03 pm (UTC)

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
5 years ago01/04/18 at 12:57 pm (UTC)

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
almost 5 years ago05/10/18 at 4:39 pm (UTC)

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.

Alyssa Gomez
almost 5 years ago05/11/18 at 5:59 pm (UTC)

Hmm, that's odd! Can you tell me the exact browsers and versions that are giving you trouble? You can open this link in any browser to easily find the version number. 

I tested your course in Chrome 66.0.3359.170.

I would also recommend clearing your browser cache before testing the course link again.

Kendra Herlig
4 years ago03/10/19 at 1:52 pm (UTC)

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. 

Ren Gomez
over 3 years ago07/17/19 at 4:35 pm (UTC)

Hi Nate,

Can you tell me what font you're using? Let's see if we can figure this out with a few other questions:

  • Are you seeing scrambled text in Storyline preview, or after publishing?
  • Would you mind sharing a screenshot of the issue?

I'll be on the lookout for your responses to get to the root of the issue!

Lauren Connelly
over 2 years ago12/15/20 at 1:54 pm (UTC)

Hi Daniel!

We're happy to troubleshoot this with you! Are you running into the same issue as others in this post where the text is scrambled in the Storyline 360 course? 

Let's start with these questions:

  • Do you see the text scrambled in preview or a published output like Review 360, Web, or LMS?
  • If published output, have you tested the course in different browsers? If so, are you seeing the scrambled text in a specific browser?
  • Which font are you using in the course? Have you noticed the same scrambled text when using a different font?
  • Which version of Storyline are you using? 

This will get us started so that we can determine the fix!

Sign In to Reply