Text Button Font is blurry

sbristow7364
sbristow7364 Community Member Posts: 8
Hi, I created a text button. Custom yellow background. Black text, Arial size 20. In preview mode it looks fine, but when i preview it in a browser or i publish it, it's blurry.

The text boxes are fine, it just seems to be the buttons themselves.

Any ideas? Thanks!

 

Comments

  • klaatu
    klaatu Community Member Posts: 988
    I am unable to duplicate. Can you perhaps upload a sample instead of a screenshot?
  • sbristow7364
    sbristow7364 Community Member Posts: 8
    Hi Darrel,

    Absolutely, attached.
  • klaatu
    klaatu Community Member Posts: 988
    Can you upload the awt file?
  • sbristow7364
    sbristow7364 Community Member Posts: 8
    It's in the second zip - Blurry-Buttons-1.zip - it wouldn't let me upload it directly. Thanks again!
  • sbristow7364
    sbristow7364 Community Member Posts: 8
    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.
  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    What version of Lectora are you using and what's your desired output?  HTML versus SCORM? Chrome, IE, Firefox, all?
  • sbristow7364
    sbristow7364 Community Member Posts: 8
    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!
  • danrichards
    danrichards Community Member Posts: 1 ♪ Opening Act ♪
    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.
  • carlfink
    carlfink Community Member Posts: 971 ✭ Legend ✭
    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.
  • teampink
    teampink Community Member Posts: 1
    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.
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • davidcm
    davidcm Community Member Posts: 21 ♪ Opening Act ♪
    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.
  • klaatu
    klaatu Community Member Posts: 988
    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.

     

     
  • davidcm
    davidcm Community Member Posts: 21 ♪ Opening Act ♪
    Thanks, Darrel. That's really helpful info. Have a great day.
  • nwilliams3743
    nwilliams3743 Community Member Posts: 74
    Where do you add the text for the button if its added as a custom div html extension?
  • klaatu
    klaatu Community Member Posts: 988
    Select the div and click edit in the HTML extension box on the ribbon.
  • davidcm
    davidcm Community Member Posts: 21 ♪ Opening Act ♪
    Can screen readers, like JAWS and ZoomText, read these kinds of butttons?
  • web-foley
    web-foley Community Member Posts: 55 ✶ Headliner ✶
    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.
  • mkia
    mkia Community Member Posts: 38
    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.

     
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 601 eLearning ROCKSTAR Admin Team
    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.