From 7ce2243cc2f3d29b1398e4accb85ecd6de91999d 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/20] 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 a264190e90..0870b84225 100644
--- a/xsl/pretext-common.xsl
+++ b/xsl/pretext-common.xsl
@@ -3082,31 +3082,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>
@@ -3118,7 +3127,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 08d6b11543e7ce2ddae21870bbfa77297400e07f 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/20] 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 d71fd546b2..22ee1fb1b9 100644
--- a/xsl/publisher-variables.xsl
+++ b/xsl/publisher-variables.xsl
@@ -1809,6 +1809,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                          -->
@@ -3232,6 +3245,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 ffef51749ad354e7a9bf16f33cc19144ef8d43ca 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/20] 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 7487eb7c10..8ea9e3eeb8 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -170,12 +170,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 6b742eecaffcdfdda61dc6014ae56a36beef619e Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 15:52:44 -0700
Subject: [PATCH 04/20] 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 8ea9e3eeb8..9aac13ae78 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -6990,7 +6990,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 7c201ffc495518cd0ca45cad078340065bd5ce92 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 14:55:33 -0700
Subject: [PATCH 05/20] 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 3b79ace5c2..eb0bef665f 100644
--- a/xsl/pretext-assembly.xsl
+++ b/xsl/pretext-assembly.xsl
@@ -1799,6 +1799,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>
+
 
 <!-- ############################## -->
 <!-- Killed, in Chronological Order -->

From df2da15cb1d1a80354affba08e52006c23e27e95 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 14:57:07 -0700
Subject: [PATCH 06/20] 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 22ee1fb1b9..2fa4a1b9d0 100644
--- a/xsl/publisher-variables.xsl
+++ b/xsl/publisher-variables.xsl
@@ -3293,6 +3293,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 c4f1ab4382050f3de49782a8c996d80f49674505 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 14:59:17 -0700
Subject: [PATCH 07/20] 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 9aac13ae78..6486395a95 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -10507,6 +10507,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 0831735e30e3967b24b5330635e0b03d1794ef54 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 15:57:47 -0700
Subject: [PATCH 08/20] 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 6486395a95..04d6ce2e01 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -10507,6 +10507,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 e67dd0a19ac71b9a368d92c27e6133ef1ab36682 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 16:54:34 -0700
Subject: [PATCH 09/20] 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 04d6ce2e01..1973881a3c 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -10570,24 +10570,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 90e73619347968e9333bbb6bba736dc9b879452c Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 17:08:09 -0700
Subject: [PATCH 10/20] 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 1973881a3c..5d47203c72 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -9740,8 +9740,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>
 
@@ -9820,10 +9820,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>
 
@@ -9857,7 +9857,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>
@@ -9891,7 +9891,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>
@@ -9914,7 +9914,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>
@@ -9923,7 +9923,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>
@@ -9968,8 +9968,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 -->
@@ -10099,7 +10105,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>
 
@@ -10117,19 +10129,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>
 
@@ -10322,9 +10331,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>
 
@@ -10507,6 +10519,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 9d9d1e3453922eb9ef3b4ea5084f1cb77fd745b1 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 17:10:30 -0700
Subject: [PATCH 11/20] 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 5d47203c72..67a3a64fb1 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -9705,7 +9705,9 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
             </div>
         </xsl:when>
         <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 62dc1e7a30e88a88e1b36cb3e9f6416fe11c371f Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 17:11:35 -0700
Subject: [PATCH 12/20] 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 45b9b4274a..7ef08d698c 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 0000000000..8701b0d22b
--- /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 68ab84f01211e6af992d91fb45495d89917e7c58 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 15:53:37 -0700
Subject: [PATCH 13/20] 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   | 1 +
 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, 17 insertions(+), 1 deletion(-)

diff --git a/xsl/localizations/af-ZA.xml b/xsl/localizations/af-ZA.xml
index 37851665ff..6004932bf3 100644
--- a/xsl/localizations/af-ZA.xml
+++ b/xsl/localizations/af-ZA.xml
@@ -276,4 +276,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 f6963726c8..efcd60f9a5 100644
--- a/xsl/localizations/bg-BG.xml
+++ b/xsl/localizations/bg-BG.xml
@@ -300,4 +300,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 40a734ba55..42db4a5c58 100644
--- a/xsl/localizations/ca-ES.xml
+++ b/xsl/localizations/ca-ES.xml
@@ -279,4 +279,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 6d6eb3fe80..f27c9d196e 100644
--- a/xsl/localizations/cs-CZ.xml
+++ b/xsl/localizations/cs-CZ.xml
@@ -274,4 +274,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 efcf250b89..8e3c55a508 100644
--- a/xsl/localizations/de-DE.xml
+++ b/xsl/localizations/de-DE.xml
@@ -281,4 +281,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 b92e767f70..dff4b98a88 100644
--- a/xsl/localizations/en-US.xml
+++ b/xsl/localizations/en-US.xml
@@ -333,5 +333,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 6faede071c..98d3805fa1 100644
--- a/xsl/localizations/es-ES.xml
+++ b/xsl/localizations/es-ES.xml
@@ -280,4 +280,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/fi-FI.xml b/xsl/localizations/fi-FI.xml
index 5dc2cc9cff..e0faaa317b 100644
--- a/xsl/localizations/fi-FI.xml
+++ b/xsl/localizations/fi-FI.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/fr-CA.xml b/xsl/localizations/fr-CA.xml
index 51c3eb135b..141f242d88 100644
--- a/xsl/localizations/fr-CA.xml
+++ b/xsl/localizations/fr-CA.xml
@@ -270,4 +270,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/fr-FR.xml b/xsl/localizations/fr-FR.xml
index 9cce9adccf..66a252a3a4 100644
--- a/xsl/localizations/fr-FR.xml
+++ b/xsl/localizations/fr-FR.xml
@@ -272,4 +272,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 b4bcebd8c3..e6a8049c2f 100644
--- a/xsl/localizations/hu-HU.xml
+++ b/xsl/localizations/hu-HU.xml
@@ -274,4 +274,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 3f5db03d90..533ee1eb13 100644
--- a/xsl/localizations/it-IT.xml
+++ b/xsl/localizations/it-IT.xml
@@ -275,4 +275,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 6c4cb120ae..b409da3e46 100644
--- a/xsl/localizations/ku-CKB.xml
+++ b/xsl/localizations/ku-CKB.xml
@@ -319,4 +319,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 cf2243ecb0..344d292f27 100644
--- a/xsl/localizations/nl-NL.xml
+++ b/xsl/localizations/nl-NL.xml
@@ -327,4 +327,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 41583978d0..9944a7d169 100644
--- a/xsl/localizations/pt-BR.xml
+++ b/xsl/localizations/pt-BR.xml
@@ -283,4 +283,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 96b064d96d..8ff423e81d 100644
--- a/xsl/localizations/pt-PT.xml
+++ b/xsl/localizations/pt-PT.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/zh-HANS.xml b/xsl/localizations/zh-HANS.xml
index 74d2f15a59..0bbd7fecb1 100644
--- a/xsl/localizations/zh-HANS.xml
+++ b/xsl/localizations/zh-HANS.xml
@@ -316,4 +316,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 eadd749cae1b83bf456df7c9d8db8bf06c986b5f Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 17:12:28 -0700
Subject: [PATCH 14/20] 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 67a3a64fb1..7ddf543e84 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -9674,7 +9674,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>
@@ -9688,6 +9690,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()"/>
     <!-- An iframe first -->
     <xsl:choose>
         <!-- A DoenetML interactive lives two lives.  Plain 'ol PreTeXt,  -->
@@ -9708,6 +9711,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 a73af9efea3d1c32cad8c976f4368d7da55328b4 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 17:12:44 -0700
Subject: [PATCH 15/20] 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 8701b0d22b..a21373545d 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 67ac59b8c47b7dc981e63e564df7bafa24b004df Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 17:13:49 -0700
Subject: [PATCH 16/20] 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 4e2e5afebd..78a040484a 100644
--- a/examples/sample-article/publication.xml
+++ b/examples/sample-article/publication.xml
@@ -144,6 +144,13 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
         <feedback href="http://example.com/not-implemented.html"><!-- My Button Text --></feedback>
         <!-- A "portable" build is meant to be a single file that is transportable -->
         <!-- <platform portable="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 b5c9e67bfffe1c16ac2c5c37dcc55307c69fcb7e Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Mon, 18 Aug 2025 17:13:22 -0700
Subject: [PATCH 17/20] 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 b82593ec81..8e7d38fcd8 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 453bf1d8de..b572ea6743 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 999ff001d3..f4ff41a81b 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 d859bfd88d..119ae4d51c 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 81680d0c3e..2e22c45b16 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 d26f44b2ee..aebd5c41e8 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 6be613325e2eddaa5dea8c8e53af1e62e0008f4b Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Tue, 19 Aug 2025 09:50:39 -0700
Subject: [PATCH 18/20] 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 e6e7d84d0f..96ffa26bec 100644
--- a/examples/sample-article/sample-article.xml
+++ b/examples/sample-article/sample-article.xml
@@ -8361,15 +8361,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>
@@ -8400,12 +8400,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>
@@ -9013,7 +9014,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>
@@ -9022,7 +9023,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>
@@ -9057,7 +9058,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 f6cb92f7e205670d2142ecdbc4f93744c9b0b98a Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Tue, 19 Aug 2025 09:53:27 -0700
Subject: [PATCH 19/20] Sample article: add interactive layout examples

---
 .../media/code/splice/splice-resize.js        | 19 +++++
 examples/sample-article/sample-article.xml    | 79 ++++++++++++++++++-
 2 files changed, 96 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 0000000000..1cab4ce578
--- /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 96ffa26bec..2aca3ffa16 100644
--- a/examples/sample-article/sample-article.xml
+++ b/examples/sample-article/sample-article.xml
@@ -9138,8 +9138,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>
@@ -9239,7 +9240,81 @@ 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 under <c>publication/html/interactives</c>. You can also specify different defaults for different types of interactives using sub elements of that. The <c>publication.xml</c> file for this Sample Article uses something like the following to have a based default of <c>"responsive"</c>, but have specific types of interactives default to <c>"fixed-height"</c>.</p>
+
+                <program langauge="xml">
+                    <![CDATA[
+                    <publication>
+                        <html>
+                            <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>
+                    </publication>
+                    ]]>
+                </program>
+
+                <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 1b72574743169402c908654753801bd8c6b17f50 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Tue, 19 Aug 2025 09:55:21 -0700
Subject: [PATCH 20/20] 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 07db207c4e..be9755506d 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;
                 }
             }