Blurry/Fuzzy Text on buttons in Lectora 18

mmackinnon2873
Community Member Posts: 6 ☆ Roadie ☆
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.

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.

Tagged:
Comments
-
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?
Categories
- 35.8K All Categories
- 109 ✫ Announcements
- 33.1K Lectora®
- 31.1K Lectora Discussions
- 28.9K Lectora Desktop
- 2K Lectora Online
- 2K Lectora Feature Requests
- 71 Lectora User Groups
- 36 Lectora Accessibility User Group (LAUG)
- 22 ELB Learning Content
- 22 ELB Learning Content Discussions
- 321 CenarioVR®
- 188 CenarioVR Discussions
- 133 CenarioVR Feature Requests
- 41 Rockstar Learning Platform®
- 38 Rockstar Learning Platform Discussions
- 108 CourseMill®
- 108 CourseMill Discussions
- 47 ReviewLink®
- 47 ReviewLink Discussions
- 7 The Training Arcade®
- 7 The Training Arcade Discussions
- 934 All Things eLearning
- 36 eLearning Development
- 546 Learning Management System (LMS) Integration
- 332 Web Accessibility
- 1.2K ♪ The Green Room
- 9 Additional Learning Products