Blurry text button

ajnsson8057

Hi!

I've used buttons with text in my Lectora course, and they all come out fuzzy. I can see in the output that they have been converted to png and that the quality of that png is not that good (even though I have tried not clicking in the check box for image compression in the publish settings and also to have it turned on but set to the highest quality). What can I do to make sure the text on the buttons are crisp, clear and fully readable?

Also - is there a difference in how the buttons are being shown when published as HTML versus SCORM?

/Anna

dunnjo98

Hi @ajnsson8057,

Do you have a drop shadow on the buttons by chance?  We noticed blurred buttons when a drop shadow was added.  A colleague of mine reached out to Trivantis and they said it is a known bug and there should be a fix in the next build. In the meantime, we are avoiding the drop shadow.

Hope this helps.

ajnsson8057

Hi!

No drop shadow anywhere that I can find. The text in the buttons just don't seem to be handled like text, but low resolution images. If we don't find a solution to this it seems we have to change from the brand typeface to one that is more readable when fuzzy for all states of all buttons on all pages in all languages, which will be a crazy big job. So, still hoping that someone knows how to not get fuzzy text buttons in Lectora. Was the known bug that a shadow was automatically added? When was that and how did you remove the shadow (if I somehow have missed an additional shadow setting)?

/Anna

jvalley4735

Are you using a custom font?

koreckiy

Are you using mac or a similar high pixel density monitor?

mdehaan2509

Same issue here. Just normal flat (some transparent) buttons, no dropshadows, no gradients or other fancy stuff. But the text becomes VERY fuzzy after publishing! Same for shapes with text. Font is Calibri and/or Calibri Light, and everything looks fine until I publish. That may be the most annoying part, that I have to redo almost all my buttons and shapes!

I've added a small screenshot with a normal textbox and a shape with text. The textbuttons are just as fuzzy. I hope this can be resolved because I love using transparent buttons in my menu's, but not when they look this horrible

Edit: The screenshot does not really do justice to the MASSIVE difference in crispness.. but the text is supposed to be the same color dark blue.

 

klaatu

Try this. Open up a preview of your problematic lesson in chrome (I know, it'll be blurry). Copy the localhost url in the address bar (probably http://localhost:3750/page_1.html). At the top right of the screen you will see your name or a little round icon that indicates you logged into chrome. Click this icon and select Guest. Paste in the URL and hit enter. Is it still blurry?

If that fixed the problem then you probably need to delete your user profile and create a new one.

By the way, this has been an issue with chrome since the removed direct write font rendering.

koreckiy

Guys, the only reason why buttons are not "crispy" is because when you are using buttons in Lectora.

You need to use text separately from button for crispy text.

If you need more guidance, you can contact me directly - [email protected] or skype - alexey.koreckiy

jcs315

I have been trying to figure out why my text and image buttons are blurry and I just discovered that it's a result of using a border or outline in any of the button states. As soon as I removed the border, the text or button image was crisp.

jvalley4735

I'm not seeing it as being documented anywhere. If you could please share your findings with the support team as a bug I'm sure they would be interested in investigating further.

tobias

Hi.

Has anybody figured a solution on the fact that Lectora is publishing the button as an image instead of text rendered in the browser?

A couple of workarounds (not solutions):

1. Build the button with three different objects: Shape, text and a transparend button
2. Make a button without text, add a text object above and  style it with css to allow click through.
3. Insert a div with plain text, style it with css and add actions as a normal button.

 

mnelson

I have this same problem. We shouldn't have to jump through all these hoops to make buttons look good. They should just work. It's a core function of any eLearning course to have buttons. Lectora should handle them perfectly and easily. It's ridiculous that we're up to version 18 and it's still an annoying issue.

timk

Just for info: The blurry button issue regularly appears when the browser zoom is not 100%.