From 29d28a9d46f9dab1a37a2bbafc612fe622a6b527 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 30 Jun 2025 14:20:42 -0700
Subject: [PATCH 1/6] Common: report width-native in layout-parameters

---
 xsl/pretext-common.xsl | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/xsl/pretext-common.xsl b/xsl/pretext-common.xsl
index ffbd5a4b37..4e9544feee 100644
--- a/xsl/pretext-common.xsl
+++ b/xsl/pretext-common.xsl
@@ -5462,6 +5462,9 @@ Book (with parts), "section" at level 3
     <centered>
         <xsl:value-of select="$centered" />
     </centered>
+    <width-native>
+        <xsl:value-of select="$normalized-width"/>
+    </width-native>
 
     <!-- This will be useful in a debugging switch -->
 <!--

From 701da848cdc89408e8ba0e3a57c5ef3977b69d64 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 30 Jun 2025 14:22:40 -0700
Subject: [PATCH 2/6] HTML: image children of side-by-side get image-box

---
 xsl/pretext-html.xsl | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl
index f7a9624b59..ca63a89caa 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -5856,7 +5856,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 <!-- fill this box horizontally, with necessary vertical dimension -->
 <!-- to preserve the aspect ratio.  This div is also used to       -->
 <!-- provide vertical spacing from its surroundings.               -->
-<xsl:template match="image[not(ancestor::sidebyside)]">
+<xsl:template match="image">
     <xsl:variable name="rtf-layout">
         <xsl:apply-templates select="." mode="layout-parameters" />
     </xsl:variable>
@@ -5884,15 +5884,6 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     </pre>
 </xsl:template>
 
-<!-- The div for a panel of a sidebyside will provide  -->
-<!-- the constraint/positioning of the contained image -->
-<!-- If the panel is a PTX "figure" then there will be -->
-<!-- an intermediate HTML "figure" which will not      -->
-<!-- interfere with the panel's constraints            -->
-<xsl:template match="image[ancestor::sidebyside]">
-    <xsl:apply-templates select="." mode="image-inclusion" />
-</xsl:template>
-
 <!-- With a @source attribute, without an extension, -->
 <!--   we presume an SVG has been manufactured       -->
 <!-- With a @source attribute, with an extension,    -->

From e0b22b69bd517f84137068fd0221f7c95228d177 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 30 Jun 2025 14:40:29 -0700
Subject: [PATCH 3/6] HTML: image without width deisplayed at natural size if
 possible

---
 xsl/pretext-html.xsl | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl
index ca63a89caa..348fb0696c 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -5862,7 +5862,13 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     </xsl:variable>
     <xsl:variable name="layout" select="exsl:node-set($rtf-layout)" />
     <!-- div is constraint/positioning for contained image -->
-    <div class="image-box">
+    <div>
+        <xsl:attribute name="class">
+            <xsl:text>image-box</xsl:text>
+            <xsl:if test="$layout/width-native = 'auto'">
+                <xsl:text> image-box__auto-width</xsl:text>
+            </xsl:if>
+        </xsl:attribute>
         <xsl:attribute name="style">
             <xsl:text>width: </xsl:text>
             <xsl:value-of select="$layout/width"/>

From 1249ccc817c59b205d1bd976d995546ad65c1a27 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 30 Jun 2025 14:41:24 -0700
Subject: [PATCH 4/6] CSS: style natural size images

---
 css/components/elements/_media.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/css/components/elements/_media.scss b/css/components/elements/_media.scss
index 4f20f7571c..0dda60e841 100644
--- a/css/components/elements/_media.scss
+++ b/css/components/elements/_media.scss
@@ -16,10 +16,20 @@ iframe.asymptote,
 
 // images in containers should grow to fit space
 .image-box img,
-img.contained {
+.image-box svg {
     width: 100%;
 }
 
+.image-box.image-box__auto-width img,
+.image-box.image-box__auto-width svg
+{
+    max-width: 100%;
+    width: auto;
+    margin-left: auto;
+    display: block;
+    margin-right: auto;
+}
+
 // ---------------------------------------------
 // images
 .ptx-content img, .ptx-content svg {

From e692eacec95debccb1039702036638e7319a9d45 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 30 Jun 2025 14:41:55 -0700
Subject: [PATCH 5/6] Latex: images without width displayed at natural size if
 possible

---
 xsl/pretext-latex-common.xsl | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/xsl/pretext-latex-common.xsl b/xsl/pretext-latex-common.xsl
index a803112644..c3b6e2ad54 100644
--- a/xsl/pretext-latex-common.xsl
+++ b/xsl/pretext-latex-common.xsl
@@ -405,6 +405,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     <xsl:call-template name="chapter-start-number"/>
     <xsl:call-template name="equation-numbering"/>
     <xsl:call-template name="image-tcolorbox"/>
+    <xsl:call-template name="image-sizing"/>
     <xsl:call-template name="tables"/>
     <xsl:call-template name="footnote-numbering"/>
     <xsl:call-template name="font-awesome"/>
@@ -1384,6 +1385,24 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     </xsl:if>
 </xsl:template>
 
+<!-- image sizing support -->
+<xsl:template name="image-sizing">
+    <xsl:if test="$document-root//image">
+        <xsl:text>%% Define maxwidth variable for includegraphics&#xa;</xsl:text>
+        <xsl:text>%% recipe from https://texfaq.org/FAQ-grmaxwidth &#xa;</xsl:text>
+        <xsl:text>\makeatletter&#xa;</xsl:text>
+        
+        <xsl:text>\def\maxwidth{%&#xa;</xsl:text>
+        <xsl:text>  \ifdim\Gin@nat@width&gt;\linewidth&#xa;</xsl:text>
+        <xsl:text>    \linewidth&#xa;</xsl:text>
+        <xsl:text>  \else&#xa;</xsl:text>
+        <xsl:text>    \Gin@nat@width&#xa;</xsl:text>
+        <xsl:text>  \fi&#xa;</xsl:text>
+        <xsl:text>}&#xa;</xsl:text>
+        <xsl:text>\makeatother&#xa;</xsl:text>
+    </xsl:if>
+</xsl:template>
+
 <!-- tcolorbox for images -->
 <xsl:template name="image-tcolorbox">
     <xsl:if test="$document-root//image">
@@ -1391,7 +1410,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
         <xsl:text>%% arguments are left-margin, width, right-margin, as multiples of&#xa;</xsl:text>
         <xsl:text>%% \linewidth, and are guaranteed to be positive and sum to 1.0&#xa;</xsl:text>
         <xsl:text>\tcbset{ imagestyle/.style={bwminimalstyle} }&#xa;</xsl:text>
-        <xsl:text>\NewTColorBox{tcbimage}{mmm}{imagestyle,left skip=#1\linewidth,width=#2\linewidth}&#xa;</xsl:text>
+        <xsl:text>\NewTColorBox{tcbimage}{mmm}{imagestyle,left skip=#1\linewidth,width=#2\linewidth,halign=center}&#xa;</xsl:text>
         <xsl:text>%% Wrapper environment for tcbimage environment with a fourth argument&#xa;</xsl:text>
         <xsl:text>%% Fourth argument, if nonempty, is a vertical space adjustment&#xa;</xsl:text>
         <xsl:text>%% and implies image will be preceded by \leavevmode\nopagebreak&#xa;</xsl:text>
@@ -9294,7 +9313,15 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
             </xsl:with-param>
         </xsl:call-template>
     </xsl:variable>
-    <xsl:text>\includegraphics[width=\linewidth</xsl:text>
+    <xsl:text>\includegraphics[width=</xsl:text>
+    <xsl:choose>
+        <xsl:when test="@width">
+            <xsl:text>\linewidth</xsl:text>
+        </xsl:when>
+        <xsl:otherwise>
+            <xsl:text>\maxwidth</xsl:text>
+        </xsl:otherwise>
+    </xsl:choose>
     <xsl:if test="@rotate">
       <xsl:text>,angle=</xsl:text>
       <xsl:value-of select="@rotate"/>

From 0fe474202d242ee398fbec5a23b7ab5545888ce5 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 7 Jul 2025 13:43:46 -0700
Subject: [PATCH 6/6] Sample Article: update graphics samples with width
 options

---
 .../media/images/new-folder-screenshot.png    | Bin 0 -> 7291 bytes
 examples/sample-article/sample-article.xml    |  23 +++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 examples/sample-article/media/images/new-folder-screenshot.png

diff --git a/examples/sample-article/media/images/new-folder-screenshot.png b/examples/sample-article/media/images/new-folder-screenshot.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f20d364f468e37ad231d8fcde8ea1f9fee6496f
GIT binary patch
literal 7291
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

literal 0
HcmV?d00001

diff --git a/examples/sample-article/sample-article.xml b/examples/sample-article/sample-article.xml
index 07af90cb74..6287889731 100644
--- a/examples/sample-article/sample-article.xml
+++ b/examples/sample-article/sample-article.xml
@@ -3306,6 +3306,23 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
                     <image source="images/nz-landscape.jpg" width="80%"/>
                 </figure>
 
+                <p>Images that are given a <attr>width</attr> (always as a percentage) are scaled to that percentage of their container. Images without a <attr>width</attr> will be rendered at their natural size if possible and as large as possible if not. This can be seen in these three renderings of the same screenshot:</p>
+
+                <figure>
+                    <caption>A new folder with <c>width="100%"</c></caption>
+                    <image source="images/new-folder-screenshot.png" width="100%"/>
+                </figure>
+
+                <figure>
+                    <caption>A new folder with <c>width="50%"</c></caption>
+                    <image source="images/new-folder-screenshot.png" width="50%"/>
+                </figure>
+
+                <figure>
+                    <caption>A new folder with no <attr>width</attr></caption>
+                    <image source="images/new-folder-screenshot.png"/>
+                </figure>
+
                 <p>If you have existing images that are vector graphics, then PDF format works best for <latex/> output and SVG format works best for HTML.  The utility <c>pdf2svg</c> works well for converting PDF to SVG.  In this case, specify your source as a filename, but leave off the file extension, and the appropriate version will be used for the current output format.</p>
 
                 <p>The image below is provided from a PDF file in <latex/> output, and was converted to an SVG for use with the HTML output.  It has been explicitly scaled to a width of 65% of the text width.</p>
@@ -3347,7 +3364,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 
                 <figure>
                     <caption>Solution to a differential equation</caption>
-                    <image width="60%">
+                    <image>
                         <prefigure label="prefigure-diffeq"
                                    xmlns="https://prefigure.org">
                             <diagram dimensions="(300,300)" margins="5">
@@ -3375,7 +3392,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 
                 <p>This next diagram employs some <latex/> macros that are defined in the usual way in <tag>docinfo</tag> and are employed to produce the names of some vectors in the labels.  The blue line is colored blue by a global <prefigure/> declaration, also in <tag>docinfo</tag>.</p>
 
-                <image width="60%">
+                <image>
                     <prefigure label="prefigure-projection"
                                xmlns="https://prefigure.org">
                         <diagram dimensions="(300,300)" margins="5">
@@ -3418,7 +3435,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 
                 <p>The next <prefigure/> diagram is authored with annotations, arranged in a hierarchy of increasing refinement and detail.  Each identified graphical component will read its annotation and show it on the screen below the diagram.  When a reader clicks on the image, a high-level summary will be read using the author-provided annotation.  The down and up arrow keys enable a reader to explore the diagram in more or less detail while the right and left arrow keys reveal features at the same level of detail.  When the focus is on the graph, pressing "O" will produce a sonification of the graph.</p>
 
-                <image width="60%">
+                <image>
                     <prefigure label="prefigure-tangent"
                                xmlns="https://prefigure.org">
                         <diagram dimensions="(300,300)" margins="5">