use CSS to style @placement="break" images in XHTML and HTML5

Signed-off-by: chrispy <[email protected]>
chrispy-snps · Nov 9, 2024 · f0f3bc7 · f0f3bc7
1 parent 3eeb9fd
commit f0f3bc7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 22 deletions.
diff --git a/src/main/plugins/org.dita.html5/sass/_figures.scss b/src/main/plugins/org.dita.html5/sass/_figures.scss
@@ -56,6 +56,12 @@
 
 /* Align images based on @align on topic/image */
 
+img.break {
+  display: block;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
 div.imageleft {
   text-align: left;
 }

diff --git a/src/main/plugins/org.dita.html5/xsl/topic.xsl b/src/main/plugins/org.dita.html5/xsl/topic.xsl
@@ -1364,15 +1364,7 @@ See the accompanying LICENSE file for applicable license.
   <!-- =========== IMAGE/OBJECT =========== -->
 
   <xsl:template match="*[contains(@class, ' topic/image ')]" name="topic.image">
-    <!-- build any pre break indicated by style -->
-    <xsl:choose>
-      <xsl:when test="parent::*[contains(@class, ' topic/fig ')][contains(@frame, 'top ')]">
-        <!-- NOP if there is already a break implied by a parent property -->
-      </xsl:when>
-      <xsl:when test="@placement = 'break'">
-        <br/>
-      </xsl:when>
-    </xsl:choose>
+    <!-- apply any @placement or @align directives -->
     <xsl:call-template name="setaname"/>
     <xsl:choose>
       <xsl:when test="@placement = 'break'"><!--Align only works for break-->
@@ -1401,8 +1393,6 @@ See the accompanying LICENSE file for applicable license.
         <xsl:call-template name="topic-image"/>
       </xsl:otherwise>
     </xsl:choose>
-    <!-- build any post break indicated by style -->
-    <xsl:if test="not(@placement = 'inline')"><br/></xsl:if>
     <!-- image name for review -->
     <xsl:if test="$ARTLBL = 'yes'"> [<xsl:value-of select="@href"/>] </xsl:if>
   </xsl:template>
@@ -1414,9 +1404,12 @@ See the accompanying LICENSE file for applicable license.
         <xsl:with-param name="default-output-class">
           <xsl:if test="@placement = 'break'"><!--Align only works for break-->
             <xsl:choose>
+              <!-- when @align is used, the <img> is an inline element inside its <div> container -->
               <xsl:when test="@align = 'left'">imageleft</xsl:when>
               <xsl:when test="@align = 'right'">imageright</xsl:when>
               <xsl:when test="@align = 'center'">imagecenter</xsl:when>
+              <!-- otherwise, we apply "break" via CSS (as <img> are inline by default)-->
+              <xsl:otherwise>break</xsl:otherwise>
             </xsl:choose>
           </xsl:if>
         </xsl:with-param>

diff --git a/src/main/plugins/org.dita.xhtml/resource/commonltr.css b/src/main/plugins/org.dita.xhtml/resource/commonltr.css
@@ -361,6 +361,11 @@ ul.simple {
   margin-bottom: 1em;
 }
 /* Align images based on @align on topic/image */
+img.break {
+  display: block;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
 div.imageleft {
   text-align: left;
 }

diff --git a/src/main/plugins/org.dita.xhtml/xsl/xslhtml/dita2htmlImpl.xsl b/src/main/plugins/org.dita.xhtml/xsl/xslhtml/dita2htmlImpl.xsl
@@ -1530,15 +1530,7 @@ See the accompanying LICENSE file for applicable license.
 <!-- =========== IMAGE/OBJECT =========== -->
 
 <xsl:template match="*[contains(@class, ' topic/image ')]" name="topic.image">
-  <!-- build any pre break indicated by style -->
-  <xsl:choose>
-    <xsl:when test="parent::*[contains(@class, ' topic/fig ')][contains(@frame, 'top ')]">
-      <!-- NOP if there is already a break implied by a parent property -->
-    </xsl:when>
-    <xsl:when test="@placement = 'break'">
-      <br/>
-    </xsl:when>
-  </xsl:choose>
+  <!-- apply any @placement or @align directives -->
   <xsl:call-template name="setaname"/>
   <xsl:choose>
     <xsl:when test="@placement = 'break'"><!--Align only works for break-->
@@ -1567,8 +1559,6 @@ See the accompanying LICENSE file for applicable license.
       <xsl:call-template name="topic-image"/>
     </xsl:otherwise>
   </xsl:choose>
-  <!-- build any post break indicated by style -->
-  <xsl:if test="not(@placement = 'inline')"><br/></xsl:if>
   <!-- image name for review -->
   <xsl:if test="$ARTLBL = 'yes'"> [<xsl:value-of select="@href"/>] </xsl:if>
 </xsl:template>
@@ -1580,9 +1570,12 @@ See the accompanying LICENSE file for applicable license.
       <xsl:with-param name="default-output-class">
         <xsl:if test="@placement = 'break'"><!--Align only works for break-->
           <xsl:choose>
+            <!-- when @align is used, the <img> is an inline element inside its <div> container -->
             <xsl:when test="@align = 'left'">imageleft</xsl:when>
             <xsl:when test="@align = 'right'">imageright</xsl:when>
             <xsl:when test="@align = 'center'">imagecenter</xsl:when>
+            <!-- otherwise, we apply "break" via CSS (as <img> are inline by default)-->
+            <xsl:otherwise>break</xsl:otherwise>
           </xsl:choose>
         </xsl:if>
       </xsl:with-param>