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

Kelly, you need better meds. :) Here is a discussion on SL3 roadmap. In it there is a link to a white paper from Articulate which basically discusses responsive design not SL3.  CLICK HERE  for the discussion.

There is also this:

"We will release the next perpetual versions of Storyline and Studio next year. Just a note that these products will NOT include integration with the web apps in Articulate 360 such as Content Library and Articulate Review. We truly haven’t set a firm release date for the next perpetual versions of Storyline and Studio (we’re not being coy!) but it will be in 2017. We’ll share news of it in the community when we have a firmer date." CLICK HERE 2

So the short answer.. Yes you are still running a fever and that is not real walrus in a tux riding a unicorn in your room.

Of note was this closing remark in the article.
"We’re fully committed to giving organizations everything they need to easily and scalably develop and deploy e-learning that’s fun, engaging, and effective for learners on every device, everywhere." (1)

I think they need to add a footnote.. (1) we are committed to all this except if it involves font kerning, then, eh, well you know we'll see.

-Sean

Kelly Kung

Hi Sean,

Thanks for the info.  Yup, its tough keeping up with emails especially when coming back from vacation and then getting sick.  Great that we're in this font kerning thing together and no, I'm not seeing a walrus in a tux nor a unicorn in my room.  If I did and also saw a leprechaun at the end of the rainbow, I'll run out quickly and buy a lotto ticket.

Simon Taghioff

Hi everyone,

We’ve investigated this problem further internally and have an update to share with you.

The issue stems from the way we handle text layout in Storyline. Leaving text layout up to the browser isn’t good enough for the kind of complex e-learning courses people author in Storyline. Small differences in the spacing of individual characters and words rapidly add up, leading to visibly broken layouts, additional lines, cut off text etc. This inconsistency is extremely problematic when you’re trying to create courses for a world where learners are using a broad selection of web browsers, operating systems, and devices.

So instead, Storyline publishes each character to a specific position on the screen. This ensures that text always appears in /exactly/ the same position when the course is published, whether your course is played back in Flash on a Windows PC or HTML5 using Safari on iPhone.

For the most part, this system works extremely well. The fly in the ointment is ClearType, a technology baked in to Windows which increases the perceived clarity and sharpness of on-screen text. To achieve this, ClearType adjusts the width of specific characters in specific fonts (e.g. by visibly widening the “v” in Century Gothic). When the course is played back, a different set of rendering adjustments is applied by the browser but all characters remain in their original published positions, creating kerning (spacing) issues with a small number of word / font combinations.

While we have improved text rendering several times throughout Storyline’s history (including a completely new layout engine in SL2), there is unfortunately no way to solve this specific issue within the constraints of our current architecture. There is no way to force the “v” in Century Gothic to render wider than normal during playback, while ‘correcting’ display during authoring would affect a large number of existing courses and destroy consistency across the various playback environments we support.

Despite these inherent constraints, we have been looking at what else can be done to improve matters and address the concerns raised in this thread.

We have identified a set of individual tweaks to Storyline’s text rendering system that will improve the way Century Gothic text renders while minimizing the effects on the overall flow of text. We hope to release this during Q2 2017 as an Update to Storyline 360 and will update this thread once it is available. We will continue to work with the community to investigate further potential improvements to kerning for other word / font combinations.

Thanks again for helping us understand the impact of the problem,

Simon

david Hegarty

Thanks for the update, five obvious things

1- It's not Century Gothic, many of us have identified serious problems with basic fonts like Arial- it's not consistent.

2- It's not Windows- we author on Mac and Windows with same problem

3- While we understand that consistent type treatment in a multi-platform world is hard, every other major authoring platform does it better than Storyline.  I see that both the older non-responsive platforms were fine and the newer responsive platforms also fine - so Storyline is the exception

4- People need to know these limitations- so it should be clearly identified as a known bug (and what fonts to avoid) so developers don't end up losing reputation and income from upsetting clients.

5- Articulate Rise doesn't seem to have any of these issues (although it's a much simpler model) so the tech to get it right must be around (-:

Udi Gilboa

Adding to Marijn comment above:

This is not only a pity, this is Articulate breaking the agreement with its customers. Following SL2 purchase, we are entitled to receive updates and bug fixes. If Articulate will run a query on their customer base, I am sure they will find the majority of the customers are with SL2. Providing future updates and bug fixes only to SL 360 will cause additional customers to leave this product and go the the competition. I hope someone at Articulate will relate to this message.

David Tait

I agree with Marijn and Udi.

I fully support Articulate's right to reserve new features for 360. They're a business and need to make money. However, I cannot come to terms with the fact that they are seemingly reserving bug fixes for the new software and are ignoring an established SL2 customer base. If you built software with bugs and people bought it, it's your responsibility to fix those bugs.

Microsoft have clear product support lifecycle maps on their website which keep customers informed. I know that if I buy Windows 10 today, I will be supported until October 2020. There will have been customers who bought SL2, in good faith, possibly even the day before 360 was released. Had they known they were buying software that was to be instantly unsupported in terms of bug fixes, my bet is they'd have thought twice about their purchase.

I would like to see Articulate accept that they have a responsibility to the many customers who have put them where they are today, and admit that they should be supporting SL2 for at least 2 years. They don't have to add the new features to SL2, just the bug fixes we've all been reporting for the last two years.

It would be really easy for me to upgrade to 360 but I work with organisations that aren't as agile, where budgets have been set and software can't be upgraded in an instant. For this reason I will be using SL2 for the foreseeable future.

Articulate, I think it's clear that you really believe in the path that you're taking with 360, and that's fine, but you have a phenominally supportive customer base and the best online community I've seen, don't lose them.

Sean OBrien

Sorry gang was away last week. Ill post my opinion later.

1) that's correct. I have no idea why Simon was going on about century gothic. it is basically with all fonts or we would be using anything but century gothic.!

2) Agreed

3) Agreed - Captivate doesn't do this nonsense neither does PowerPoint!

4) I believe Simon is tell us that we are generally pooched. In other words are limitations are every font in Storyline.

5) the tech seems to be the same in 360 and SL. Time to switch teams. 

Sean OBrien

I am with Terry on this one. TWO YEARS to have them tell us we have no idea how to fix this. This is not an unresolvable issue Articulate just wants to move everyone to a subscription model. I would have considered buying 360 but not now. When they come out with another product 360 wont be supported and you will be forced to buy the new one. This is really horrible customer service and truly deceptive marketing techniques where you purchase a product and then are told that the new product is going to be fixed when we first identified it before that new product was even out. It is very sad as the community is awesome and the product brought us all together.

Kelly Kung

My department purchased the future upgrade to SL3 (if and when that should of been available) a long long time ago.  What a let down that would of been hearing that the fix would of applied only to 360.  Our team, traded in that future upgrade for a slight discount for 360. 

I totally get it that Articulate needs to make a profit but it shouldn't be at the cost of losing a loyal SL2 users.  Adobe also uses the subscription based model and for the price you can pick and choose what you need, unlike with 360.

Sean OBrien

Captivate 2017 is out.. this is what they say about fonts..

Adobe Typekit integration [New]
Good typography makes for a great viewing experience only when it is consistent across devices, and delivering that just got a lot easier. Create a cloud-based kit of selected Typekit font families for use in your courses. Now learners will experience the content exactly as you intended.

You can see the video here. CLICK HERE. Check out what the video says at 00:34 about typefaces. (see attached)

And I just got an email from Chip Ritter telling me Storyline 3 is out. He doesn't mention that they didn't fix anything.

 

Sean OBrien

Talia,

I have some issues with Windows 10 and font scaling. (Postgre database for example) However this is not the case with Storyline. Simon provided a detailed description of the problem and also the fact they are not going to fix it.

The Windows 10 issues is explained here

https://www.ghacks.net/2016/07/17/fixing-tiny-text-in-windows/

Sean OBrien

Hello Everyone..

So my shiny new copies of SL 3 are on the way. Has anyone else upgraded? Is this fixed? I was promised to have beta access to the "fix" they were working on but have not heard anything from Articulate. Articulate also promised that they would have a fix for century gothic by Q2. Well I'm getting into my toga tonight to dance around in the moonlight to celebrate the solstice but I am not celebrating the supposed fix.

So has anyone heard different. Found some workaround in SL 3?

Lisa Jones

Hi Simon,

I also ran into this issue (SL3), and while I've seen some images of past kerning issues that seemed worse, the problem does still exist. So I dug into the code and see the attribute for x="[values]" in your tspan tag. I manually tweaked the values and can see how just being one or two off can really make a difference. I also removed the attribute values completely and the text looked fine.

My question is perhaps philosophical. Do you adhere to more common HTML code development standards and practices, or create and maintain several different "hacks" to allow to-pixel-placement of text? (which, by the way, in my case also kerns badly in the client, and to apply custom leading to each "offensive" pair would take forever - and really doesn't look that much better to be honest).

The world is obviously moving to more CSS rendering, frameworks, etc. I believe anyone who has run into this issue (with wonky-looking words) would at least appreciate a checkbox to "use CSS styling for text in HTML 5 output" option which would remove that "x" attribute and hopefully convert any special kerning, leading, etc, we use as CSS.  I know I've created CSS for other tools when their options weren't robust enough, so I know it is possible (not saying it's easy from a dev standpoint but...) . I've also used some calculated em values which I then modified within the base styles via jquery which I'd imagine (but again, am not sure) could be done as part of the software publishing engine.

If creating the logic and code for leading / kerning is difficult, then I'd also imagine that folks running into this issue would deal with maybe not-quite-as-pixel-perfect kerning or placement if their text strings didn't look so unprofessional.

I understand why you might not want to do some global change for everyone (again, I don't know in how many situations or with which types of options someone might choose that would drastically change the look of the content if the "x" attribute was removed), but giving us the option and allowing us to decide which is more acceptable to our clients and stakeholders would be highly appreciated.

Until then, I suppose if the issue is escalated enough, I'll add some jquery to the master to strip the values out of "x" in tspan. This isn't ideal, though, since I'll error each time I try to preview a page, but hey, you do what you can, right? ;)

Thank you in advance for your consideration and revisit of this issue.

Best,

Lisa

Simon Taghioff

Hi Lisa,

At a philosophical level, the ideal text code for slide-based e-learning would achieve two things. It would render text out with the same visual quality as we’ve come to expect from modern text engines (taking full advantage of hinting, kerning, ligatures etc.), and it would do so in a way that is consistent - what you see in Storyline would be exactly what the learner sees, no matter what web browser or operating system they use.

The rules that Storyline uses internally to lay out text are very different from those used by modern web browsers. This has forced a tradeoff; either we control text layout to ensure consistency, or we leave it to the browser but accept that individual web browsers may lay out text very differently from the way Storyline does during authoring.

We've always chosen to prioritize consistent, predictable text output at the cost of visual quality. This is because, unlike a standard web page (which simply reflows), the position of each character on a slide really matters. If a slight difference in spacing introduces an extra line break or two, that might mean critical course content is no longer visible to the learner.

We could (as you’ve suggested) add an option to remove the ‘x’ values for the position of each character from the published output, letting individual browsers choose how to lay out text instead of Storyline. The underlying tradeoff between consistency and visual quality would of course remain, it would just be up to you to choose which set of tradeoffs you preferred on a course-by-course basis.

Our preferred solution removes the tradeoff altogether. We’re doing this by bringing the exact same standard text rendering algorithm that web browsers use under the hood into Storyline. We’ll still publish ‘x’ values for each character to ensure 100% consistency, but they’ll now be virtually identical to the ‘x’ values the web browser would have generated on its own.

That way, you’ll automatically get the best of both worlds for every course you publish - text that is both beautifully presented and consistently laid out in every web browser.

We’re making great progress on what is a core feature of Storyline with a lot of moving pieces. We’re planning to beta the new text renderer sometime in Q3, at which point we’ll be in a better position to provide an estimated release window for an Update to Storyline 360 and Storyline 3.

Lisa Jones

Thanks Simon,

Both options sound great! I understand the control, and I think that's super, but at the same time, I personally don't have time to set and modify each character (well specifically the ones that seem to kern oddly) individually. I will say that indeed the text does look like it does in the client, but it also is not leading properly in the client. In this case, the pages look better with the "x" value removed - so that would be a super option.

That said, I look forward to seeing the new engine and all the improvements it contains.

Much appreciated,
Lisa

Ashley Terwilliger

Hi Jenny,

We're in the midst of testing some of these changes now - once we've evaluated that test and feedback we'll look at next steps. I promise we won't make you ask for an update - this forum discussion will be updated by staff once there is more to share. If you're subscribed you should receive those updates via an email notification.