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:
0
Categories
- 34 ✫ Announcements
- 6 ✪ Contests
- 34K eLearning Brothers® Products
- 1 AssetLibrary™
- AssetLibrary Discussions
- 1 AssetLibrary Feature Requests
- 37 CenarioVR®
- 102 CenarioVR Discussions
- 55 CenarioVR Feature Requests
- 1 CourseMill®
- 101 CourseMill Discussions
- 1 KnowledgeLink®
- KnowledgeLink Discussions
- 1 KnowledgeLink Feature Requests
- 66 Lectora®
- 1.1K Lectora Discussions
- 1.9K Lectora Feature Requests
- 53 Lectora User Groups
- 4 Off-the-Shelf Course Library
- 3 Off-the-Shelf Course Library Discussions
- 1 Off-the-Shelf Course Library Feature Requests
- ReviewLink®
- 21 ReviewLink Discussions
- 12 ReviewLink Suggestions
- 1 The Training Arcade®
- 1 The Training Arcade Discussions
- The Training Arcade Feature Requests
- 7 Additional Learning Products
- 2 Adobe®
- 2 Articulate®
- 1 Camtasia®
- Docebo®
- 1 iSpring®
- 1 Microsoft® PowerPoint®
- 288 All Things eLearning
- 3 Course Development Showcase
- 1 eLearning Brothers® Downloads
- 1 Compliance Training
- 4 eLearning Development
- eLearning Game Design
- 7 Instructional Design
- 264 Learning Management System (LMS) Integration
- 2 Mobile Learning
- 2 Visual Design
- 317 Web Accessibility
- 579 ♪ The Green Room
- 2 ♡ Community Feedback
The Big Launch - Exciting News From eLearning Brothers
eLearning Brothers is all set to rock the eLearning world in 2021, and we want to let you in on the plans! Join us for The Big Launch event, where you’ll hear from company leaders like Andrew Scivally, Co-founder and CEO, Christian Weibell, CPO, and more special guest stars. We’ve got a lot of eLearning awesomeness up our sleeve—you won’t want to miss The Big Launch.
REGISTER NOW
Comments