From 5d35599d7fbd3f2fa2cc555030a8e55e8084b4aa Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 14:46:50 -0700
Subject: [PATCH 01/22] Common: add per-element flexibility for design-width

---
 xsl/pretext-common.xsl | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/xsl/pretext-common.xsl b/xsl/pretext-common.xsl
index aae6b530a..b6724fba9 100644
--- a/xsl/pretext-common.xsl
+++ b/xsl/pretext-common.xsl
@@ -2974,31 +2974,40 @@ Book (with parts), "section" at level 3
     </xsl:choose>
 </xsl:template>
 
-<!-- This is cribbed from the CSS "max-width"-->
-<!-- Design width, measured in pixels        -->
-<!-- NB: the exact same value, for similar,  -->
-<!-- but not identical, reasons is used in   -->
-<!-- the formation of WeBWorK problems       -->
-<xsl:variable name="design-width-pixels" select="'600'" />
+<!-- Various components need to be built with pixel widths from % based widths -->
+<!-- design-width is the 100% value.                                           -->
+<!-- Individual stylesheets (e.g. html, reveal) may change this                -->
+<xsl:variable name="design-width" select="'600'" />
 
+<!-- Some elements may allow for a custom design-width.                        -->
+<!-- They will override this template and either provide a different value or  -->
+<!-- fall back on the local variable                                           -->
+<xsl:template match="*" mode="get-design-width">
+    <xsl:value-of select="$design-width" />
+</xsl:template>
 
 <!-- Pixels are an HTML thing, but we may need these numbers -->
 <!-- elsewhere, and these are are pure text templates        -->
 <!-- NB 3D "sageplot" needs an "iframe" with pixels for size -->
 <xsl:template match="slate|audio|video|interactive|image[asymptote]|image[sageplot]" mode="get-width-pixels">
+    <xsl:variable name="local-design-width">
+        <xsl:apply-templates select="." mode="get-design-width" />
+    </xsl:variable>
     <xsl:variable name="width-percent">
         <xsl:apply-templates select="." mode="get-width-percentage" />
     </xsl:variable>
     <xsl:variable name="width-fraction">
         <xsl:value-of select="substring-before($width-percent,'%') div 100" />
     </xsl:variable>
-    <xsl:value-of select="round($design-width-pixels * $width-fraction)" />
+    <xsl:value-of select="round($local-design-width * $width-fraction)" />
 </xsl:template>
 
 <!-- Square by default, when asked.  Can override -->
 <xsl:template match="slate|audio|video|interactive|image[asymptote]|image[sageplot]" mode="get-height-pixels">
     <xsl:param name="default-aspect" select="'1:1'" />
-
+    <xsl:variable name="local-design-width">
+        <xsl:apply-templates select="." mode="get-design-width" />
+    </xsl:variable>
     <xsl:variable name="width-percent">
         <xsl:apply-templates select="." mode="get-width-percentage" />
     </xsl:variable>
@@ -3010,7 +3019,7 @@ Book (with parts), "section" at level 3
             <xsl:with-param name="default-aspect" select="$default-aspect" />
         </xsl:apply-templates>
     </xsl:variable>
-    <xsl:value-of select="round($design-width-pixels * $width-fraction div $aspect-ratio)" />
+    <xsl:value-of select="round($local-design-width * $width-fraction div $aspect-ratio)" />
 </xsl:template>
 
 

From 65b4899c27f2c99e29c7b87f0bef3766f1aa39c4 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 14:52:15 -0700
Subject: [PATCH 02/22] HTML: new pubvar for design-width

---
 xsl/publisher-variables.xsl | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/xsl/publisher-variables.xsl b/xsl/publisher-variables.xsl
index 226f83f52..5644ca091 100644
--- a/xsl/publisher-variables.xsl
+++ b/xsl/publisher-variables.xsl
@@ -1813,6 +1813,19 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
 <!-- HTML-Specific Options -->
 <!-- ##################### -->
 
+<!-- Various components need to be built with pixel widths from % based widths -->
+<!-- design-width serves as the value that percent is based on                 -->
+<xsl:variable name="html-design-width">
+    <xsl:choose>
+        <xsl:when test="$publication/html[@design-width != '']">
+            <xsl:apply-templates select="$publisher-attribute-options/html/pi:pub-attribute[@name='design-width']" mode="set-pubfile-variable"/>
+        </xsl:when>
+        <xsl:otherwise>
+            <xsl:value-of select="'600'"/>
+        </xsl:otherwise>
+    </xsl:choose>
+</xsl:variable>
+
 <!-- Calculator -->
 <!-- Possible values are geogebra-classic, geogebra-graphing -->
 <!-- geogebra-geometry, geogebra-3d                          -->
@@ -3279,6 +3292,7 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
         <pi:pub-attribute name="short-answer-responses" default="graded" options="always"/>
         <pi:pub-attribute name="favicon" default="none" options="simple"/>
         <pi:pub-attribute name="embed-button" default="no" options="yes"/>
+        <pi:pub-attribute name="design-width" freeform="yes"/>
         <calculator>
             <pi:pub-attribute name="model" default="none" options="geogebra-classic geogebra-graphing geogebra-geometry geogebra-3d" legacy-stringparam="html.calculator"/>
         </calculator>

From 18dd355bacdee91ddf5d163f95bac404cc7a4e5e Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 14:52:44 -0700
Subject: [PATCH 03/22] HTML: use customizable design-width varaible

---
 xsl/pretext-html.xsl | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl
index be650bf21..3c219734a 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -169,12 +169,13 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 <!-- global variable, which is discussed in    -->
 <!-- closer proximity to its application.      -->
 
-<!-- This is cribbed from the CSS "max-width"-->
-<!-- Design width, measured in pixels        -->
-<!-- NB: the exact same value, for similar,  -->
-<!-- but not identical, reasons is used in   -->
-<!-- the formation of WeBWorK problems       -->
-<xsl:variable name="design-width" select="'600'" />
+<!-- Various components need to be built with pixel widths from % based widths -->
+<!-- design-width is the 100% value. We override the -common value here,       -->
+<!-- possibly getting a value defined in the pub file. If not, this should get -->
+<!-- set to the value from -common                                             -->
+<xsl:variable name="design-width">
+    <xsl:value-of select="$html-design-width"/>
+</xsl:variable>
 
 <!-- We generally want to chunk longer HTML output -->
 <xsl:variable name="chunk-level">

From 1a7ee8d9661e084a1b674dc15aa35a41af65145e Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Tue, 13 Jan 2026 10:05:53 -0800
Subject: [PATCH 04/22] Guide: add documentation for design-width pub var

---
 doc/guide/publisher/publication-file.xml | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/doc/guide/publisher/publication-file.xml b/doc/guide/publisher/publication-file.xml
index ee8fd11d5..39bd8795e 100644
--- a/doc/guide/publisher/publication-file.xml
+++ b/doc/guide/publisher/publication-file.xml
@@ -905,6 +905,19 @@
                 <li><c>yes</c>: show a button in the navigation bar, that when clicked, displays a popup allowing the user to copy an iframe code snippet to paste into their website or LMS.</li>
             </ul></p>
         </subsection>
+
+        <subsection xml:id="online-interactives-options">
+            <title>Interactives Options</title>
+            <idx><h>publisher options</h><h>html interactives</h></idx>
+
+            <p>
+                The
+                <cd>
+                    <cline>/publication/html</cline>
+                </cd>
+                element can have an attribute <attr>design-width</attr> with an integer value. This will be used as the base value for converting the percentage based widths of an interactive into a pixel values when that is required. The default value is <c>600</c> (100% width is 600px).
+            </p>
+        </subsection>
     </section>
 
     <section xml:id="publication-file-revealjs">

From 43b9f5095edd0493ce8197bd38037dd95eda7dde Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 15:52:44 -0700
Subject: [PATCH 05/22] HTML: expand max width on iframe standalone pages

---
 xsl/pretext-html.xsl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl
index 3c219734a..c604c6b30 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -6924,7 +6924,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
                     <!-- This seemed to not be enough, until Google Search went away  -->
                     <!-- <xsl:apply-templates select="." mode="primary-navigation" /> -->
                 </header> <!-- masthead -->
-                <div class="ptx-page">
+                <div class="ptx-page" style="max-width: 1600px">
                     <!-- With sidebars killed, this stuff is extraneous     -->
                     <!-- <xsl:apply-templates select="." mode="sidebars" /> -->
                     <main class="ptx-main">

From db301f30800a8fcc5be017f35d9fbca2d8202898 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 14:55:33 -0700
Subject: [PATCH 06/22] Assembly: generate interactive-platform identifier for
 all interactives

---
 xsl/pretext-assembly.xsl | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/xsl/pretext-assembly.xsl b/xsl/pretext-assembly.xsl
index bb2f9d158..70cc44caf 100644
--- a/xsl/pretext-assembly.xsl
+++ b/xsl/pretext-assembly.xsl
@@ -1813,6 +1813,28 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     </xsl:if>
 </xsl:template>
 
+<!-- 2025-08-15: Ensure that interactives all have a @interactive-platform -->
+<!-- that identifies their basic type                                      -->
+<xsl:template match="interactive" mode="repair">
+    <xsl:copy>
+        <xsl:attribute name="interactive-platform">
+            <xsl:choose>
+                <xsl:when test="@platform">
+                    <xsl:value-of select="@platform"/>
+                </xsl:when>
+                <xsl:when test="@desmos">desmos</xsl:when>
+                <xsl:when test="@geogebra">geogebra</xsl:when>
+                <xsl:when test="@calcplot3d">calcplot3d</xsl:when>
+                <xsl:when test="@circuitjs">circuitjs</xsl:when>
+                <xsl:when test="@iframe">iframe</xsl:when>
+                <xsl:otherwise>unknown</xsl:otherwise>
+            </xsl:choose>
+        </xsl:attribute>
+        <xsl:apply-templates select="@*" mode="repair"/>
+        <xsl:apply-templates select="node()|@*" mode="repair"/>
+    </xsl:copy>
+</xsl:template>
+
 <!-- 2025-11-04: a @runestone attribute was used to point into a file      -->
 <!-- of raw HTML versions of Runestone exercises.  This was a              -->
 <!-- transitional device to allow conversions of Runestone books into      -->

From 9f0d6cbc863b8f6e2001a0c616c166967d647388 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 14:57:07 -0700
Subject: [PATCH 07/22] HTML: add resize-behavior pubvars for interactives and
 varients

---
 xsl/publisher-variables.xsl | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/xsl/publisher-variables.xsl b/xsl/publisher-variables.xsl
index 5644ca091..020556167 100644
--- a/xsl/publisher-variables.xsl
+++ b/xsl/publisher-variables.xsl
@@ -3344,6 +3344,39 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
             <pi:pub-attribute name="host" default="web" options="runestone" legacy-options="aim"/>
             <pi:pub-attribute name="portable" default="no" options="yes"/>
         </platform>
+        <interactives>
+            <pi:pub-attribute name="resize-behavior" default="fixed-height" options="responsive"/>
+            <calcplot3d>
+                <pi:pub-attribute name="resize-behavior" default="fixed-height" options="responsive"/>
+            </calcplot3d>
+            <circuitjs>
+                <pi:pub-attribute name="resize-behavior" default="fixed-height" options="responsive"/>
+            </circuitjs>
+            <d3>
+                <pi:pub-attribute name="resize-behavior" default="fixed-height" options="responsive"/>
+            </d3>
+            <desmos>
+                <pi:pub-attribute name="resize-behavior" default="fixed-height" options="responsive"/>
+            </desmos>
+            <doenetml>
+                <pi:pub-attribute name="resize-behavior" default="fixed-height" options="responsive"/>
+            </doenetml>
+            <geogebra>
+                <pi:pub-attribute name="resize-behavior" default="fixed-height" options="responsive"/>
+            </geogebra>
+            <iframe>
+                <pi:pub-attribute name="resize-behavior" default="fixed-height" options="responsive"/>
+            </iframe>
+            <javascript>
+                <pi:pub-attribute name="resize-behavior" default="fixed-height" options="responsive"/>
+            </javascript>
+            <jsxgraph>
+                <pi:pub-attribute name="resize-behavior" default="fixed-height" options="responsive"/>
+            </jsxgraph>
+            <sage>
+                <pi:pub-attribute name="resize-behavior" default="fixed-height" options="responsive"/>
+            </sage>
+        </interactives>
     </html>
     <epub>
         <cover>

From 5ffafe8194e8e8470b8e6c48c590cbec060c062e Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 14:59:17 -0700
Subject: [PATCH 08/22] HTML: add get-resize-behavior templates for
 interactives

---
 xsl/pretext-html.xsl | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl
index c604c6b30..7e1dd1ee0 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -10462,6 +10462,33 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     </xsl:for-each>
 </xsl:template>
 
+<xsl:template match="interactive" mode="get-resize-behavior">
+    <xsl:variable name="platform" select="@interactive-platform"/>
+    <xsl:choose>
+        <xsl:when test="@resize-behavior != ''">
+            <xsl:value-of select="@resize-behavior"/>
+        </xsl:when>
+        <xsl:when test="$publication/html/interactives/*[local-name()=$platform and @resize-behavior != '']">
+            <xsl:apply-templates select="$publisher-attribute-options/html/interactives/*[local-name()=$platform]/pi:pub-attribute[@name='resize-behavior']" mode="set-pubfile-variable"/>
+        </xsl:when>
+        <xsl:otherwise>
+            <xsl:apply-templates select="$publisher-attribute-options/html/interactives/pi:pub-attribute[@name='resize-behavior']" mode="set-pubfile-variable"/>
+        </xsl:otherwise>
+    </xsl:choose>
+</xsl:template>
+
+<xsl:template match="slate" mode="get-resize-behavior">
+    <xsl:choose>
+        <xsl:when test="@resize-behavior != ''">
+            <xsl:value-of select="@resize-behavior"/>
+        </xsl:when>
+        <xsl:otherwise>
+            <xsl:variable name="container" select="ancestor::interactive"/>
+            <xsl:apply-templates select="$container" mode="get-resize-behavior"/>
+        </xsl:otherwise>
+    </xsl:choose>
+</xsl:template>
+
 <!-- Next two utilities write attributes, so cannot go in -common -->
 
 <!-- iframes, etc, need size as a pair of attributes in pixels -->

From e888de9470efa7f768156cd21cb1bf44397a2a98 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 15:57:47 -0700
Subject: [PATCH 09/22] HTML: custom design-width handling for interactives and
 slates

---
 xsl/pretext-html.xsl | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl
index 7e1dd1ee0..afd1f2525 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -10462,6 +10462,30 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     </xsl:for-each>
 </xsl:template>
 
+
+<xsl:template match="interactive" mode="get-design-width">
+    <xsl:choose>
+        <xsl:when test="@design-width != ''">
+            <xsl:value-of select="@design-width"/>
+        </xsl:when>
+        <xsl:otherwise>
+            <!-- global value set by stylesheet -->
+            <xsl:value-of select="$design-width"/>
+        </xsl:otherwise>
+    </xsl:choose>
+</xsl:template>
+
+<xsl:template match="slate" mode="get-design-width">
+    <xsl:choose>
+        <xsl:when test="@design-width != ''">
+            <xsl:value-of select="@design-width"/>
+        </xsl:when>
+        <xsl:otherwise>
+            <xsl:apply-templates select="ancestor::interactive" mode="get-design-width"/>
+        </xsl:otherwise>
+    </xsl:choose>
+</xsl:template>
+
 <xsl:template match="interactive" mode="get-resize-behavior">
     <xsl:variable name="platform" select="@interactive-platform"/>
     <xsl:choose>

From f4d520eadc8a9d7a870cc19af4d38a127b7702e4 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 16:54:34 -0700
Subject: [PATCH 10/22] HTML: refactor size-pixels-style-attribute

---
 xsl/pretext-html.xsl | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl
index afd1f2525..ba02ef7fc 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -10525,24 +10525,27 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     </xsl:attribute>
 </xsl:template>
 
-<!-- div's need size in a style attribute -->
+<!-- various elements need size in a style attribute -->
 <xsl:template match="*" mode="size-pixels-style-attribute">
+    <xsl:attribute name="style">
+        <xsl:apply-templates select="." mode="size-pixels-style-attribute-core" />
+    </xsl:attribute>
+</xsl:template>
+
+<xsl:template match="*" mode="size-pixels-style-attribute-core">
     <xsl:variable name="width">
         <xsl:apply-templates select="." mode="get-width-pixels" />
     </xsl:variable>
     <xsl:variable name="height">
         <xsl:apply-templates select="." mode="get-height-pixels" />
     </xsl:variable>
-    <xsl:attribute name="style">
-        <xsl:text>width:</xsl:text>
-        <xsl:value-of select="$width" />
-        <xsl:text>px; </xsl:text>
-        <xsl:text>height:</xsl:text>
-        <xsl:value-of select="$height" />
-        <xsl:text>px; </xsl:text>
-        <xsl:text>display: block; </xsl:text>
-        <xsl:text>box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;</xsl:text>
-    </xsl:attribute>
+    <xsl:text>width:</xsl:text>
+    <xsl:value-of select="$width" />
+    <xsl:text>px; </xsl:text>
+    <xsl:text>height:</xsl:text>
+    <xsl:value-of select="$height" />
+    <xsl:text>px; </xsl:text>
+    <xsl:text>display: block; </xsl:text>
 </xsl:template>
 
 <!-- Add js from script elemenets inside interactives     -->

From 36e21e528d96ed9f20a8182bef10dc5443515023 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 17:08:09 -0700
Subject: [PATCH 11/22] HTML: interactives and slates use resize-behavior
 setting

---
 xsl/pretext-html.xsl | 155 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 136 insertions(+), 19 deletions(-)

diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl
index ba02ef7fc..b896c1c1e 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -9671,8 +9671,8 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 <xsl:template match="interactive[@desmos]" mode="iframe-interactive">
     <iframe src="https://www.desmos.com/calculator/{@desmos}">
         <xsl:apply-templates select="." mode="html-id-attribute"/>
-        <xsl:apply-templates select="." mode="size-pixels-attributes" />
         <xsl:apply-templates select="." mode="iframe-dark-mode-attribute" />
+        <xsl:apply-templates select="." mode="interactive-sizing-style-attribute" />
     </iframe>
 </xsl:template>
 
@@ -9751,10 +9751,10 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     <!-- rc = enable right click options       -->
     <!-- ld = enable label drag                -->
     <!-- ctl = click to launch                 -->
-    <iframe src="https://www.geogebra.org/material/iframe/id/{@geogebra}/width/{$ggbMaterialWidth}/height/{$ggbMaterialHeight}/border/888888/smb/false/stb/{$ggbToolBar}/stbh/{$ggbToolBar}/ai/{$ggbAlgebraInput}/asb/false/sri/{$ggbResetIcon}/rc/false/ld/false/sdz/{$ggbShiftDragZoom}/ctl/false">
+    <iframe src="https://www.geogebra.org/material/iframe/id/{@geogebra}/scaleContainerClass/interactive-iframe-container/width/{$ggbMaterialWidth}/height/{$ggbMaterialHeight}/allowUpscale/true/autoHeight/true/border/888888/smb/false/stb/{$ggbToolBar}/stbh/{$ggbToolBar}/ai/{$ggbAlgebraInput}/asb/false/sri/{$ggbResetIcon}/rc/false/ld/false/sdz/{$ggbShiftDragZoom}/ctl/false">
         <xsl:apply-templates select="." mode="html-id-attribute"/>
-        <xsl:apply-templates select="." mode="size-pixels-attributes" />
         <xsl:apply-templates select="." mode="iframe-dark-mode-attribute" />
+        <xsl:apply-templates select="." mode="interactive-sizing-style-attribute" />
     </iframe>
 </xsl:template>
 
@@ -9788,7 +9788,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     <xsl:variable name="full-url" select="concat($cp3d-endpoint, '?', @calcplot3d)" />
     <iframe src="{$full-url}">
         <xsl:apply-templates select="." mode="html-id-attribute"/>
-        <xsl:apply-templates select="." mode="size-pixels-attributes" />
+        <xsl:apply-templates select="." mode="interactive-sizing-style-attribute" />
         <xsl:apply-templates select="." mode="iframe-dark-mode-attribute" />
     </iframe>
 </xsl:template>
@@ -9822,7 +9822,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     </xsl:variable>
     <iframe src="https://www.falstad.com/circuit/circuitjs.html?cct='{$url-string}'">
         <xsl:apply-templates select="." mode="html-id-attribute"/>
-        <xsl:apply-templates select="." mode="size-pixels-attributes"/>
+        <xsl:apply-templates select="." mode="interactive-sizing-style-attribute" />
         <xsl:apply-templates select="." mode="iframe-dark-mode-attribute" />
     </iframe>
 </xsl:template>
@@ -9845,7 +9845,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     </xsl:variable>
     <iframe src="{$location}">
         <xsl:apply-templates select="." mode="html-id-attribute"/>
-        <xsl:apply-templates select="." mode="size-pixels-attributes"/>
+        <xsl:apply-templates select="." mode="interactive-sizing-style-attribute" />
         <xsl:apply-templates select="." mode="iframe-dark-mode-attribute" />
     </iframe>
 </xsl:template>
@@ -9854,7 +9854,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 <xsl:template match="interactive[@platform]" mode="iframe-interactive">
     <iframe>
         <xsl:apply-templates select="." mode="html-id-attribute"/>
-        <xsl:apply-templates select="." mode="size-pixels-attributes" />
+        <xsl:apply-templates select="." mode="interactive-sizing-style-attribute" />
         <xsl:attribute name="src">
             <xsl:apply-templates select="." mode="iframe-filename" />
         </xsl:attribute>
@@ -9917,8 +9917,14 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
                 <!-- know globally available macros from the author -->
                 <xsl:call-template name="latex-macros"/>
                 <div>
-                    <!-- the actual interactive bit          -->
-                    <xsl:apply-templates select="." mode="size-pixels-style-attribute" />
+                    <!-- aspect ratio will force the proper height for wrapper div                           -->
+                    <!-- don't want to mess with width as iframe has applied any % width and px is redundant -->
+                    <xsl:attribute name="style">
+                        <xsl:text>aspect-ratio: </xsl:text>
+                        <xsl:apply-templates select="." mode="get-aspect-ratio"/>
+                        <xsl:text>;</xsl:text>
+                    </xsl:attribute>
+                    
                     <!-- stack, else use a layout -->
                     <xsl:apply-templates select="slate|sidebyside|sbsgroup" />
                     <!-- accumulate script tags *after* HTML elements -->
@@ -10048,7 +10054,13 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
         <xsl:attribute name="id">
             <xsl:value-of select="@xml:id" />
         </xsl:attribute>
-        <xsl:apply-templates select="." mode="size-pixels-style-attribute" />
+        <!-- aspect ratio will force the proper height for wrapper div -->
+        <xsl:attribute name="style">
+            <xsl:text>aspect-ratio: </xsl:text>
+            <xsl:apply-templates select="." mode="get-aspect-ratio"/>
+            <xsl:text>;</xsl:text>
+        </xsl:attribute>
+        <xsl:apply-templates select="." mode="interactive-slate-sizing-style-attributes" />
     </div>
 </xsl:template>
 
@@ -10066,19 +10078,16 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
         <xsl:attribute name="id">
             <xsl:value-of select="@xml:id" />
         </xsl:attribute>
-        <!-- <xsl:apply-templates select="." mode="size-pixels-style-attribute" /> -->
+        <xsl:apply-templates select="." mode="interactive-slate-sizing-style-attributes" />
     </svg>
 </xsl:template>
 
 <xsl:template match="slate[@surface = 'canvas']">
-    <!-- display:block allows precise sizes, without   -->
-    <!-- having inline content with extra line height, -->
-    <!-- or whatever, inducing scroll bars             -->
-    <canvas style="display:block">
+    <canvas>
         <xsl:attribute name="id">
             <xsl:value-of select="@xml:id" />
         </xsl:attribute>
-        <xsl:apply-templates select="." mode="size-pixels-attributes" />
+        <xsl:apply-templates select="." mode="interactive-slate-sizing-style-attributes" />
     </canvas>
 </xsl:template>
 
@@ -10271,9 +10280,12 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
         <xsl:text>},&#xa;</xsl:text>
         <xsl:text>(error) => {console.log('GGB applet load failure.', error)});&#xa;</xsl:text>
     </script>
-    <!-- build a container div with the right shape -->
-    <div class="geogebra-applet" id="{$applet-container}">
-        <xsl:apply-templates select="." mode="size-pixels-style-attribute" />
+    <!-- Force line-height 0 to prevent scroll bars -->
+    <div style="line-height: 0;">
+        <!-- build a container div with the right shape -->
+        <div class="geogebra-applet" id="{$applet-container}">
+            <xsl:apply-templates select="." mode="size-pixels-style-attribute" />
+        </div>
     </div>
 </xsl:template>
 
@@ -10462,6 +10474,111 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     </xsl:for-each>
 </xsl:template>
 
+<!-- Sizing styles for interactives                                       -->
+<!-- Two major modes based on how to resize: responsive or fixed-height   -->
+<!-- fixed-height applies aspect ratio at build as css height             -->
+<!-- responsive dynamically applies aspect ratio via css                  -->
+
+<xsl:template name="responsive-height-style-rules">
+    <!-- max-width should already have px or % -->
+    <xsl:param name="max-width"/>
+    <xsl:param name="aspect-ratio"/>
+    <xsl:text>max-width: </xsl:text>
+    <xsl:value-of select="$max-width"/>
+    <xsl:text>; </xsl:text>
+    <xsl:text>width: 100%; </xsl:text>
+    <xsl:text>aspect-ratio:</xsl:text>
+    <xsl:value-of select="$aspect-ratio"/>
+</xsl:template> 
+
+<xsl:template match="interactive" mode="interactive-sizing-style-attribute">
+    <xsl:param name="default-aspect" select="'1:1'" />
+    <xsl:variable name="resize-behavior">
+        <xsl:apply-templates select="." mode="get-resize-behavior"/>
+    </xsl:variable>
+    <xsl:choose>
+        <xsl:when test="$resize-behavior = 'responsive'">
+            <xsl:attribute name="style">
+                <xsl:variable name="max-width">
+                      <xsl:choose>
+                          <xsl:when test="@design-width != ''">
+                              <xsl:value-of select="@design-width"/>
+                              <xsl:text>px</xsl:text>
+                          </xsl:when>
+                          <xsl:otherwise>
+                              <xsl:apply-templates select="." mode="get-width-percentage"/>
+                          </xsl:otherwise>
+                        </xsl:choose>
+                </xsl:variable>
+                <xsl:variable name="aspect-ratio">
+                    <xsl:apply-templates select="." mode="get-aspect-ratio">
+                        <xsl:with-param name="default-aspect" select="'1:1'" />
+                    </xsl:apply-templates>
+                </xsl:variable>
+                <xsl:text>max-width: </xsl:text>
+                <xsl:value-of select="$max-width"/>
+                <xsl:text>; </xsl:text>
+                <xsl:text>width: 100%; </xsl:text>
+                <xsl:text>aspect-ratio:</xsl:text>
+                <xsl:value-of select="$aspect-ratio"/>
+            </xsl:attribute>
+        </xsl:when>
+        <xsl:otherwise>
+            <!-- resize-behavior: fixed-height -->
+            <xsl:apply-templates select="." mode="size-pixels-style-attribute"/>
+        </xsl:otherwise>
+    </xsl:choose>
+</xsl:template>
+
+<!-- Existing -common template handles if we have slate@aspect. But if attr -->
+<!-- is missing, look to parent interactive for an aspect and use that      -->
+<xsl:template match="slate[not(@aspect)]" mode="get-aspect-ratio">
+    <xsl:param name="default-aspect" select="'1:1'"/>
+    <xsl:apply-templates select="ancestor::interactive" mode="get-aspect-ratio">
+        <xsl:with-param name="default-aspect" select="$default-aspect" />
+    </xsl:apply-templates>
+</xsl:template>
+
+<xsl:template match="slate" mode="interactive-slate-sizing-style-attributes">
+    <xsl:variable name="resize-behavior">
+        <xsl:apply-templates select="ancestor::interactive" mode="get-resize-behavior"/>
+    </xsl:variable>
+    <xsl:variable name="aspect-ratio">
+        <xsl:apply-templates select="." mode="get-aspect-ratio">
+            <xsl:with-param name="default-aspect" select="'1:1'" />
+        </xsl:apply-templates>
+    </xsl:variable>
+    <xsl:choose>
+        <xsl:when test="$resize-behavior = 'responsive'">
+            <xsl:attribute name="style">
+                <!-- size is already constrained by interactive... only need max here -->
+                <!-- if there is a specific design width                              -->
+                <xsl:if test="@design-width != ''">
+                    <xsl:text>max-width: </xsl:text>
+                    <xsl:value-of select="@design-width"/>
+                    <xsl:text>px; </xsl:text>
+                </xsl:if>
+                <xsl:text>width: 100%; </xsl:text>
+                <xsl:text>aspect-ratio:</xsl:text>
+                <xsl:value-of select="$aspect-ratio"/>
+                <xsl:text>;</xsl:text>
+            </xsl:attribute>
+        </xsl:when>
+        <xsl:otherwise>
+            <!-- fixed height -->
+            <xsl:attribute name="style">
+                <xsl:apply-templates select="." mode="size-pixels-style-attribute-core"/>
+                <!-- May or may not need aspect ratio. Usually height overrides    -->
+                <!-- but can help for elements that are in a flex layout container -->
+                <xsl:text>aspect-ratio:</xsl:text>
+                <xsl:value-of select="$aspect-ratio"/>
+                <xsl:text>;</xsl:text>
+            </xsl:attribute>
+            <!-- may or may not need width/height attributes, but won't hurt if not needed-->
+            <xsl:apply-templates select="." mode="size-pixels-attributes"/>
+        </xsl:otherwise>
+    </xsl:choose>
+</xsl:template>
 
 <xsl:template match="interactive" mode="get-design-width">
     <xsl:choose>

From c1bec2008490a83c7252d50d099b039995159fa0 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 17:10:30 -0700
Subject: [PATCH 12/22] HTML: add container around interactives iframes

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

diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl
index b896c1c1e..2cc16b2c4 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -9636,7 +9636,9 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
         </xsl:when>
         <!-- no more special situations for Runestone exercises -->
         <xsl:otherwise>
-            <xsl:apply-templates select="." mode="iframe-interactive"/>
+            <div class="interactive-iframe-container">
+                <xsl:apply-templates select="." mode="iframe-interactive"/>
+            </div>
         </xsl:otherwise>
     </xsl:choose>
     <!-- "instructions" next, *always* as a knowl -->

From 8bc5998b1b8103926599bec8ec0f1ed1e7fcd6d2 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 17:11:35 -0700
Subject: [PATCH 13/22] CSS: force wide interactives to scroll instead of
 stretching page width

---
 css/components/_pretext.scss            | 1 +
 css/components/interactives/_other.scss | 9 +++++++++
 2 files changed, 10 insertions(+)
 create mode 100644 css/components/interactives/_other.scss

diff --git a/css/components/_pretext.scss b/css/components/_pretext.scss
index 45b9b4274..7ef08d698 100644
--- a/css/components/_pretext.scss
+++ b/css/components/_pretext.scss
@@ -28,6 +28,7 @@ $navbar-breakpoint: 800px !default;
 @use 'google-search';
 @use 'pretext-search';
 @use 'interactives/runestone';
+@use 'interactives/other';
 @use 'interactives/webwork';
 @use 'interactives/sagecell';
 
diff --git a/css/components/interactives/_other.scss b/css/components/interactives/_other.scss
new file mode 100644
index 000000000..8701b0d22
--- /dev/null
+++ b/css/components/interactives/_other.scss
@@ -0,0 +1,9 @@
+.interactive-iframe-container {
+  max-width: 100%;
+  overflow: auto;
+  & > iframe {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+}

From 621a998af262f3873beec143891f7b5bd0ee424f Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 15:53:37 -0700
Subject: [PATCH 14/22] Localization: add "open in new tab"

---
 xsl/localizations/af-ZA.xml   | 1 +
 xsl/localizations/bg-BG.xml   | 1 +
 xsl/localizations/ca-ES.xml   | 1 +
 xsl/localizations/cs-CZ.xml   | 1 +
 xsl/localizations/de-DE.xml   | 1 +
 xsl/localizations/en-US.xml   | 2 +-
 xsl/localizations/es-ES.xml   | 5 +++++
 xsl/localizations/fi-FI.xml   | 1 +
 xsl/localizations/fr-CA.xml   | 1 +
 xsl/localizations/fr-FR.xml   | 1 +
 xsl/localizations/hu-HU.xml   | 1 +
 xsl/localizations/it-IT.xml   | 1 +
 xsl/localizations/ku-CKB.xml  | 1 +
 xsl/localizations/nl-NL.xml   | 1 +
 xsl/localizations/pt-BR.xml   | 1 +
 xsl/localizations/pt-PT.xml   | 1 +
 xsl/localizations/zh-HANS.xml | 1 +
 17 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/xsl/localizations/af-ZA.xml b/xsl/localizations/af-ZA.xml
index f507bd200..d2122f831 100644
--- a/xsl/localizations/af-ZA.xml
+++ b/xsl/localizations/af-ZA.xml
@@ -286,4 +286,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <!-- <localization string-id='print'>Print</localization> -->
     <!--<localization string-id='print-preview'>Print preview</localization>-->
     <!-- <localization string-id='close'>Close</localization> -->
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>
diff --git a/xsl/localizations/bg-BG.xml b/xsl/localizations/bg-BG.xml
index d94fd4348..9772d395b 100644
--- a/xsl/localizations/bg-BG.xml
+++ b/xsl/localizations/bg-BG.xml
@@ -310,4 +310,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <!-- <localization string-id='print'>Print</localization> -->
     <!--<localization string-id='print-preview'>Print preview</localization>-->
     <!-- <localization string-id='close'>Close</localization> -->
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>
diff --git a/xsl/localizations/ca-ES.xml b/xsl/localizations/ca-ES.xml
index 02b6a82e6..f8aea6adb 100644
--- a/xsl/localizations/ca-ES.xml
+++ b/xsl/localizations/ca-ES.xml
@@ -289,4 +289,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <!-- <localization string-id='print'>Print</localization> -->
     <!--<localization string-id='print-preview'>Print preview</localization>-->
     <!-- <localization string-id='close'>Close</localization> -->
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>
diff --git a/xsl/localizations/cs-CZ.xml b/xsl/localizations/cs-CZ.xml
index 522d19835..98c3f7929 100644
--- a/xsl/localizations/cs-CZ.xml
+++ b/xsl/localizations/cs-CZ.xml
@@ -283,4 +283,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <localization string-id='print'>Tisk</localization>
     <!--<localization string-id='print-preview'>Print preview</localization>-->
     <localization string-id='close'>Zavřít</localization>
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>
diff --git a/xsl/localizations/de-DE.xml b/xsl/localizations/de-DE.xml
index 2fce3db8c..0a2690a19 100644
--- a/xsl/localizations/de-DE.xml
+++ b/xsl/localizations/de-DE.xml
@@ -291,4 +291,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <!-- <localization string-id='print'>Print</localization> -->
     <!--<localization string-id='print-preview'>Print preview</localization>-->
     <!-- <localization string-id='close'>Close</localization> -->
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>
diff --git a/xsl/localizations/en-US.xml b/xsl/localizations/en-US.xml
index dd7c53e6a..03e115e1f 100644
--- a/xsl/localizations/en-US.xml
+++ b/xsl/localizations/en-US.xml
@@ -348,5 +348,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <localization string-id='print-preview'>Print preview</localization>
     <!-- Close something interactive                              -->
     <localization string-id='close'>Close</localization>
-
+    <localization string-id='open-new-tab'>Open in new tab</localization>
 </locale>
diff --git a/xsl/localizations/es-ES.xml b/xsl/localizations/es-ES.xml
index bb328f492..5202a2c69 100644
--- a/xsl/localizations/es-ES.xml
+++ b/xsl/localizations/es-ES.xml
@@ -281,6 +281,11 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <localization string-id='reset'>Reiniciar</localization>
     <localization string-id='array'>Arreglo</localization>
     <localization string-id='papersize'>Tamaño del papel</localization>
+    <!-- <localization string-id="highlight-workspace">Highlight workspace</localization> -->
+    <!-- <localization string-id='print'>Print</localization> -->
+    <!--<localization string-id='print-preview'>Print preview</localization>-->
+    <!-- <localization string-id='close'>Close</localization> -->
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
     <!-- Additional printing options -->
     <localization string-id="printing-options">Opciones de impresión adicionales</localization>
     <!-- "hide hint/answer/solutions" toggle title                         -->
diff --git a/xsl/localizations/fi-FI.xml b/xsl/localizations/fi-FI.xml
index 76689d885..5739f0fbb 100644
--- a/xsl/localizations/fi-FI.xml
+++ b/xsl/localizations/fi-FI.xml
@@ -296,4 +296,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <!-- <localization string-id='print'>Print</localization> -->
     <!--<localization string-id='print-preview'>Print preview</localization>-->
     <!-- <localization string-id='close'>Close</localization> -->
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>
diff --git a/xsl/localizations/fr-CA.xml b/xsl/localizations/fr-CA.xml
index afcc310fd..34555949f 100644
--- a/xsl/localizations/fr-CA.xml
+++ b/xsl/localizations/fr-CA.xml
@@ -276,4 +276,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <localization string-id='print'>Imprimer</localization>
     <localization string-id='print-preview'>Aperçu avant impression</localization>
     <localization string-id='close'>Fermer</localization>
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>
diff --git a/xsl/localizations/fr-FR.xml b/xsl/localizations/fr-FR.xml
index 57efc086e..f6b93d1ea 100644
--- a/xsl/localizations/fr-FR.xml
+++ b/xsl/localizations/fr-FR.xml
@@ -282,4 +282,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <localization string-id='print'>Imprimer</localization>
     <!--<localization string-id='print-preview'>Print preview</localization>-->
     <localization string-id='close'>Fermer</localization>
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>
diff --git a/xsl/localizations/hu-HU.xml b/xsl/localizations/hu-HU.xml
index a3169219d..7e8c746c8 100644
--- a/xsl/localizations/hu-HU.xml
+++ b/xsl/localizations/hu-HU.xml
@@ -284,4 +284,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <!-- <localization string-id='print'>Print</localization> -->
     <!--<localization string-id='print-preview'>Print preview</localization>-->
     <!-- <localization string-id='close'>Close</localization> -->
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>
diff --git a/xsl/localizations/it-IT.xml b/xsl/localizations/it-IT.xml
index e6e2acc57..b7a10ba1b 100644
--- a/xsl/localizations/it-IT.xml
+++ b/xsl/localizations/it-IT.xml
@@ -279,4 +279,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <localization string-id='print'>Stampa</localization>
     <localization string-id='print-preview'>Anteprima di stampa</localization>
     <localization string-id='close'>Chiudi</localization>
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>
diff --git a/xsl/localizations/ku-CKB.xml b/xsl/localizations/ku-CKB.xml
index f51d82dc2..1cf29a498 100644
--- a/xsl/localizations/ku-CKB.xml
+++ b/xsl/localizations/ku-CKB.xml
@@ -323,4 +323,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <localization string-id='print'>پرنت</localization>
     <!--<localization string-id='print-preview'>Print preview</localization>-->
     <!-- <localization string-id='close'>Close</localization> -->
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>
diff --git a/xsl/localizations/nl-NL.xml b/xsl/localizations/nl-NL.xml
index 16879a1da..568064268 100644
--- a/xsl/localizations/nl-NL.xml
+++ b/xsl/localizations/nl-NL.xml
@@ -334,4 +334,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <!-- <localization string-id='print'>Print</localization> -->
     <!--<localization string-id='print-preview'>Print preview</localization>-->
     <!-- <localization string-id='close'>Close</localization> -->
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>
diff --git a/xsl/localizations/pt-BR.xml b/xsl/localizations/pt-BR.xml
index 1d30451c0..47564b2f8 100644
--- a/xsl/localizations/pt-BR.xml
+++ b/xsl/localizations/pt-BR.xml
@@ -286,4 +286,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <!-- <localization string-id='print'>Print</localization> -->
     <!--<localization string-id='print-preview'>Print preview</localization>-->
     <!-- <localization string-id='close'>Close</localization> -->
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>
diff --git a/xsl/localizations/pt-PT.xml b/xsl/localizations/pt-PT.xml
index 4ee1003fb..cc2a5203d 100644
--- a/xsl/localizations/pt-PT.xml
+++ b/xsl/localizations/pt-PT.xml
@@ -296,4 +296,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <!-- <localization string-id='print'>Print</localization> -->
     <!--<localization string-id='print-preview'>Print preview</localization>-->
     <!-- <localization string-id='close'>Close</localization> -->
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>
diff --git a/xsl/localizations/zh-HANS.xml b/xsl/localizations/zh-HANS.xml
index 8878182de..37e9dcf6f 100644
--- a/xsl/localizations/zh-HANS.xml
+++ b/xsl/localizations/zh-HANS.xml
@@ -327,4 +327,5 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <!-- <localization string-id="highlight-workspace">Highlight workspace</localization> -->
     <!-- <localization string-id='print-preview'>Print preview</localization> -->
     <!-- <localization string-id='close'>Close</localization> -->
+    <!-- <localization string-id='open-new-tab'>Open in new tab</localization> -->
 </locale>

From 33ff06e75be699b1ba155bafefa6ee7c86c1fead Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 17:12:28 -0700
Subject: [PATCH 15/22] HTML: add open in new window link button to
 interactives

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

diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl
index 2cc16b2c4..711891133 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -9586,7 +9586,9 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     <xsl:if test="not($b-portable-html)">
         <xsl:apply-templates select="." mode="standalone-page" >
             <xsl:with-param name="content">
-                <xsl:apply-templates select="." mode="interactive-core" />
+                <xsl:apply-templates select="." mode="interactive-core">
+                    <xsl:with-param name="is-standalone" select="true()"/>
+                </xsl:apply-templates>
             </xsl:with-param>
         </xsl:apply-templates>
     </xsl:if>
@@ -9600,6 +9602,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 <!--   1.  Instructions (paragraphs, etc)  -->
 <!--   2.  An iframe, via modal-template   -->
 <xsl:template match="interactive" mode="interactive-core">
+    <xsl:param name="is-standalone" select="false()"/>
     <!-- We want to recognize an "interactive" authored  -->
      <!-- in an "exercise" (or similar) which originated -->
      <!-- from a "dual" dynamic/static exercise.         -->
@@ -9639,6 +9642,26 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
             <div class="interactive-iframe-container">
                 <xsl:apply-templates select="." mode="iframe-interactive"/>
             </div>
+            <xsl:variable name="resize-behavior">
+                <xsl:apply-templates select="." mode="get-resize-behavior"/>
+            </xsl:variable>
+            <xsl:if test="$is-standalone = false() and $resize-behavior = 'responsive'">
+                <div class="interactive-iframe-container__opener">
+                    <xsl:variable name="if-filename">
+                        <xsl:apply-templates select="." mode="standalone-filename" />
+                    </xsl:variable>
+                    <xsl:variable name="label">
+                        <xsl:apply-templates select="." mode="type-name">
+                            <xsl:with-param name="string-id" select="'open-new-tab'"/>
+                        </xsl:apply-templates>
+                    </xsl:variable>
+                    <a href="{$if-filename}" title="{$label}" aria-label="{$label}">
+                        <xsl:call-template name="insert-symbol">
+                            <xsl:with-param name="name" select="'open_in_new'"/>
+                        </xsl:call-template>
+                    </a>
+                </div>
+            </xsl:if>
         </xsl:otherwise>
     </xsl:choose>
     <!-- "instructions" next, *always* as a knowl -->

From 6f1e9ffec81c4305b109cc28a9483d3380b12faa Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 17:12:44 -0700
Subject: [PATCH 16/22] CSS: style open in new window link for interactives

---
 css/components/interactives/_other.scss | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/css/components/interactives/_other.scss b/css/components/interactives/_other.scss
index 8701b0d22..a21373545 100644
--- a/css/components/interactives/_other.scss
+++ b/css/components/interactives/_other.scss
@@ -7,3 +7,28 @@
     display: block;
   }
 }
+
+.interactive-iframe-container__opener {
+  display: block;
+  margin-right: 5px;
+  margin-top: 11px;
+  margin-bottom: 5px;
+  font-size: 0.8rem;
+  & .icon {
+    font-size: 18px;
+  }
+
+  // if figcaption or instructions follow, this should float next to that
+  &:has(+ figcaption, + .instructions) {
+    float: left;
+    z-index: 1; // place above fig caption in render stack
+    position: relative;  // for z-index
+  }
+
+  // and if both, the figcaption should clear
+  + .instructions + figcaption {
+    clear: left;
+  }
+  
+  + .instructions { margin-top: .5em; }
+}

From 419bbcddaf9194429cb0e9d04463c90b9437bf42 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 17:13:49 -0700
Subject: [PATCH 17/22] Sample article: set pubfile resize-behavior

---
 examples/sample-article/publication.xml | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/examples/sample-article/publication.xml b/examples/sample-article/publication.xml
index 454d6f946..e59d447ea 100644
--- a/examples/sample-article/publication.xml
+++ b/examples/sample-article/publication.xml
@@ -152,6 +152,13 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Banner options, these default to "yes" but can be set to -->
         <!-- "no" toremove the indicated element from the top banner  -->
         <banner byline="yes" subtitle="yes"/>
+        <interactives resize-behavior="responsive">
+            <javascript resize-behavior="fixed-height"/>
+            <jsxgraph resize-behavior="fixed-height"/>
+            <sage resize-behavior="fixed-height"/>
+            <circuitjs resize-behavior="fixed-height"/>
+            <d3 resize-behavior="fixed-height"/>
+        </interactives>
     </html>
 
     <!-- 10pt font is the default   -->

From 1aa93be46bd395d188a1f2c608107af4d925791b Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 17:13:22 -0700
Subject: [PATCH 18/22] Sample article: cleanup layouts from included js/css in
 interactives

---
 .../sample-article/media/code/d3/collision.js     |  3 ++-
 .../sample-article/media/code/d3/graph-layout.js  | 15 ++++++++++-----
 .../sample-article/media/code/mcclure/slope.css   |  3 ++-
 .../sample-article/media/code/mcclure/slope.js    |  2 +-
 .../sample-article/media/code/threejs/catenoid.js |  2 +-
 .../sample-article/media/code/threejs/saddle.js   |  1 +
 6 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/examples/sample-article/media/code/d3/collision.js b/examples/sample-article/media/code/d3/collision.js
index b82593ec8..8e7d38fcd 100644
--- a/examples/sample-article/media/code/d3/collision.js
+++ b/examples/sample-article/media/code/d3/collision.js
@@ -21,7 +21,8 @@ force.start();
 
 var svg = d3.select("#d3-collision").append("svg")
     .attr("width", width)
-    .attr("height", height);
+    .attr("height", height)
+    .attr("display", "block");
 
 svg.selectAll("circle")
     .data(nodes.slice(1))
diff --git a/examples/sample-article/media/code/d3/graph-layout.js b/examples/sample-article/media/code/d3/graph-layout.js
index 453bf1d8d..b572ea674 100644
--- a/examples/sample-article/media/code/d3/graph-layout.js
+++ b/examples/sample-article/media/code/d3/graph-layout.js
@@ -14,19 +14,24 @@
     main()
 
     function main() {
-        var range = 50
+        setSize(data)
+
+        // Add more data when we have a larger canvas
+        var range = Math.pow(width, 1.3) / 50
         var data = {
             nodes:d3.range(0, range).map(function(d){ return {label: "l"+d ,r:~~d3.randomUniform(4, 16)()}}),
             links:d3.range(0, range).map(function(){ return {source:~~d3.randomUniform(range)(), target:~~d3.randomUniform(range)()} })        
         }
 
-        setSize(data)
         drawChart(data)
     }
 
     function setSize(data) {
-        width = document.querySelector("#d3-graph-layout").clientWidth
-        height = document.querySelector("#d3-graph-layout").clientHeight
+        // boundingRect provides true decimal values for dimensions.
+        // clientWidth/clientHeight are integer values that may have been rounded up
+        let boundingRect = document.querySelector("#d3-graph-layout").getBoundingClientRect()
+        width = Math.floor(boundingRect.width)
+        height = Math.floor(boundingRect.height)
 
         margin = {top:0, left:0, bottom:0, right:0 }
 
@@ -34,7 +39,7 @@
         chartWidth = width - (margin.left+margin.right)
         chartHeight = height - (margin.top+margin.bottom)
 
-        svg.attr("width", width).attr("height", height)
+        svg.attr("width", width).attr("height", height).attr("display", "block")
 
 
         chartLayer
diff --git a/examples/sample-article/media/code/mcclure/slope.css b/examples/sample-article/media/code/mcclure/slope.css
index 999ff001d..f4ff41a81 100644
--- a/examples/sample-article/media/code/mcclure/slope.css
+++ b/examples/sample-article/media/code/mcclure/slope.css
@@ -36,7 +36,8 @@ h1 {
 svg {
 	background: white;
 	border: 1px solid darkslategray;
-	margin: 20px;
+	margin-top: 20px;
+	margin-bottom: 20px;
 }
 
 .function_radio_container {
diff --git a/examples/sample-article/media/code/mcclure/slope.js b/examples/sample-article/media/code/mcclure/slope.js
index d859bfd88..119ae4d51 100644
--- a/examples/sample-article/media/code/mcclure/slope.js
+++ b/examples/sample-article/media/code/mcclure/slope.js
@@ -4,7 +4,7 @@
 
 var body_width = 600;
 $("body").css("width", body_width);
-var svg_width = 580, svg_height = 400, graph_padding = 20;
+var svg_width = 600, svg_height = 400, graph_padding = 20;
 $("#the_graph").css("margin-left", (body_width-svg_width)/2);
 var svg = d3.select("#the_graph")
 	.attr("width", svg_width)
diff --git a/examples/sample-article/media/code/threejs/catenoid.js b/examples/sample-article/media/code/threejs/catenoid.js
index 81680d0c3..2e22c45b1 100644
--- a/examples/sample-article/media/code/threejs/catenoid.js
+++ b/examples/sample-article/media/code/threejs/catenoid.js
@@ -1,7 +1,7 @@
     var scene = new THREE.Scene();
 
     var renderer = new THREE.WebGLRenderer( { antialias: true } );
-    renderer.setSize( window.innerWidth, window.innerHeight );
+    renderer.setSize( window.innerWidth, window.innerHeight - 5 );
     renderer.setClearColor( 0xfff000, 1 );
     // RAB edit 2021-08-10
     // document.body.appendChild( renderer.domElement );
diff --git a/examples/sample-article/media/code/threejs/saddle.js b/examples/sample-article/media/code/threejs/saddle.js
index d26f44b2e..aebd5c41e 100644
--- a/examples/sample-article/media/code/threejs/saddle.js
+++ b/examples/sample-article/media/code/threejs/saddle.js
@@ -14,6 +14,7 @@
     // document.body.appendChild( renderer.domElement );
     var renderDiv = document.getElementById("threejs-saddle");
     renderDiv.appendChild( renderer.domElement );
+    renderer.domElement.style.display = 'block'; // Prevents scroll bars
 
     var b = [{"x":-1.0, "y":-1.0, "z":-0.9993425378040762}, {"x":1.0, "y":1.0, "z":0.9993425378040762}]; // bounds
 

From db3c9c61652311dc0f1fbf0d7a0b8010ee060879 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Tue, 19 Aug 2025 09:50:39 -0700
Subject: [PATCH 19/22] Sample article: adjust interatives layouts

---
 examples/sample-article/sample-article.xml | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/examples/sample-article/sample-article.xml b/examples/sample-article/sample-article.xml
index 30651a723..0f22332c6 100644
--- a/examples/sample-article/sample-article.xml
+++ b/examples/sample-article/sample-article.xml
@@ -8515,15 +8515,15 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 
                 <p>Similar, but different, this demonstration of a graph layout uses Version 4 of the library.  Technical notes:<ul>
                     <li>We have changed the size of the nodes, and their number, to fit in a smaller space.</li>
-                    <li>The Javascript script uses introspection to size itself, which would be a good general practice.</li>
+                    <li>The Javascript script uses introspection to size itself, which would be a good general practice. (Though it does not resize itself on window resize, only initial load.) The <tag>interactive</tag> also has the <attr>resize-behavior</attr> attribute set to <c>responsive</c>. </li>
                 </ul></p>
 
                 <p>This is adapted from a <url href="https://bl.ocks.org/shimizu/e6209de87cdddde38dadbb746feaf3a3" visual="bl.ocks.org/shimizu/e6209de87cdddde38dadbb746feaf3a3">block</url> by <url href="https://bl.ocks.org/shimizu" visual="bl.ocks.org/shimizu">shimizu</url> with a <init>GPL</init> license.</p>
 
                 <figure>
                     <caption>Graph Layout</caption>
-                    <interactive xml:id="interactive-d3-graph-layout" platform="d3" version="4" width="60%" aspect="1:1" source="code/d3/graph-layout.js" preview="preview/graph-layout-preview.png">
-                        <slate xml:id="d3-graph-layout" surface="div" aspect="1:1"/>
+                    <interactive xml:id="interactive-d3-graph-layout" platform="d3" version="4" width="60%" aspect="1:1" source="code/d3/graph-layout.js" resize-behavior="responsive" preview="preview/graph-layout-preview.png">
+                        <slate xml:id="d3-graph-layout" aspect="1:1" surface="div"/>
                         <instructions>
                             <p>Drag a vertex to a new location to see the graph adjust its layout.</p>
                         </instructions>
@@ -8554,12 +8554,13 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
                     <li>We have adjusted the margins in an attempt to keep names visible on the right side, but without giving up too much space.</li>
                     <li>We have adjust the repelling force, and the collision buffer, to better fit the available space.</li>
                     <li>This example required its own <init>CSS</init>, which we have included as part of the <tag>interactive</tag>.</li>
+                    <li>The <attr>aspect</attr> ratio of the <tag>interactive</tag> is set to slightly taller than that of the <tag>slate</tag> it contains. This accounts for the fact that the contents generated by the js/css in the slate occupy slightly too much vertical real estate.</li>
                     <li>The data collected from the Twitter analysis is contained in a <init>JSON</init> file, <c>mention_network.json</c>, and where the script loads that file, it has a hardcoded path.  So this example is a bit brittle, should that file move.</li>
                 </ul></p>
 
                 <figure>
                     <caption>Tweet mentions within the Welsh Assembly</caption>
-                    <interactive xml:id="interactive-d3-welsh" platform="d3" version="4" width="100%" aspect="1:2" source="code/d3/welsh.js" css="code/d3/welsh.css" preview="preview/welsh-assembly-preview.png">
+                    <interactive xml:id="interactive-d3-welsh" platform="d3" version="4" width="100%" aspect="1:2.05" source="code/d3/welsh.js" css="code/d3/welsh.css" preview="preview/welsh-assembly-preview.png">
                         <slate xml:id="d3-welsh" surface="div" aspect="1:2"/>
                         <instructions>
                             <p>Hover on the name of an Assembly Member to concentrate on their tweet mentions.</p>
@@ -9172,7 +9173,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 
                 <figure xml:id="figure-threejs-catenoid-surface">
                     <caption><c>threejs</c> catenoid surface, from <m>n</m>-Category Cafe</caption>
-                    <interactive xml:id="interactive-threejs-catenoid-surface" platform="javascript" width="75%" aspect="2:1" source="https://cdn.rawgit.com/mrdoob/three.js/r80/build/three.min.js https://cdn.rawgit.com/mrdoob/three.js/r80/examples/js/controls/OrbitControls.js code/threejs/catenoid.js">
+                    <interactive xml:id="interactive-threejs-catenoid-surface" platform="javascript" width="80%" resize-behavior="responsive" aspect="2:1" source="https://cdn.rawgit.com/mrdoob/three.js/r80/build/three.min.js https://cdn.rawgit.com/mrdoob/three.js/r80/examples/js/controls/OrbitControls.js code/threejs/catenoid.js">
                         <slate xml:id="threejs-catenoid-surface" surface="div" aspect="2:1"/>
                     </interactive>
                 </figure>
@@ -9181,7 +9182,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 
                 <figure xml:id="figure-threejs-saddle">
                     <caption><c>threejs</c> saddle by Sage</caption>
-                    <interactive xml:id="interactive-threejs-saddle" platform="javascript" width="85%" aspect="1:1" source="https://cdn.jsdelivr.net/gh/sagemath/threejs-sage@r122/build/three.min.js code/threejs/saddle.js">
+                    <interactive xml:id="interactive-threejs-saddle" platform="javascript" resize-behavior="responsive" design-width="1000" aspect="1:1" source="https://cdn.jsdelivr.net/gh/sagemath/threejs-sage@r122/build/three.min.js code/threejs/saddle.js">
                         <slate xml:id="threejs-saddle" surface="div" aspect="1:1"/>
                     </interactive>
                 </figure>
@@ -9216,7 +9217,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
                     <caption>DoenetML example</caption>
                     <!-- 2024-04-25: This exact interactive appears in the sample book, for testing on Runestone. -->
                     <!-- A @label is preferred, since it is required for use on Runestone -->
-                    <interactive label="interactive-doenetml-example" platform="doenetml" width="100%" aspect="3:2">
+                    <interactive label="interactive-doenetml-example" platform="doenetml" aspect="3:2">
                         <slate surface="doenetml">
                             <![CDATA[
                             <p>

From ec51b052689125b6bdf0d8659552fbc0b7b05056 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Tue, 19 Aug 2025 09:53:27 -0700
Subject: [PATCH 20/22] Sample article: add interactive layout examples

---
 .../media/code/splice/splice-resize.js        | 19 ++++++
 examples/sample-article/sample-article.xml    | 63 ++++++++++++++++++-
 2 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 examples/sample-article/media/code/splice/splice-resize.js

diff --git a/examples/sample-article/media/code/splice/splice-resize.js b/examples/sample-article/media/code/splice/splice-resize.js
new file mode 100644
index 000000000..1cab4ce57
--- /dev/null
+++ b/examples/sample-article/media/code/splice/splice-resize.js
@@ -0,0 +1,19 @@
+const bodyEl = document.body;
+bodyEl.style.background = 'red';
+
+const growBtn = document.createElement('button');
+growBtn.textContent = 'Grow';
+document.currentScript.parentElement.appendChild(growBtn);
+
+growBtn.addEventListener('click', () => {
+  const currentHeight = bodyEl.clientHeight;
+  const newHeight = currentHeight + 100;
+  bodyEl.style.height = `${newHeight}px`;
+  window.parent.postMessage(
+    {
+      subject: 'lti.frameResize',
+      height: newHeight,
+    },
+    '*'
+  )
+});
\ No newline at end of file
diff --git a/examples/sample-article/sample-article.xml b/examples/sample-article/sample-article.xml
index 0f22332c6..be3a51d81 100644
--- a/examples/sample-article/sample-article.xml
+++ b/examples/sample-article/sample-article.xml
@@ -9297,8 +9297,9 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
         </section>
 
         <section xml:id="section-interactive-server" label="section-interactive-server">
-            <title>Interactive Elements, Server</title>
+            <title>Interactive Elements, Server &amp; Layouts</title>
             <idx><h>interactive elements</h><h>server</h></idx>
+            <idx><h>interactive elements</h><h>layout</h></idx>
             <idx><h>embedded interactive elements</h><h>server</h></idx>
 
             <introduction>
@@ -9398,7 +9399,65 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 
                 <figure xml:id="map-california">
                     <caption>California.</caption>
-                    <interactive xml:id="interactive-map-california" iframe="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6512739.689202133!2d-124.5931848890628!3d37.151542068971864!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb9fe5f285e3d%3A0x8b5109a227086f55!2sCalifornie%2C%20%C3%89tats-Unis!5e0!3m2!1sfr!2sca!4v1682454368296!5m2!1sfr!2sca" width="95%" aspect="15:10"/>
+                    <interactive xml:id="interactive-map-california" iframe="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6512739.689202133!2d-124.5931848890628!3d37.151542068971864!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb9fe5f285e3d%3A0x8b5109a227086f55!2sCalifornie%2C%20%C3%89tats-Unis!5e0!3m2!1sfr!2sca!4v1682454368296!5m2!1sfr!2sca" aspect="15:10"/>
+                </figure>
+            </subsection>
+
+            <subsection>
+                <title>Layout of Interactives</title>
+
+                <p>In HTML, interactives are rendered in iframes, which can offer some layout challenges. The PreTeXt page has no direct control over the layout within the interactive. All it does is provide a fixed sized frame in which the interactive content can display itself. The <attr>width</attr> (a percentage) and <attr>aspect</attr> (a width:height ratio like <c>2.1:1</c> OR a number like <c>1.5</c>) attributes on the interactive are the main tools to specify the dimensions. Below are three renderings of the same Google map using different widths/heights.</p>
+
+                <interactive iframe="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6512739.689202133!2d-124.5931848890628!3d37.151542068971864!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb9fe5f285e3d%3A0x8b5109a227086f55!2sCalifornie%2C%20%C3%89tats-Unis!5e0!3m2!1sfr!2sca!4v1682454368296!5m2!1sfr!2sca" aspect="15:10"/>
+
+                <interactive iframe="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6512739.689202133!2d-124.5931848890628!3d37.151542068971864!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb9fe5f285e3d%3A0x8b5109a227086f55!2sCalifornie%2C%20%C3%89tats-Unis!5e0!3m2!1sfr!2sca!4v1682454368296!5m2!1sfr!2sca" aspect="15:10" width="50%"/>
+
+                <interactive iframe="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6512739.689202133!2d-124.5931848890628!3d37.151542068971864!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb9fe5f285e3d%3A0x8b5109a227086f55!2sCalifornie%2C%20%C3%89tats-Unis!5e0!3m2!1sfr!2sca!4v1682454368296!5m2!1sfr!2sca" aspect="0.5" width="50%"/>
+
+                <p>If you know a particular interactive is designed to display at a particular pixel size, you can can specify a <attr>design-width</attr> like <c>300</c> to force exactly that width. Combine that with <attr>aspect</attr> to also force the height. The example below forces a size of 300x450.</p>
+
+                <figure>
+                    <caption>Graph of <m>ln(x^2+5)-3</m></caption>
+                    <interactive desmos="ttox1bvxku" design-width="300" aspect="300:450"/>
+                </figure>
+
+                <p>What happens if there is not enough space to display the requested frame? That depends on the <attr>resize-behavior</attr> applied to the interactive. The default is <c>fixed-height</c>. In this case, the interactive's height will not change if the window becomes too small to display the full width of the interactive. Instead a horizontal scroll bar will appear. This can be seen in many of the samples in <xref ref="section-interactive-authored"/> and this CircuitJS sample:</p>
+
+                <figure>
+                    <caption>CircuitJS with <c>resize-behavior="fixed-height"</c></caption>
+
+                    <interactive circuitjs="$ 1 0.000005 10.20027730826997 58 5 50 5e-11%0AR 464 32 464 -16 0 0 40 3.3 0 0 0.5%0Ag 464 224 464 240 0 0%0As 464 32 464 128 0 0 false%0As 464 128 464 224 0 1 false%0Ax 274 181 431 184 4 12 bottom\sswitch\s(to\sground)%0Ax 312 85 426 88 4 12 top\sswitch\s(to\sVdd)%0AO 464 128 544 128 1 0%0Ax 532 110 593 113 4 12 output\spin" width="90%" aspect="4:3" resize-behavior="fixed-height"/>
+                </figure>
+
+                <p>The other option for <attr>resize-behavior</attr> is <c>responsive</c>. In this case, the interactive's aspect ratio will be maintained. If the width gets smaller, so will the height. This can be seen in the version below.</p>
+
+                <figure>
+                    <caption>CircuitJS with <c>resize-behavior="responsive"</c></caption>
+
+                    <interactive circuitjs="$ 1 0.000005 10.20027730826997 58 5 50 5e-11%0AR 464 32 464 -16 0 0 40 3.3 0 0 0.5%0Ag 464 224 464 240 0 0%0As 464 32 464 128 0 0 false%0As 464 128 464 224 0 1 false%0Ax 274 181 431 184 4 12 bottom\sswitch\s(to\sground)%0Ax 312 85 426 88 4 12 top\sswitch\s(to\sVdd)%0AO 464 128 544 128 1 0%0Ax 532 110 593 113 4 12 output\spin" width="90%" aspect="4:3" resize-behavior="responsive"/>
+                </figure>
+
+                <p>The best behavior will be determined by the contents of the interactive. If the interactive knows how to dynamically size itself, <c>responsive</c> is likely the better option. If the interactive assumes that there is a certain amount of space and the contents will never resize themselves, <c>fixed-height</c> will likely work better.</p>
+
+                <p>In addition to specifying the resize-behavior in a particular interactive, you can apply a document level default value in your pub file. You can also specify a different default for a specific types of interactive. See the PreTeXt guide for documentation, or the <c>publication.xml</c> file of this Sample Article for an example of configuring defaults.</p>
+
+                <p>The code that generates content needs to make sure it does not overflow the available space or you will get scroll bars. Common culprits are <tag>canvas</tag> or <tag>svg</tag> elements that are not displayed as blocks or little bits of whitespace.</p>
+
+                <p>If an interactive wants to request a change to the amount of vertical space available to it, it can pass a message to the PreTeXt page asking for a <c>lti.frameResize</c>. (It is also possible to request a different amount of horizontal space, but doing so is not guaranteed to work and is much more likely to result in breaking the overall page layout.) The simple demo below uses that process to allow for resizing. A resize request should trump the original aspect ratio.</p>
+
+                <figure>
+                    <caption>Growable interactive fixed-height</caption>
+                    <interactive platform="javascript" width="80%" aspect="2:1" source="code/splice/splice-resize.js" resize-behavior="fixed-height"/>
+                </figure>
+
+                <figure>
+                    <caption>Growable interactive responsive with % width</caption>
+                    <interactive platform="javascript" width="80%" aspect="2:1" source="code/splice/splice-resize.js" resize-behavior="responsive"/>
+                </figure>
+
+                <figure>
+                    <caption>Growable interactive responsive and design-width</caption>
+                    <interactive platform="javascript" design-width="480" aspect="2:1" source="code/splice/splice-resize.js" resize-behavior="responsive"/>
                 </figure>
             </subsection>
         </section>

From dd45aeb01075e0ad43b6ef24a2d363aaf0d9b86c Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Tue, 19 Aug 2025 09:55:21 -0700
Subject: [PATCH 21/22] JS: lti_iframe_resizer updates height/width attribute
 and style

---
 js/lti_iframe_resizer.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/js/lti_iframe_resizer.js b/js/lti_iframe_resizer.js
index 07db207c4..be9755506 100644
--- a/js/lti_iframe_resizer.js
+++ b/js/lti_iframe_resizer.js
@@ -33,8 +33,14 @@ window.addEventListener('message', function (event) {
             const iFrames = document.getElementsByTagName('iframe');
             for(const iFrame of iFrames) {
                 if(iFrame.contentWindow === event.source) {
-                    if (edata.height) iFrame.height = edata.height;
-                    if (edata.width) iFrame.width = edata.width;
+                    if (edata.height) {
+                      iFrame.height = edata.height;
+                      iFrame.style.height = edata.height + 'px';
+                    }
+                    if (edata.width) {
+                      iFrame.width = edata.width;
+                      iFrame.style.width = edata.width + 'px';
+                    }
                     break;
                 }
             }

From 93be63505d5c7b703a74f23697e664bb09b41c16 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Tue, 13 Jan 2026 10:06:19 -0800
Subject: [PATCH 22/22] Guide: add documentation for resize-behavior pub var

---
 doc/guide/publisher/publication-file.xml | 29 ++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/doc/guide/publisher/publication-file.xml b/doc/guide/publisher/publication-file.xml
index 39bd8795e..4f94d7c6c 100644
--- a/doc/guide/publisher/publication-file.xml
+++ b/doc/guide/publisher/publication-file.xml
@@ -917,6 +917,35 @@
                 </cd>
                 element can have an attribute <attr>design-width</attr> with an integer value. This will be used as the base value for converting the percentage based widths of an interactive into a pixel values when that is required. The default value is <c>600</c> (100% width is 600px).
             </p>
+
+           <p>
+              The
+              <cd>
+                  <cline>/publication/html/interactives</cline>
+              </cd>
+              element can have an attribute <attr>resize-behavior</attr> that is used to control how interactives respond to window resizing. Possible values are:
+              <ul>
+                  <li><c>fixed-height</c> (default): interactives will maintain their initial height as the window size changes. When the content becomes too wide to display, a horizontal scrollbar will appear.</li>
+                  <li><c>responsive</c>: interactives will resize dynamically as the window size changes to maintain their aspect ratio.</li>
+              </ul>
+              In addition to this global setting, you can add child elemements to 
+              <cd>
+                  <cline>/publication/html/interactives</cline>
+              </cd>
+              to set the resize behavior for specific types of interactives. Each child element should be named after the interactive type (e.g. <c>geogebra</c> or <c>desmos</c>) and have a <attr>resize-behavior</attr> attribute with the same possible values as above. Settings on these child elements will override the global setting for that specific interactive type. Known interactive types that can be specified this way are:
+              <ul>
+                <li>calcplot3d</li>
+                <li>circuitjs</li>
+                <li>d3</li>
+                <li>desmos</li>
+                <li>doenetml</li>
+                <li>geogebra</li>
+                <li>iframe</li>
+                <li>javascript</li>
+                <li>jsxgraph</li>
+                <li>sage</li>
+              </ul>
+            </p>
         </subsection>
     </section>