Skip to content

Display images without width at natural size #2578

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ascholerChemeketa wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Display images without width at natural size #2578

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
29d28a9
Common: report width-native in layout-parameters
ascholerChemeketa Jun 30, 2025
701da84
HTML: image children of side-by-side get image-box
ascholerChemeketa Jun 30, 2025
e0b22b6
HTML: image without width deisplayed at natural size if possible
ascholerChemeketa Jun 30, 2025
1249ccc
CSS: style natural size images
ascholerChemeketa Jun 30, 2025
e692eac
Latex: images without width displayed at natural size if possible
ascholerChemeketa Jun 30, 2025
0fe4742
Sample Article: update graphics samples with width options
ascholerChemeketa Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion css/components/elements/_media.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Binary file added examples/sample-article/media/images/new-folder-screenshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 20 additions & 3 deletions examples/sample-article/sample-article.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down
3 changes: 3 additions & 0 deletions xsl/pretext-common.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
<!--
Expand Down
19 changes: 8 additions & 11 deletions xsl/pretext-html.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5856,13 +5856,19 @@ 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>
<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"/>
Expand All @@ -5884,15 +5890,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, -->
Expand Down
31 changes: 29 additions & 2 deletions xsl/pretext-latex-common.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand Down Expand Up @@ -1384,14 +1385,32 @@ 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">
<xsl:text>%% "tcolorbox" environment for a single image, occupying entire \linewidth&#xa;</xsl:text>
<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>
Expand Down Expand Up @@ -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"/>
Expand Down