Font Spacing & Video Problems in Storyline 360

Hi, 

I've opened a Storyline 2 project and published in Storyline 360. I used the recommended HTML 5 with Flash Fallback. 

The published version is here:
http://learnitanytime.com/prodevsample/mobiletest/story.html 

When viewing the published files, there are some problems:

  • The fonts overlap each other. (screenshot attached) This happens with text added in Storyline (some of our videos have text added in Premier). The fonts do not overlap in the Storyline 360 file--only when exported.
  • On the iPhone, when a video plays, the player switches to the Quicktime player, and then switches back to the Storyline Player when a non video slide is displayed. 
  • On the iPhone, Articulate text does not show up at all when added on top of a video. This worked fine in the Articulate 2. I'm guessing the problem is related to the above issue. 

 

 

68 Replies
Ashley Terwilliger

Hi David,

Thanks for sharing a link to the published output here. The video launching in the iPhone video player is expected and is how the iPhone will always launch videos and unfortunately not something we can control within Storyline.

As far as the text, I'd like to take a look at your .story file (even just a few sample slides would be helpful). You can share the original SL2 one using the "add attachment" at the bottom of this forum thread and then I can publish that one and the one I upgrade to Articulate 360. 

david lieberman

Hi Ashley,

Thank you for your answer. Am I to understand that we won't be able to include Storyline elements on a slide at the same time a video is showing (because the iPhone player will open and only show the video?)

Attached is a slide with the font problem. Also included is the font we're using if you need to install it. Note that some text appears in images and video, but the actual text boxes are the ones displaying weird when produced or previewed in 360. 

Thank you for your help!!!

Ashley Terwilliger

Thanks David for the file and the font - I'm going to take a look at this and get back to you.

As far as video and slide content, you're correct there. If you've got slide content the user will see that and then if they choose to launch the video and are doing so on a mobile device it'll launch in the separate player. So definitely something to keep in mind in regards to your content planning!

Ashley Terwilliger

Hi David,

Thanks for sharing again the font file. I wasn't sure which ones you were using so I just installed the Light Condensed. I published first for Storyline 2 Update 11 and I did web so I could easily upload to Tempshare here. I also upgraded it to Storyline 360 and published it to Articulate Review so you could see it here.  So far I'm not seeing the font difficulties that you shared. Want to take a look at tell me what you see or if I'm missing something (it is Friday after a loooong week)? 

Adena Wilson

Dear Ashley,

I am experiencing a similar issue and was wondering there is any news on this topic. For me, when the Storyline360 course is published to the web in HTML only, the font I used (Gibson) comes through as Times New Roman and the spacing between letters is off. I have attached my project if that helps. (slide two had a video which I removed for this purpose) 

Thank you.

Leslie McKerchie

Hi Adena!

What browser are you viewing the published content in? The documentation here will explain the supported browsers for HTML5 content.

I won't claim to be a font expert and I published your first slide. Do you see the issue with my published output:

https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=15bebba2-d968-41b3-ab13-02bec01bff31

Adena Wilson

Hi Leslie. Thank you for your help. It looks fine on the page you published (as intended). We are using Chrome in the office so I am not sure why we see something different. I'll share the documentation link with our web team and we'll keep working on it but if you or your colleagues have any additional thoughts that would be welcome.

Hannah Moore

We have had similar issues with Articulate 360 - after publishing to the web using HTML5 with flash as back up - Arial font is changing to Times New Roman. - I have had this response from Articulate:

'After further testing, I found this to be an issue in some courses that are upgraded from Storyline 2 to Storyline 360, as well as in courses that have been imported from Powerpoint.  This only affects the HTML5 published output and you will be able to view the course properly using the Flash version.

This issue is raised to our Quality Assurance team for their review. I cannot commit to a specific date on when this will be completed  but I will keep you updated on the progress of this issue.  If you can send a copy of your project with Verdana font, it can help with their review.

 I have raised this Font issue as a separate case for this under reference:  00959492. ' 

I would add that the other course I tested using Verdana font referred to above was not an imported powerpoint - it was something created from scratch and it still had the font change as a problem. 

Hannah 

Ashley Terwilliger

Hi Adena,

It looks like Leslie published for LMS and uploaded to SCORM Cloud, but the behavior should be the same with the publish to Web. The publish process should be the same for both you and Leslie, and when you send the publish folder we're unable to see any settings to help determine what may have occurred. Have you also confirmed you're publishing and saving the files locally? Perhaps there is an element of corruption being introduced when you're publishing the file? 

Michael Luciani

Agreed. Thank you Hannah!

I thought I'd include another example of a text/font issue for the QA team to look at.

I work with David, so this is from the same course he attached in the original post.

The sample below is one slide, shown in Storyline 2 and 360. The font/text issue only appears in the 360 version. The text that appears (Recognize the Request) is supposed to be bold, but some of the letters aren't for some reason.

Feel free to compare the screenshots below or test the actual project files. The fonts have been included again.

Ashley Terwilliger

Thank you Michael for sharing some additional files and examples here with us. Within the original file and slide that David shared, I didn't see a change in the font as you show in these images - were you able to check the link to the course I shared on Articulate Review? It's available to you here as well. 

Ashley Terwilliger

Hi Michael,

I took a look at the latest attachment you shared to see if there were be a publishing difference for this one as well. I didn't notice the same items as you're sharing in the screenshots. You can view my published output here on Tempshare (for the next 10 days) and the bold of the font appears as expected. I used the file you had shared within the Zipped folder and just published it directly in Storyline 360 for web using the HTML5 with Flash fall back method. 

Since we're seeing a different behavior can you tell me a bit more about where you're viewing the published output? Also what Windows OS are you using? 

Michael Luciani

Hey Ashley,

The text/font issue appears throughout the publishing process for us. That includes previewing within Articulate 360, viewing the output on the desktop, and viewing the output on our website.

You can see my output here.

I published the slide in Storyline 360 for Web with the HTML5 with Flash fallback option selected. I tested the output in Chrome, Firefox, and Internet Explorer and the issue was still there. We're using Windows 10. Also, I tried deleting and re-installing the font used in this slide, just in case, but that didn't fix it either.

Thanks for the help!

Ashley Terwilliger

Hi Michael,

Thanks for your link - did you test mine as well? Did that behave normally for you? I'm also on Windows 10 and viewing in the same browsers, so I'm not sure what else could be different between our systems? 

Have you also confirmed that you're working on local project files?  Not doing so is known to cause odd behavior in files. 

Michael Luciani

Yes, we did test yours. The Tempshare output you provided behaved normally.

I can also confirm that we were working on local project files.

This weekend, we're going to run some publishing tests on a computer outside of our organization in an attempt to isolate the issue. I'll let you know how it goes. Thanks again.

Leslie McKerchie

Hi Adena!

Is this only happening on your website still? Looks like you are wanting to publish to HTML5 only and you'd need to be sure you are viewing in a supported browser.

I published your project to Review and I'm still not able to see the issue you are reporting in your image.

https://360.articulate.com/review/content/c597984e-da0c-4ea1-97a9-76a57a6d5e2c/review

HTML5

Windows: Internet Explorer 10 or later, Microsoft Edge (latest version), Google Chrome (latest version), Firefox (latest version)

Mac: Safari (latest version), Google Chrome (latest version), Firefox (latest version)

Mobile: Safari in Apple iOS 8 or later, Google Chrome in Apple iOS 8 or later, Google Chrome in Android OS 4.1 or later

 

All system requirements can be found here.

Leslie McKerchie

Note: For continuity of service - Adena responded to my course review with the following:

Hi Leslie. First of all, Review is awesome. Second of all, I apologize sincerely for not just taking out slide 2 -- it had a video and I removed it but forgot to change the timeline timing. Ugh. Finally, I just made sure that I was in the latest version of Chrome and still I am seeing the issue BUT also note that the version that I had published last week is a little different than what I showed in my screen capture today. Long story...when we saw the font issue I tried to deal with it by changing font that had been bold (which what was acting weird) and instead I unbolded and instead underlined, which is what you show in this version. Another apology, for making that switch. Still, the issue seems to persist, but not on your end. I am going to test publishing in HTML5 only with another course with a different font to see if we still get the distortion. As always, I greatly appreciate the support from Articulate.

Adena - please let me know if you'd like me to take a look at your updated course. Glad my course is working well for you and look forward to hearing what your subsequent testing finds.