I am getting some really odd feedback for one of our Storyline 360 courses (published for HTML5 with Flash backup). Has anyone encountered this / knows what is going on? Unfortunately I haven't been able to replicate the issue. Here are some of the comments the course is getting:
"Why are all the t's and f's missing?"
"Most all T's and F's are missing"
When opened in Explorer there were missing letter so it was very hard to read.
"Some of the slides had letters missing"
"All the missing letters were very odd. Was there a point?"
"The content was difficult to read mostly because of there were letters missing throughout the slides. It seemed mainly all the "t's" and "f's"
Why are all the t's and f's missing? That was very strange and might be very hard for people with visual difficulties.
This post, which helps you identify which fonts support glyphs and ligatures, might also be a way to verify if a nonstandard web font is going to be a problem (because it supports glyphs and ligatures):
Kristen, Storyline 2 is always going to publish a Flash version, even if you choose to publish HTML5 also. I believe there is a hack to force the HTML5 version to run, even if Flash is available on the client, but this might involve editing the published output. Would you like me to look into that for you?
I'm also going to investigate this font issue, to see if I can find a solution for that. Would anyone be willing to share a sample .story file with me that exhibits the issue? One with two or more slides would be great.
Thanks, Michael, but the flash issue is on the cleint's side. I'm not sure of the specifics of how they do it, but they have disabled flash on all of their courses. Therefore Stroyline 2 files revert to html5 only. The text and triggers etc. are all there, but things don't look as crisp, we lost the Search function which was extremely important to the client, and our 5 completion counter will no longer round up/down to get rid of the decimal points. These issues would all be fixed if we published in 360, but we can't because of the font issue and missing letters.
You can email me at michael@andersonelearning.com. Please make sure you send even just a sample of your .story file. You can delete and private information, as long as I can still see the problem exhibited. Sometimes people send a zip and it contain only the published output.
Thanks, Michael, but the flash issue is on the cleint's side. I'm not sure of the specifics of how they do it, but they have disabled flash on all of their courses. Therefore Stroyline 2 files revert to html5 only. The text and triggers etc. are all there, but things don't look as crisp, we lost the Search function which was extremely important to the client, and our 5 completion counter will no longer round up/down to get rid of the decimal points. These issues would all be fixed if we published in 360, but we can't because of the font issue and missing letters.
So finding a workaround to the font issue would be advantageous then. I'll get started on this as soon as receive a sample .story file.
Well, I thought I was making some progress on this, but I've hit a roadblock. Maybe someone here can help. I found a way to replace the ligatures with their respective letters by using an Execute Javascript trigger, BUT the spacing of the rest of the letters appears to be thrown off by this.
Copy the code below into a trigger on your Slide Master to test it out and see what results you get. The code does not currently convert all of the ligatures because I could not find all of the codes listed anywhere yet, so it only replaces the ones I've found so far. Most of the versions of "f" should get replaced in this test script. Thanks to Helen for providing me with a project to test.
Let me know if anyone has any ideas on how to tackle this font spacing issue. I'll have a look again tomorrow.
Here's the code that goes into the trigger:
// table with all replacements var defaultDiacriticsRemovalap = [ {'base':'f', 'letters':'\ue000'}, {'base':'ffi', 'letters':'\ue002'}, {'base':'ff', 'letters':'\ue003'}, // add more lines here
];
// build a map to feed to the function var diacriticsMap = {}; for (var i=0; i < defaultDiacriticsRemovalap.length; i++){ var letters = defaultDiacriticsRemovalap[i].letters.split(""); for (var j=0; j < letters.length ; j++){ diacriticsMap[letters[j]] = defaultDiacriticsRemovalap[i].base; } }
var elems = document.querySelectorAll("div"), i; var unicodeEncodedText = elems[i].innerHTML;
for (i = 0; i < elems.length; i++){ unicodeEncodedText = elems[i].innerHTML; elems[i].innerHTML = removeDiacritics(unicodeEncodedText); }
We have the same issues with storyline files exportet to html 5.
Some of our user (using IE 11) reports that the letter f is missing. The font should have been a Open sans but it is exchanged with an odd Serif font. How to solve this problem? I can see in the output file that the Open sans font is embedded. And it works fine on an iPad.
So Why does Storyline use a wrong font in the browser? And what to do to fix it? We have several Thousand users that use IE11.
Michael, I went a different route with this but ran into the same problem you are seeing. I tried doing a global find and replace of the ligature characters with the normal letters in a published course files. (planning on making a script to run if it worked) I got the same results of the letters showing up but being positioned incorrectly. Unfortunately I think if a font uses ligatures, the characters are not set up to align correctly without them :/
Michael, I went a different route with this but ran into the same problem you are seeing. I tried doing a global find and replace of the ligature characters with the normal letters in a published course files. (planning on making a script to run if it worked) I got the same results of the letters showing up but being positioned incorrectly. Unfortunately I think if a font uses ligatures, the characters are not set up to align correctly without them :/
Brian, your previous posts gave me a good head start on this, so thanks for that. I'm brewing some coffee now and hope that it will give me some new inspiration on how to solve this. :)
Susanne, go back and skim this thread from the beginning. A gentle posted a screenshot showing the security setting in IE that causes the issue (font download set to disabled). Your corporate IT may not be allowed to change this setting, so we are trying to devise a workaround.
Sam, that was the first thing I tried, or something similar. The problem seems to be that the ligatures are already embedded in the output. Turning them off in CSS does not seem to return the original character. Below is the CSS I tried adding to the page. I'll add yours to it to see if it makes a difference. Thanks.
It didn't seem to work. Below is the contents of my trigger. I don't know that much about CSS, but it seems it should be working, if that was a solution.
Brian, I see now why the spacing is off, but I don't know if it can be corrected. This is a line from the paths.js file which contains two ligatures. See all those numbers, I think they place each character in a particular spot. So if a one-character ligature is replaced with 2 or 3 letters, the other characters begin to overlap as they are occupying the same space.
The strange thing is that you dont have to download the font. So I dont think it is a security issue. The font is already embedded with the published files. It is also described in the css which font to use. And It works fine on fx an iPad or in Chrome. So Safari and Chrome are abel to read the css file and use the embedded font.
In the css it is also described to use an alternative font, In our case it should be an Sans Serif font, if the prefered font is not available. The strange font without F is not an Sans Serif and the spacing indicates that it is under no control from any script describing how the font should act.
I see that what you are trying to do is to describe the spacing to each letter in the mysterious font.
However that wont solve the issue that IE11 cant find the embedded font.
Susanne, the font does need to be downloaded, just like the rest of the course files. IE is blocking that download when particular security settings are enabled, as it should. I don't think the IE security setting affects Chrome or Safari, not that I've heard about. It's not that the font does not contain an "f", it does, it's just that Storyline is trying to display a special ligature character in place of the "f" and other characters in some places. I did not write the code in my previous message, that is from the published output of Storyline 3 where it is trying to place each character in a specific spot.
It looks like Storyline 2 used "Font.js" to include its fonts in the published output, which does not seem to be affected by disabling font downloads in IE. I'm trying to see if I can get that to work in Storyline 3, but that probably still will not help folks that also have the "Data URL" security setting enabled. I'll keep everyone updated if I make any progress.
Personally I think this is something Articulate could and should fix inside of storyline 360. Why are these ligatures being used I've never experienced this issue with Web Fonts. Is this purposely done to keep font licensing intact? Even if we had to use a web service like typekit to serve fonts I would be far happier than having this issue take place.
I do agree that there might be a better way to implement the use of ligatures, right now they are hard embedded into the output, but ligatures are used all over the place, you just never realized you were looking at them (neither did I until this issue arose). If you have the IE security setting enabled to block font downloads, I'm not sure if any web service serving fonts would work.
352 Replies
This post, which helps you identify which fonts support glyphs and ligatures, might also be a way to verify if a nonstandard web font is going to be a problem (because it supports glyphs and ligatures):
https://graphicdesign.stackexchange.com/questions/11066/how-can-i-check-if-some-opentype-font-supports-ligatures
Ten thousand learners at one client. Just tell them to change IE settings on every workstation.
Kristen, Storyline 2 is always going to publish a Flash version, even if you choose to publish HTML5 also. I believe there is a hack to force the HTML5 version to run, even if Flash is available on the client, but this might involve editing the published output. Would you like me to look into that for you?
I'm also going to investigate this font issue, to see if I can find a solution for that. Would anyone be willing to share a sample .story file with me that exhibits the issue? One with two or more slides would be great.
I can, what email should I send the zip file to?
Thanks, Michael, but the flash issue is on the cleint's side. I'm not sure of the specifics of how they do it, but they have disabled flash on all of their courses. Therefore Stroyline 2 files revert to html5 only. The text and triggers etc. are all there, but things don't look as crisp, we lost the Search function which was extremely important to the client, and our 5 completion counter will no longer round up/down to get rid of the decimal points. These issues would all be fixed if we published in 360, but we can't because of the font issue and missing letters.
This problem still exists and Arial has a problem too.
You can email me at michael@andersonelearning.com. Please make sure you send even just a sample of your .story file. You can delete and private information, as long as I can still see the problem exhibited. Sometimes people send a zip and it contain only the published output.
So finding a workaround to the font issue would be advantageous then. I'll get started on this as soon as receive a sample .story file.
Well, I thought I was making some progress on this, but I've hit a roadblock. Maybe someone here can help. I found a way to replace the ligatures with their respective letters by using an Execute Javascript trigger, BUT the spacing of the rest of the letters appears to be thrown off by this.
Copy the code below into a trigger on your Slide Master to test it out and see what results you get. The code does not currently convert all of the ligatures because I could not find all of the codes listed anywhere yet, so it only replaces the ones I've found so far. Most of the versions of "f" should get replaced in this test script. Thanks to Helen for providing me with a project to test.
Let me know if anyone has any ideas on how to tackle this font spacing issue. I'll have a look again tomorrow.
Here's the code that goes into the trigger:
// table with all replacementsvar defaultDiacriticsRemovalap = [{'base':'f', 'letters':'\ue000'},{'base':'ffi', 'letters':'\ue002'},{'base':'ff', 'letters':'\ue003'},// add more lines here];// build a map to feed to the functionvar diacriticsMap = {};for (var i=0; i < defaultDiacriticsRemovalap.length; i++){var letters = defaultDiacriticsRemovalap[i].letters.split("");for (var j=0; j < letters.length ; j++){diacriticsMap[letters[j]] = defaultDiacriticsRemovalap[i].base;}}var elems = document.querySelectorAll("div"), i;var unicodeEncodedText = elems[i].innerHTML;for (i = 0; i < elems.length; i++){unicodeEncodedText = elems[i].innerHTML;elems[i].innerHTML = removeDiacritics(unicodeEncodedText);}function removeDiacritics(str) {return str.replace(/[^A-Za-z0-9\s]/g, function(a){return diacriticsMap[a] || a;});}We have the same issues with storyline files exportet to html 5.
Some of our user (using IE 11) reports that the letter f is missing. The font should have been a Open sans but it is exchanged with an odd Serif font. How to solve this problem? I can see in the output file that the Open sans font is embedded. And it works fine on an iPad.
So Why does Storyline use a wrong font in the browser? And what to do to fix it? We have several Thousand users that use IE11.
Michael, I went a different route with this but ran into the same problem you are seeing. I tried doing a global find and replace of the ligature characters with the normal letters in a published course files. (planning on making a script to run if it worked) I got the same results of the letters showing up but being positioned incorrectly. Unfortunately I think if a font uses ligatures, the characters are not set up to align correctly without them :/
Brian, your previous posts gave me a good head start on this, so thanks for that. I'm brewing some coffee now and hope that it will give me some new inspiration on how to solve this. :)
Susanne, go back and skim this thread from the beginning. A gentle posted a screenshot showing the security setting in IE that causes the issue (font download set to disabled). Your corporate IT may not be allowed to change this setting, so we are trying to devise a workaround.
Has this thread on StackOverflow been tried as a fix?
body {
font-variant-ligatures: none;
}
Sam, that was the first thing I tried, or something similar. The problem seems to be that the ligatures are already embedded in the output. Turning them off in CSS does not seem to return the original character. Below is the CSS I tried adding to the page. I'll add yours to it to see if it makes a difference. Thanks.
font-feature-settings: 'liga' 0, 'clig' 0;-moz-font-feature-settings: 'liga' 0, 'clig' 0;-ms-font-feature-settings: 'liga' 0, 'clig' 0;-o-font-feature-settings: 'liga' 0, 'clig' 0;-webkit-font-feature-settings: 'liga' 0, 'clig' 0;font-variant-ligatures: no-discretionary-ligatures;Looking forward to your feedback.
It didn't seem to work. Below is the contents of my trigger. I don't know that much about CSS, but it seems it should be working, if that was a solution.
var css = document.createElement("style");css.type = "text/css";
css.innerHTML = "font-feature-settings: 'liga' 0, 'clig' 0;-moz-font-feature-settings: 'liga' 0, 'clig' 0;-ms-font-feature-settings: 'liga' 0, 'clig' 0;-o-font-feature-settings: 'liga' 0, 'clig' 0;-webkit-font-feature-settings: 'liga' 0, 'clig' 0;font-variant-ligatures: no-discretionary-ligatures;font-variant-ligatures: none;";
document.body.appendChild(css);
Brian, I see now why the spacing is off, but I don't know if it can be corrected. This is a line from the paths.js file which contains two ligatures. See all those numbers, I think they place each character in a particular spot. So if a one-character ligature is replaced with 2 or 3 letters, the other characters begin to overlap as they are occupying the same space.
[{"nodeType":"tspan","x":"10 15 21 25 31 34 40 47 54 57 61 67 72 78 81 87 93 96 105 108 111 114 117 124 130 133 140 143 150 156 160 166 173 177 180 184 188 195 205 208 212 219 225 230 236 239 245 251 257 267 274 277 283 288 291 294 300 307 314 317","y":47,"children":["care you receive will be dierent rom these examples, and "]The strange thing is that you dont have to download the font. So I dont think it is a security issue. The font is already embedded with the published files. It is also described in the css which font to use. And It works fine on fx an iPad or in Chrome. So Safari and Chrome are abel to read the css file and use the embedded font.
In the css it is also described to use an alternative font, In our case it should be an Sans Serif font, if the prefered font is not available. The strange font without F is not an Sans Serif and the spacing indicates that it is under no control from any script describing how the font should act.
I see that what you are trying to do is to describe the spacing to each letter in the mysterious font.
However that wont solve the issue that IE11 cant find the embedded font.
Susanne, the font does need to be downloaded, just like the rest of the course files. IE is blocking that download when particular security settings are enabled, as it should. I don't think the IE security setting affects Chrome or Safari, not that I've heard about. It's not that the font does not contain an "f", it does, it's just that Storyline is trying to display a special ligature character in place of the "f" and other characters in some places. I did not write the code in my previous message, that is from the published output of Storyline 3 where it is trying to place each character in a specific spot.
It looks like Storyline 2 used "Font.js" to include its fonts in the published output, which does not seem to be affected by disabling font downloads in IE. I'm trying to see if I can get that to work in Storyline 3, but that probably still will not help folks that also have the "Data URL" security setting enabled. I'll keep everyone updated if I make any progress.
Personally I think this is something Articulate could and should fix inside of storyline 360. Why are these ligatures being used I've never experienced this issue with Web Fonts. Is this purposely done to keep font licensing intact? Even if we had to use a web service like typekit to serve fonts I would be far happier than having this issue take place.
I agree!!
Kathy Cairns
Sr. Learning & Development Specialist
[Blue
Ligatures are used because it makes the type look better. https://typography.guru/journal/whats-a-ligature/
[Update: Better explanation here: https://www.fonts.com/content/learning/fontology/level-3/signs-and-symbols/ligatures-1 ]
I do agree that there might be a better way to implement the use of ligatures, right now they are hard embedded into the output, but ligatures are used all over the place, you just never realized you were looking at them (neither did I until this issue arose). If you have the IE security setting enabled to block font downloads, I'm not sure if any web service serving fonts would work.