Lectora 18 Blurry Text Buttons and Shadows

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 undefined 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.

Just curious - is it blurry across browsers?

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 undefined 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.

@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. :-)