Explore the community Forums Lectora Lectora Questions & Answers Lectora 18 Blurry Text Buttons and Shadows

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #414512 Score: 0
    Profile photo of Bill Miller
    Bill Miller
    Member
    beginner
    intermediate
    advanced
    LUC17 Attendee
    wise owl
    curious george
    contributor
    1 pt
    @bmiller2465

    The Lectora 18 buttons are blurry as all getup, regardless of shape and state, when Published.  (When previewed in the browser they look great.)

    Also, shadows on any object aren’t appearing when published.  (Once again, when previewed the shadows are there and look fine.)

    There are workarounds for both of these issues, but I thought you should know so they can be fixed and patched.

    • This topic was modified 2 months, 4 weeks ago by Profile photo of Bill Miller Bill Miller.
    #414518 Score: 0
    Profile photo of Bill Miller
    Bill Miller
    Member
    beginner
    intermediate
    advanced
    LUC17 Attendee
    wise owl
    curious george
    contributor
    1 pt
    @bmiller2465

    Update…

    I swapped out the Lectora generated buttons for graphical buttons (PNGs) I created in Inkscape.  I still had the same problem with things coming out “fuzzy”.  It turns out this was caused by the “Scale to fit” option in the Publish window.  When I turn that option off, and re-publish I don’t have the same issue.

    With graphical buttons this makes a little sense, as the more you scale the PNGs you’re likely to get distortion.  PNGs, JPGs, etc… don’t always scale well.  Although, I shall admit I thought it was a bit strange that the published buttons appear in SVG <PATH> tags, and the graphic is used as a background fill.  I should think a standard tag with a bit of CSS would have been sufficient to render them. I’m sure you have your reasons for doing it this way.  (Probably a backwards-compatibility thing with IE or something.)

    With the Lectora generated buttons, this phenomena does perplex me a little bit.  I didn’t look at the coding of the Lectora generated buttons that in-depth, but if they’re truly rendered using SVG I should think they would scale better with no blur.  #Strange

    In either case, still no shadows on publish.

    #414529 Score: 0
    Profile photo of Adam Cain
    Adam Cain
    Member
    beginner
    intermediate
    profile
    picture perfect
    wise owl
    friend finder
    Group Member
    curious george
    contributor
    14 pts
    @cainam

    Just curious – is it blurry across browsers?

    #414602 Score: 1
    Profile photo of Zachary Liquorman
    Zachary Liquorman
    Member
    beginner
    intermediate
    friend finder
    profile
    curious george
    wise owl
    contributor
    picture perfect
    8 pts
    @zliquorman1276

    I swapped out the Lectora generated buttons for graphical buttons (PNGs) I created in Inkscape.

    Why not just use the SVG? Since Lectora won’t let you import an SVG file (seriously, why!?), just copy the <svg> code from the .svg file to an HTML object in Lectora, and then just add whatever code is needed for that button’s functionality.

    With the Lectora generated buttons, this phenomena does perplex me a little bit.  I didn’t look at the coding of the Lectora generated buttons that in-depth, but if they’re truly rendered using SVG I should think they would scale better with no blur.  #Strange

    The Lectora-included buttons may be rendered via SVG, but that isn’t what makes them salable. SVG is just the code format, not the method. Your PNGs are still just raster images, they’re just being added to the HTML code within SVG tags (as a data URI if I recall correctly, which is essentially a coded “snapshot” of the image the browser can interpret).

    More info on image scalability and vector vs raster images:

    Image scalability that vector graphics are preferred for comes from the way that vector images are defined in code. Where a data URI is like a “snapshot” of the image, a vector image is a data file (XML) that defines how to draw the image (essentially). SVG code is essentially just a way to save image data (why Lectora places its raster images’ code inside SVG tags though is a mystery to me. Maybe the devs intend to convert the base-included graphics to vector images at some point?). A vector image creation program (e.g. Inkscape) writes the image in code as (essentially) a series of paths and coordinates and color codes (formatted as XML data).

    It’s like defining an image by equations that define the lines, coordinates for locations relative to each other, color codes, etc. Viewing an image in Inkscape is like looking at only part of an equation on a graph (e.g. only viewing the graph of values for the equation y=x^2 for values of x between -5 and 5). You can scale it up or down by any amount because you have the ‘equation’ (i.e. code) which defines it. A raster image format like PNG is like saving the same values of the equation y=x^2 for values of x between -5 and 5, but only the values and not the equation itself.

    That some raster formats scale better than others is a reflection of how much image data they can store and how compression is handled. PNG, for examples uses a lossess image compression algorithm, so the file size can be reduced without any loss of quality from the original image, but that image cannot “gain quality” if you scale it up. Whereas JPEG can be compressed to a smaller file size, but will lose some of its image quality in the process.

    This post has received 1 vote up.
    #414728 Score: 0
    Profile photo of Bill Miller
    Bill Miller
    Member
    beginner
    intermediate
    advanced
    LUC17 Attendee
    wise owl
    curious george
    contributor
    1 pt
    @bmiller2465

    @adam,

    That is a good question.  I looked at Chrome, but not Firefox or Edge.  I’ll take a peek.

    We don’t bother with IE anymore, thankfully.  That headache is gone.  🙂

    • This reply was modified 2 months, 3 weeks ago by Profile photo of Bill Miller Bill Miller.
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.