Display images without width at natural size

[ascholerChemeketa]

Preliminary implementation of defaulting to natural width instead of 100% when images do not have a width specified.

Reasons/situations in which this is preferred:

• Raster images - especially things like screenshots - display most clearly at natural width.
• When multiple images have corresponding graphical elements, it is preferrable that those elements are the same size in all diagrams. 100% will not result in this unless the images have the exact same dimensions.
• When images have text, it may be desirable for the size of that text to match text in the surrounding text.
• In HTML, text renders best at fixed point sizes. When it is scaled so that the text size is something like 12.3943px, clarity of the text suffers.

This implementation is a minimally invasive approach. It leaves the existing image dimension reporting template in place, but has it return a new value as part of its results: width-native which can be used to figure out if the 100% width is authored or produced by the template. Individual rendering templates can then pick whether to use 100% or auto width.

[ascholerChemeketa]

@davidaustinm - if you get a chance, I could use some advice on identifying the image portion of pretext figures. The code as is works with unanotated Prefigure diagrams in the SA, but does not on annotated ones like prefigure-tangent.

I can fix that particular case pretty easily, but if you have some advice on the possible locations the svg actually ends up in within the diagram, it might help me avoid similar situations from slipping through the cracks on my initial implementation.

No hurries, this is not likely to get Rob's attention for a little bit.

[davidaustinm]

I imagine you're seeing that annotated diagrams appear at roughly 80% of their natural width. This is because they are loaded by the diagcess library, which adds 10% to all sides of the SVG's viewBox. This is appropriate when a reader is exploring a diagram, but I've asked @zorkow, who is the author of diagcess, to disable this feature when the diagram is inactive, e.g. when it's first loaded onto a page. I'm hoping that we have a new version pretty soon, and that will change the behavior you see. I'll also be making a small change to PreFigure output at that time, which I don't think will affect you. I can send an update when all of this is in place. Is this what you need to know right now?

[ascholerChemeketa]

Thanks @davidaustinm That is helpful. I hadn't gotten to that issue, but I am sure I would have.

The difference I was currently focused on is that for an annotated image, the svg data is in:

<div class="image-box">
   <div class="ChemAccess-element">
      <div class="svg">
         <svg>

Where as for one without annotation:

<div class="image-box">
      <img>

Are those the only two cases?

[davidaustinm]

Yes, those are the only two cases. The second is likely pretty straightforward. In the first case, diagcess loads the SVG and performs some modifications so you may be best served waiting until the new version is available. I'll ping you when it's in place.

[ascholerChemeketa]

Note - this also fixes issue reported here:
https://groups.google.com/d/msgid/pretext-dev/CALMYOnd%2BnnxaV5MuhD%3DrwRiKMbQcs0JK01NxO3BoTNkWgr%3DwBQ%40mail.gmail.com?utm_medium=email&utm_source=footer

[ascholerChemeketa]

Updated to hit current implementation of annotated PreFigure images. I think it is likely to work with whatever gets modified in those.

Updated SA to not specify @width on the PreFigure images.

Added a sample to SA graphics section with rendering of screenshots.

Preview:
https://computerscience.chemeketa.edu/ascholer/pretext-test/images/section-graphics.html

[davidaustinm]

Thanks, Andrew. You can see how the annotated PreFigure diagram is scaled due to some changes in the viewBox made by diagcess. That change should go away in the new diagcess. I'll let you know when it's available though I don't think it will involve much, if any, change on your part. Thanks again.

[kcrisman]

Just curious to know if you've tested it on the revealjs conversion. I had to hack something to get images to appear the size I wanted in slides, and some (good) somewhat recent updates to that conversion broke that hack, so I'm wondering whether this helps that situation, particularly in side-by-side situations. (No pressure to test, just curious as to whether you happen to have done so.)

…

Message ID: ***@***.***>

[ascholerChemeketa]

@kcrisman - It does not appear to affect images in revealjs. The revealjs CSS is completely separated from the normal HTML CSS.

The only modification to the HTML that might affect reveal is the addition of a <div class="image-box"> around images in sidebysides. That has no effect I can see on the revealJS rendering.

[kcrisman]

@kcrisman <https://github.com/kcrisman> - It does not appear to affect images in revealjs. The revealjs CSS is completely separated from the normal HTML CSS. The only modification to the HTML that might affect reveal is the addition of a <div class="image-box"> around images in sidebysides. That has no effect I can see on the revealJS rendering.

Interesting; thank you!