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
Chris Ridley

Ohhh learners notice, more importantly clients notice and sometimes get annoyed.

I think it may be a Flash text rendering engine issue around 'static text'.

Back in my old Flash dev days I seen this from time to time with more "creative" fonts but was always around static text. When using text in flash you had various options but essentially they came down to 2 types of text fields "Static" or "Dynamic". Dynamic text fields were used for handling variable type or some sort of input data. When using dynamic text it was rendered differently more like html text. You could see a very obvious visual difference - Static text was quite anti-aliased and fuzzy where as dynamic text was sharp.

In Storyline when publishing the same content as html5 the issue isn't there (in my case), which sort of makes sense since the browser is rendering fonts not the flash player. I also don't see the issue if I'm using a dynamic text field (text box that contains a variable). Which is why text boxes that contain a variable are often sharper in appearance. In storyline we don't have a choice of what the text field 'type' is used but you can force it into a dynamic text field even if you are not intending to use a variable. I may have mentioned this "fix" before and its not ideal but it has dug me out of hole a couple of times. 

I usually have a short variable called "tx" that is a text type and give it no value. I then add this %tx% var to each text box which then forces the text box to render as dynamic text, its not ideal and depends on your layout needs but it seems to do the job for me more often than not. 

Kelly Kung

Chris,

You are one smart guy and I wished I knew about the variable trick earlier.  Interestingly, the font kerning is corrected but for me with the Century Gothic font is more pixelated.  So for me, without the variable trick the kerning looks bad in the word "Services" where the i is too close to the c.  If i use the variable trick, the kerning is correct but contents of that text box is pixelated.

Kelly Kung

Justin and Articulate Staff,

Learners will notice the kerning issues, they notice everything.

Luckily I'm a permanent employee at a company that creates internal training only.  I used to be a contractor and would not be able to justify to a client a bug that has been reported for two years without a fix.  Many top notch companies will have style guides as to what font type and font size to use.  There is never any wiggle room around that.  Please do take this into consideration for those that are contractors and depend on software that should be able to deliver top quality courses.

Chris Ridley

Glad the trick helps somewhat. But yeah its not perfect and i sometimes get slightly different results, with regards to quality, in different browsers. This again is something that makes me think that when its published to flash its using dynamic text fields, since they tend to rely on html text rending. To be honest the flash player has moved on quite i bit since i last done any real flash work so i'm going off hunches based on how things used to be but it sort of stacks up.

I have had few cases with kerning issues even with Ariel of all fonts and the fix seems to work reasonably consistently. I've tried it out on a few other fonts with varying result on quality but then i tend to stick to system fonts which can be quite limiting. But i'll take limiting over trying to explain to a client its something i can't really control any day.


 

 

Justin Grenier

Thanks very much for the help, all.  It looks like we have four good examples now:

These are just the kinds of examples we were looking for, so that's much appreciated, and we'll take this information back to our Engineering Team.

I do want to set the expectation that Storyline 2 Update 11, which is being readied for release in the next week or two, will not yet have a fix for this issue, although we'll certainly be thinking about this for the future.

Ashley Terwilliger

Hi Matthew,

The font kerning or character spacing issue is one that has been investigated by our team, but as you can see from Justin's most recent response we got some really great recent examples to share with our QA team within the last month or so. Those are in our teams hands in regards to SL2 and were a part of their thought process and testing while preparing for Articulate 360 which launched earlier this week. We'll continue to keep you posted on the progress within Storyline 2, and in the meantime you may want to look at giving Articulate 360 a test and see how that behaves for you. 

P-O E

Ashley,

For me the problem seems to escalate. Ariel has been working fairly good, but now it starts to become much worse. See the attached example where "s" sometimes crates a wide distance to the next letter, "m" creates a much too short distance (also to the next word), "w" create a much too wide distance. The text looks ridiculous!

Of course one understands that you as a company have to look for new kind of products and to try to thrive on payment by subscription. But to leave your present customers and traditional products behind as you have done for quite a while is not acceptable. One sign for your disloyalty is that you refer to Storyline 360 for a better performance. How can you even explain that?

P-O E

Thank you for your reply! But I don't understand why you need the file. There is a problem that you have been aware of for a long time. You even got advices concerning dynamic contra static text in the swf file from another user.

Please involve some really experienced and skilled development/support resources on this problem. Articulate has a well deserved and stable fan base since your products used to deliver and your support has been excellent over the years. Don't mess this up. How text is displayed is bread and butter for the user experience. If that turns out badly, the whole production will suffer and discredited! Sooner than later, this will affect your old customer's choice of authoring tool. If we loose trust, the new choice will not be Articulate 360!

Crystal Horn

Thanks for following up, P-O.  We like to provide files for our QA team to investigate to make sure they have the bigger picture and can account for all variables, especially with more complex issues.  But we completely understand if you’re unable to always provide one.  That screenshot that you sent really illustrates what you’re seeing-- We’ll be sure that they have that information, too, as we continue to work on this issue!

Kelly Kung

My team just purchased Articulate 360 and by the time I installed it and started my validation process with a Saba LMS, there was an update to v3.2.9664.0. 

The most disappointing news is that Articulate 360 does NOT fix the prior spacing issues.  In this thread back on Page 4, I did a test with the Century Gothic font and today I did the same test with Storyline 360 and the spacing is not corrected.

Today using Articulate 360, I published it to a Saba LMS and to the SCORM Cloud.  I used both Internet Explorer 11 and Firefox as my browsers.  Both are failures as in the word "Services" the "i" is too close to the "c".

Prior workarounds that were suggested of moving the font size a 1/2 point would correct but in this case it does not.  The odd thing is that bolding the text will fix the spacing issues.

Here are my screen shots using Articulate 360.

 

 

Articulate Staff, I am not willing to submit this .story file as you can easily create this yourself.  It took me about the same time to create the .story file as typing this reply.

Sean OBrien

Wow, Brand new program, same old problem. I really don't think the engineers are focused on fixing this at all, seems they are focused on getting a new revenue stream out instead of servicing existing customers. So now are you going to work on (maybe) fixing 360 instead of Storyline..

What are we at .. 2 years and counting.. Very disappointing..  Maybe in 2017? or...

Ashley Terwilliger

Hi Katherine,

I just wanted to follow up and confirm if you were using Storyline 2 or Storyline 360? Crystal did share the information from Kelly with our QA team for some further investigation based on the behavior in Storyline 360 so I can update that as well for the font and sizing you mentioned here. 

Ashley Terwilliger

Thanks Katherine for confirming that you're in Storyline 2. I know it's still an open issue with our team, and something that we've investigated over the course of the past couple years - the examples Fraser and Sean shared last month were really helpful as it wasn't always something our team could easily see or replicate based on a variety of factors, so the more information we can get into the hands of our QA team, the better. Thanks again for sharing with us here. 

Ashley Terwilliger

Hi Fraser and Sean,

I wanted to assure you that it's been escalated within our team and in our communications with the QA team. The examples with the annotations a couple months ago were incredibly helpful as a part of this, as a number of our team were not noticing the spacing inconsistencies and that's on our team as tech support pros, our focus is not often on design issues and the specifics of font kerning. The annotated examples that Fraser shared gave us that laser focus onto the behavior, and that's what we were able to escalate to the QA team. 

david Hegarty

Is there a proper fix for this yet?  We've been getting big gaps after the letter "v" in bullet lists.  It's all Century Gothic - I guess developer could use a different font for the questions but that seems a but lame! I think the double "ll" are dodgy too but it's the gap after v that really stands out- see Q2 in screenshot.