Storyline 2 - character spacing problem

Hi all,

I'm having a problem when publishing a module (it doesn't really show in preview): in some words there seems to be extra spaces between letters. See the words "pumps" & "and" in the screenshot below:

Bug

I've tried removing text - copy/paste via notepad without success. I also tried changing character spacing to 1 which didn't work either.

This problem can also be random, ie when changing the text it may solve the problem on one specific word but add another extra space into some other word...

This is a real issue since I cannot replace / retype every single word of the whole module and then check which one has new extra spaces.

 

Many thanks in advance

249 Replies
Sean OBrien

Cass, this was resolved. Articulate did correct this for the most part, in SL360 and SL3.
I do not believe they are going to implement a fix to SL2. From a personal perspective, I had the opportunity to try SL360 and beta test the correction. I was a SL2 user and did not want a subscription to SL360. Working on this fixed changed my mind and I purchased SL360. It is well worth the upgrade. IMHO

cassandra miller

I did see the spacing issue was fixed in SL 360, but that does not work for me because my organization ran into an even bigger problem in 360. Courses that we developed using 'Arial' font  automatically change to 'Times New Roman' font when playing the course in IE. This is an issue because our branding standards require we use Arial font. So I'm stuck --- I can use SL2 and have spacing issues, or use 360 and have the font change entirely. Neither option is acceptable, so I hope Articulate is on this. 

Ashley Terwilliger

Hi Cassandra,

I know you and went back and forth about a text issue here, with how it's displaying in IE11, but that's not the same as Arial moving to TNR. Do you have a case or a forum link so that I can follow up on the correct issue for you? 

The spacing fix isn't something that we'll be able to revert to Storyline 2, but I know our team is working on a few of these font issues in Storyline 360. 

cassandra miller

Hi Ashley,

Thanks for the follow-up. I am part of this thread regarding text not rendering properly in IE 11:
https://community.articulate.com/discussions/articulate-storyline/text-not-rendering-correctly-in-internet-explorer-11

Again, I am stuck. My project was originally in 360, but the text wouldn’t render properly. I had no choice but to redo my project in SL2, but now I’m experiencing the spacing issues. My organization must use Arial font for branding purposes, and our supported browser is IE. I prefer to use 360, but I can’t until the text renders correctly. Help!

Thanks,

Cassandra

Ashley Terwilliger

Thanks, Cassandra. 

That issue is specific to IE11 and there are a few ways to fix it as outlined here. Our team is also looking into what other changes we can make on our end to override any specific IE11 settings, but that's a fix that is a bit farther out in terms of implementation. Were you able to test any of those fixes mentioned on your content and in IE11? 

cass miller

Hi Ashley,

 

These workarounds were suggested to me before, and unfortunately they will not work for my organization. We develop some training for outside customers, and we find it unacceptable t ask  them to get their IT department involved over a font issue. We cannot ask for a different browser to be used, because IE is the supported browser. Lastly, we cannot do the Flash output - some of our customers do not use Flash whatsoever. I am stuck! Please help!

Lisa Jones

Cassandra - Do you see this issue only in IE, or is it across all browsers? Does the font change to Times New Roman when you open a file up in Storyline, or does it show as Arial in the software, but doesn't display correctly in a browser?

I'm wondering something -- because I've never seen the issue where the font is "changed" by the client with a version change. I'm going to assume, if the issue is specifically with IE, then there could be something with the CSS where IE isn't recognizing / associating the font with the system-loaded Arial, so it could be going back to whatever is set at its base font in settings. 

I've also seen cases (not with Arial, but with other fonts) where a developer will have one version of a font installed, and a user will have another one (they may be named the same in a font drop down, but are named differently when the CSS is generated, for example). They look darn close, but aren't called the same in the CSS - the system doesn't know which font to display, so it goes back to browser default.

There are some layers of troubleshooting to go through to see what the problem is...although the fact that this is happening with Arial is perplexing to me. 

First see if it's across different browsers on a number of devices (if it fails on the developer device, too, then that's actually a bonus because you can test). Does it happen it's loaded to a web server AND you link directly to story_html5.html? If you go to F12 (developer tools) in IE, is the emulation in IE 11 / Edge mode, or might the server be forcing an older emulation mode (and indeed fairly recently, I've seen a server force down to IE6...yikes!!)?

If it does work on a developer device and not another device - then it's a matter of comparison to see what the differences are. It could be browser settings, it could be the font itself (although unlikely). It might also be some sort of permissions (although unlikely - but I've seen cases in whitelist sites where links out to jquery are not allowed which can cause all sorts of freaky things to happen). 

I wish I had a clean answer for you - but I sort of think if this were an issue with the software for everyone, there would be a gajillion folks taking the servers down with all their posts. There might just be something just "right" (or wrong in this case) with your development and delivery environments that could also be not playing friendly in just the "wrong" way causing this. 

What types of troubleshooting have you done so far? Knowing everything you've investigated might also help us guide you.

Best of luck,
Lisa

Ashley Terwilliger

Hi Cass, 

I wanted to bring them up again just in case, as that discussion has gotten a bit long and I worry that items get lost. :) 

As for the fix, it's still something our team is working on, and it's not a minor fix. You can see that Mike shared an update on this a little less than a month ago: 

Hi all,
The way we currently handle Storyline HTML5 fonts with ligatures makes it so the font quality matches in Storyline and in the published output. While this works well for the majority of use cases, we know that it causes problems in Internet Explorer when a security setting is enabled that prohibits web fonts from being downloaded. We hear you that this is painful. And we’ve come up with a solution to address it. It’s not going to be an easy fix, so we can’t give an ETA just yet, but it is definitely at the top of the priority list.

As soon as it's ready, we'll let everyone know and I'm sorry it's causing such difficulty on your end. 

Leslie McKerchie

Hi Megan,

Sorry that you ran into an issue with character spacing as well.

Mike is referring to a fix that they are working on for Storyline 360, but it has not been completed yet. What version of Storyline are you currently using?

And we’ve come up with a solution to address it. It’s not going to be an easy fix, so we can’t give an ETA just yet, but it is definitely at the top of the priority list.
megan jonas

This particular project is SL 360 published for HTML5. The font is Arial
and the issue is with using capital A. All the instances client pointed out
looked like there was no space between A and the next word. Since I typed
my question here, I decided to try double spaces and that was enough for
client to sign off on the final publish. Thanks for following up!

cassandra miller

I am having the same issue with SL360. Not only is there a character spacing issue, but my font is also changed from 'Arial' to 'Times New Roman'. This issue is only occurring in IE (my organizations' preferred browser), so I tried your suggested workaround to 'enable font downloading' and it's still not working.

Is there an ETA on this fix yet?

Cassandra S. Miller
Instructional Designer and Developer
Transition Services
[Software

Ashley Terwilliger

Hi Megan,

Did you also try enabling modern text? Earlier versions of Storyline had issues with the font kerning (essentially the spaces between text) based on how we draw the text for various outputs (HTML5 and Flash) so our team rewrote that to account for these discrepancies between browsers and outputs. 

cassandra miller

Hi Lisa,

 

Thanks for the reply - sorry I didn't notice this sooner.

 

This issue is only occurring in IE (we've tried Chrome and FireFox with no issues). It is occurring with my device (I am the developer) and it is occurring for everyone who uses IE (IE is unfortunately the supported browser in our organization). We have tried to following:

1.) Had IT whitelist our LMS site.

2.) Added our LMS site to 'trusted websites'

3.) IT enabled font downloading in IE

4.) Tried Modern Text

 

This issue is preventing my organization from releasing training, so we are wracking our brains trying to find a solution, or at least a temporary workaround,

 

Any advice is greatly appreciated.

 

 

 

 

Alyssa Gomez

Hi Cassandra!

It sounds like you've already been through quite a bit of troubleshooting, to no avail! I know this has halted your training release, so we can try and help you get moving again as soon as possible.

I've opened a support case on your behalf--keep an eye out for an email from our support engineers soon!

cassandra miller

Hi Miriam,

I am also still experiencing this in my organization.

I have been troubleshooting this issue for what feels like an eternity. From my research, I am beginning to believe the issue is within my organization's network and not within Storyline. We believe the issue is due to our network blocking font downloads.

We are in the early stages of exploring this with our IT department, but I'll update this discussion with any pertinent info I discover.

Good luck to you - I know this is an incredibly frustrating issue.

Cassandra S. Miller
Instructional Designer and Developer
Transition Services
[Software

Miriam Larson

Hi Ashley - yes, the Modern text made a difference, although I had created the project after the update and my understanding was that Modern text would be applied automatically. I went ahead and tried applying it when I read about the difference it should make, since it didn't appear to be checked or anything in the tool bar. It made a difference. So either I was wrong in thinking I had read that it would be applied automatically if you had installed the update, or, if that statement actually IS in your literature somewhere, you may want to have people check first to see if it has been applied.
Thank you -
Miriam

Ashley Terwilliger

Hi Miriam,

I'll check with our team on the documentation, but everywhere should indicate that existing projects will continue to use classic text by default, but you can switch to modern text. With new projects those automatically use modern text, so you don’t have to do any extra work.

It sounds like this was a file you created after Modern text rolled out though? Let me know if you spot that again. Maybe are you creating a new file from a template or something similar? 

Glad you're back up and running though! 

Ashley Terwilliger

Hi Justyna,

Are you also using Storyline 2? Based on a lot of the feedback and details shared here, our team implemented a new modern text after the release of Storyline 3 and Storyline 360 that has resolved the majority of character spacing/font kerning issues.

You can read a bit more about that here in Storyline 3, and if you're looking to upgrade you could also go through a trial of Storyline 3 (or a trial of Articulate 360 here). 

Let me know if you have any other questions!