Text Entry text appears different on a Mac
Sep 28, 2015
In one of my trainings, I'm creating a simulated environment that requires the learner to simulate typing code into a command line. I'm trying to re-create the look and feel of the command line interface by placing a text entry box over a screenshot of an actual command line interface populated with code. To maintain the simulation, it's very important that the text that is being typed in over my screenshot be in exactly the right place, and look similar to the text that is behind it on the screenshot.
This works great during the build, and looks fine when the web output of the course is viewed on a Windows machine (I tried it in IE, Chrome, and Firefox). However, when I view the same web output of the course on a Mac, the the text that I am typing into the text entry box is higher up on the screen and is bold. (The same thing happens in Firefox, Chrome, and Safari on Mac.) This throws off the look and feel of the entire simulation.
Articulate Support says that it has something to do with how the browsers render the text. Has anyone else had this problem? If so, have you found a workaround? It's very important that what is being typed stays where it should be, and looks the same as when I built it.
4 Replies
Thanks for sharing those links, Matthew. And Lara, if you would like to share your thoughts or input with our Product Development team, you are welcome to do so using this form.
Thanks Matthew, and thanks Ashley.
Matthew, while the support page that you provided may be related, I'm not positive that it addresses the issue that I am having. I'm not including variable references in the course anywhere; rather, the issue that I'm having is with the text appearing differently as it's being typed into the text box. Also, I originally thought that the change may have something to do with the font I was using (maybe it wasn't supported? etc.), BUT, the same thing happened when I tried other more universal fonts, like Arial. The text that is being typed in is not a different font; rather, it is the same font, but it is bold and it appears higher on the screen. See below for examples (these ones are in the font "Consolas," which is the font that is used throughout the course):
I don't know much about javascript, but I will look into the workaround that you provided. Even though it's not exactly the same issue, it may be related.
Hmm, interesting. Okay. Thanks for clearing that up, Matthew! If I find a solution or workaround other than the javascript suggestion, I'll post it to this thread.
We appreciate the clarification, Matthew, and yes, please feel free to share an update if you discover a solution that will work for you, Lara! :)
This discussion is closed. You can start a new discussion or contact Articulate Support.