If you’re developing eLearning with Adobe Captivate Classic, take a close look at the text in your published HTML5 output.
Does it look just a little out of focus?
That’s the best way I can describe the problem. The text isn’t so blurry that it’s unreadable. In fact, you might not notice the problem immediately. But compare the published text with properly rendered browser text and the difference becomes obvious. Captivate Classic’s text can look slightly soft or fuzzy.
Here’s a simple slide created in Captivate Classic.
And here is how the text previews. Notice that the font is slightly out of focus.
I’ve confirmed the issue with Captivate Classic 11.8.3.8, and after quite a bit of testing, I’ve also confirmed two ways to deal with it.
First, It’s Not Your Project Resolution
One of the first things I suspected was project size.
My original project was 1024 x 768. That’s an older project size, so I wondered whether scaling the project on today’s larger displays was responsible for the slightly out-of-focus text.
I resized the project to 1280 x 720.
It made no difference.
I also created a brand-new Captivate Classic project containing a single slide with simple Arial text.
The published text was still slightly out of focus.
So let’s get this out of the way:
This problem has nothing to do with your Captivate project dimensions or resolution.
Changing a 1024 x 768 project to 1280 x 720, 1920 x 1080, or some other resolution isn’t the solution.
I also tested Scalable HTML Content, both enabled and disabled. That didn’t solve the problem either.
The issue followed the published content across different computers, browsers, operating systems, an LMS, and SCORM Cloud.
Solution #1: Upgrade the Project to Adobe Captivate 13.1 or Newer
This is my number-one recommendation.
If possible, upgrade your Captivate Classic project to Adobe Captivate 13.1 or newer.
I tested the same content after upgrading it to the new Captivate and confirmed that the slightly out-of-focus text problem goes away.
The text renders crisp and sharp.
If you’re maintaining an older Captivate Classic course and the project can be successfully upgraded, this is the solution I’d choose.
Of course, depending on the complexity of your Classic project, upgrading may not always be practical. Classic has features and workflows that don’t necessarily translate perfectly to the new Captivate.
Fortunately, if you need to remain in Classic, I found a workaround.
Solution #2: Add a Blank Variable to the Text
This one surprised me.
Create a user variable in Captivate Classic. For example:
vSharp
Leave its value blank.
Next, insert the variable reference into a Smart Shape containing text:
Preview the project again.
In my testing, the difference was immediate. The text that previously looked slightly out of looked better.
Because vSharp contains no value, learners don’t see anything extra. The variable simply sits invisibly inside the text.
There’s an Important Catch
Unfortunately, you cannot add $$vSharp$$ once to a slide and fix every text object on that slide. The variable reference has to be included in each affected text object. For example, if a slide contains five Smart Shapes with text, adding $$vSharp$$ to one Smart Shape fixes the rendering of that Smart Shape. The other four are unaffected.
Putting the variable in a separate object on the slide doesn’t fix the other objects, either. Nor can you simply put it on a Master Slide and expect all of the project’s text to become sharp.
That’s obviously not an appealing workaround if you have a large Captivate Classic project containing hundreds of text objects. It’s also why upgrading the project to Adobe Captivate 13.1 or newer remains my first recommendation.
Why Does Adding a Variable Work?
The behavior suggests that Captivate Classic uses a different rendering method when an object contains dynamic text.
With ordinary static text, Captivate Classic’s HTML5 output can make the characters appear slightly soft or out of focus.
Add a variable, however, and Captivate has to account for the possibility that the text could change while the course is running. That appears to cause Captivate to render the text differently.
The result is noticeably sharper text.
I want to emphasize that this is an explanation based on the behavior I’ve observed rather than documentation from Adobe. What I can confirm is the result: adding the variable fixes the problem in my testing.
Looking for Captivate training, mentoring, or support? I’ve got you covered!