Text Button Font is blurry

I've been building in responsive design and it seems that in IE when I make the window smaller, then maximize it again, it stops being blurry.

Can you upload the awt file?

I am unable to duplicate. Can you perhaps upload a sample instead of a screenshot?

It's in the second zip - Blurry-Buttons-1.zip - it wouldn't let me upload it directly. Thanks again!

Hi Darrel,

Absolutely, attached.

What version of Lectora are you using and what's your desired output? HTML versus SCORM? Chrome, IE, Firefox, all?

Hi all, we think we found the issue. It was because there was shadowing on the text buttons. Once we removed the shadowing, the buttons were much crisper!

I see the issue in all common browsers with or without a shadow. When viewed at 100% zoom level in the browsers it seems pretty crisp. As soon as I zoom in or out it gets blurry. I've tried Arial and Lucida Sans Unicode font on the buttons.

Buttons seem to be rendered as graphics (not as HTML buttons) and since the text is a bitmap graphic, zooming it will screw up the appearance.

Build your own buttons. They will be much nicer looking and you'll have complete control over every aspect of styling (including transitions and transformations if you'd like) and zero weight.

I'm having this same issue. I was previously working in Lectora 11.3.2 and recently upgraded to Lectora 17. I opened a project built in Lectora 11 and noticed the text in all of my buttons was very blurry on preview and publish and in the LMS. It's not only the buttons, all the images are also fuzzy. This same project looks great in Lectora 11. I contacted Lectora Support in December and they have not been helpful and now completely unresponsive. Has anyone found a fix to this issue? This is causing a real problem to my project.

Thanks for uploading the zip file. Could you let me know how you created the buttons? I've found creating text buttons in Photoshop isn't much better than in Lectora.

Thanks, Darrel. That's really helpful info. Have a great day.

Hi, David. The button is added as an HTML extension (custom DIV) and styled with external CSS. There are no image files required. If you are unfamiliar with CSS or even if you're an expert I suggest trying Enjoy CSS. Enjoy CSS is an online CSS generator that uses a Graphical User Interface. You design your element, in this case a button, with simple tools and it spits out the necessary code for you to copy and paste. Very simple, efficient and time saving.

The benefits to having buttons created in this manner are numerous. Two that jump right out are almost ZERO weight and the having the ability to change any style of the button at any time.

undefined

Where do you add the text for the button if its added as a custom div html extension?

Select the div and click edit in the HTML extension box on the ribbon.

Can screen readers, like JAWS and ZoomText, read these kinds of butttons?

Commenting to share my frustration that Trivantis hasn't addressed this. The solution shouldn't be "make your own custom images" or "create your own CSS". The Lectora 18 version I'm currently using bloats a published course with dozens of text blurry PNG buttons, (not to mention the duplication of every button instance of the same (or identical) source item).

If most of these can be fixed with CSS why is Trivantis generating PNGs in the first place, I can't really see a need for a feature that takes a non-image based item and needlessly renders an image for it. Displaying items that can be generated (like buttons) without images is pretty much the go-to for web for more than a decade. Can you imaging if this Trivantis Community Forum was built with Lectora18? ...each list text item under your name would be 4 separate image states/images of blurry selections (Activity, Profile Notifications etc.).

This is creating issues for accessibility too, where heavy customization can cause an inconsistent user experience for those with accessibility devices, not to mention the overall clarity of the text.

We shouldn't be discouraged from using the tools inherent build features.

Hopefully rendered image buttons will disappear in an update soon.

-Darrell.

I agree...if there is a function to insert a button and to create different button states, it would be nice if this function could work without additional coding.

I am developing training at the moment in v18, I haven't been playing with Lectora for a while, and I forgot this blurry buttons moment, and I got so frustrated because I was expecting it to work. With several features, I have this argh moment, where I have to do a workaround because it doesn't work the way you expect it.

undefined

The blurry text issue was fixed in v19 we are sorry this had been an issue for so long.

The multiple image files is remnants of supporting IE 8 which we supported up until late last year. We will work on getting removing the code that generates all those extra files.