SL360 - Issues with Variables and Font Changes Viewing on Mobile
Jan 10, 2017
Articulate Staff - Reference Case #00987205
Our modules that have been upgraded from SL2 to SL360 have had issues with random font changes when viewing on mobile devices. I submitted a case and got a little bit of feedback... wanting to see if there are other answers from the community. Here are our issues:
1) Variable text that is smaller than size 9 has a drastic format change when viewed on mobile device. It affects spacing between lines and makes the font roughly size 4. The fix was to increase the font size to 10 - no more spacing issues between lines and the font size stayed the right size.
2) Spacing within textboxes that have variables is altered when viewed on mobile devices. For example, we have emails in one of our modules and have To: %coworker%. In the dev file, there is a tab between To: and the person. This tab is consistent when viewed on a desktop but is missing when viewed on a mobile device. Not a show-stopper, but annoying nonetheless.
3) Another example of spacing within textboxes with variables. Three textboxes, all left-aligned, exact margins. One has a variable. When launched, on mobile OR desktop, the internal margin of the textbox with the variable decreases, creating what appears to be un-aligned boxes.
4) Variable text within a rectangle, with established formatting (adjusted margins and specific alignment - centered) does not hold the formatting when viewed on a mobile device (evident in SL2 and SL360). The fix was to add a transparent textbox with the variable text on top of the colored rectangle in the desired position. This is a fix, yes, but makes development much more cumbersome when there are animations and triggers attached to the rectangle and variable text box.
Note: Modules are published in SL2 with HTML5 output and in SL360 with the HTML5/Flash fallback setting.
12 Replies
I think the problem might be that you are using alignment techniques that don't work well in mobile. The tabs and adjusted margins etc. Someone who designs responsive websites would know better than me though. Mind you Storyline doesn't really work like a responsive block. With regard to the variable problem there have been many discussions over the years on that problem. I think the font type is important. This link may help https://community.articulate.com/discussions/articulate-storyline/variables-changing-the-font plus the link to here https://articulate.com/support/article/custom-fonts-arent-supported-for-variable-references-in-html5-or-articulate-mobile-player
Tiffany,
Just checking to see if you found a solution to your issue as well as a cause? We are experiencing something that sounds very similar to what you are describing in numbers 3 and 4 above in our SL 2 converted to 360 files. Looking for any suggestions on how to fix this!
Thank you!
Brynne
Brynne,
Unfortunately, the only fix we were able to find was removing text other than the variable from the text box. If the variable was the only text within the textbox, it holds the formatting.
For instance:
Originally, we had "From: %customer%" in one textbox. We ended up having to break them into two... "From:" and "%customer%"
Thank you, Tiffany! What about the problem desribed in number 4?
Brynne, We stuck with that workaround. So, instead of typing within a rectangle, we put a transparent textbox on top of the rectangle. Honestly, this issue came up at the beginning of our development of a portfolio of 14 modules, so when we found the fix, we stuck with it throughout the development period. I haven't had the opportunity to go in and re-test the original method to see if recent SL updates have fixed the issue.
Thank you, Tiffany!
I got a note from Articulate yesterday that the most recent update was supposed to fix this issue.
Thanks Tiffany! We were seeing a problem in Storyline 360 where font size and spacing didn't look correct in the responsive player if the text had a variable reference, but that was fixed in our latest update.
Just launch the Articulate 360 desktop app on your computer and click the Update button for each application. Details here.
Please let me know if you have any questions!
Alyssa, So we're running into an issue now where there are discrepancies in the font when launched into review from developer 1 and launched into review from developer 2 - both being viewed by developer 3. Developer 1's version has very large variable text. Developer 2's version is consistent with other text in the module, but the alignment is off, as if the margins within the textbox have been changed. All three developers have the most up-to-date software. Thoughts?
Hi Tiffany,
Certainly a confusing set up for them to all see it differently - so bear with me and some clarifying questions:
Let me know any of the information you can gather above and we'll continue from there.
So, here's the update: We entered a case and Articulate told us to uninstall and reinstall. That didn't work. Then they wanted us to have IT create a new profile on the computer to try it out. IT will not do that for us because profiles are tied to AD. We did quite a bit of searching on the internet and found someone with a similar issue. That led us to the attached articulate post that says Storyline requires Microsoft Windows be configured with 96 DPI (100%). This developer had a setting of 125%. The modification fixed the issue.
I do want to answer your questions though - for future reference:
* So Developer 1 and 2 are both publishing to Articulate Review, and Developer 3 is viewing them? Yes
* Do you know what browsers they're viewing the course in? All the same - Chrome
* Is this a newly uploaded copy to Articulate Review, or a new course all together? Both doing newly uploaded courses (not new versions)
* How do the courses appear to Developer 1 and 2, compared to what Developer 3 sees (or each other)? All three developers see the same discrepancies between the two on their own computers.
* Do all the developers have the same set ups in terms of Windows version, latest Storyline updates, fonts installed? Same fonts (font in question was Arial), same Windows versions, same Storyline updates, same computers, same office : - )
Thanks Tiffany for that update and going through those steps!
DPI is one of the pieces that can change how things display and something to keep in mind in terms of Windows settings - so glad our team was able to help you track that down.
This discussion is closed. You can start a new discussion or contact Articulate Support.