Blurry/Fuzzy Text on buttons in Lectora 18

mmackinnon2873

Have been encountering a bug in Lectora 18 for a while now and was wondering if anyone had any fixes or better work arounds.

Steps to replicate bug:
1. Create a button in Lectora, add text to that button.
2. There are lots of different styles that cause the fuzzy text, but this button will be styled as follows:
- Normal: Type = Shape (rounded rectangle), Fill = Solid blue, Outline weight = 1, Outline colour = Blue, Font = Calibri 16pt Bold White Center Align
- Over: Type = Auto
- Down: Type = Auto, (Note that Outline weight is 2)
- Disabled: Type = Custom, Fill = Transparent, Outline Weight = 0, Opacity = 100, Font = Calibri 16pt Bold Black Center Align
4. Add an action to the Button so that it state is set to Disabled when it is clicked.
5. Now publish/preview in browser and see that the font gets blurry/fuzzy when it is in the Over or Disabled State.

Screenshot:


From what I have gathered through testing, it seems like the buttons size is being incorrectly calculated when it is published possibly in that it is not including the thickness of the shape outline as it is published.

My current workaround is to:
A. Make sure that each state of the Button has the same Outline weight. (Downside is that this limits available design)
B. Create each button state in an external program. (Downside is that this makes adjusting or reworking the design significantly slower)
C. Ignore the fuzzy text. (Not ideal)

Here is a more extreme version of the button, where the outline weight of the over state has been set to 20. Notice that the rounded rectangle is being clipped to a rectangle and that the font size has been significantly reduced.


EDIT:
Just to add in one thing I noticed while poking around with dev tools, it seems like this issue is related to a size calculation error as the size of the transparent .png that contains the buttons text does not match the size of the button.

wheels

We refactored the way this is done in v19 so that the text is not blurry and an image is no longer used.

davidcm

I find buttons that consist of images are still blurry in L19. In the attached image, the button in English on the left consists of 3 jpeg files (created in PowerPoint). It's not as crisp as the image in French, which isn't a button. Any idea how to make buttons crisper?