Automatically render image as figure with figcaption if it has a title

iamgio · Jul 17, 2024 · ed295a7 · ed295a7
1 parent 563b2d6
commit ed295a7
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 7 deletions.
diff --git a/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt b/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt
@@ -1,6 +1,7 @@
 package eu.iamgio.quarkdown.rendering.html
 
 import eu.iamgio.quarkdown.ast.FunctionCallNode
+import eu.iamgio.quarkdown.ast.Image
 import eu.iamgio.quarkdown.ast.Math
 import eu.iamgio.quarkdown.ast.MathSpan
 import eu.iamgio.quarkdown.ast.Node
@@ -48,6 +49,18 @@ class QuarkdownHtmlNodeRenderer(context: Context) : BaseHtmlNodeRenderer(context
 
     // Quarkdown node rendering
 
+    // The Quarkdown flavor renders an image title as a figure caption, if present.
+    override fun visit(node: Image): String {
+        val imgTag = super.visit(node)
+
+        return node.link.title?.let { title ->
+            buildTag("figure") {
+                +imgTag
+                +buildTag("figcaption", title)
+            }
+        } ?: imgTag
+    }
+
     // The function was already expanded by previous stages: its output nodes are stored in its children.
     override fun visit(node: FunctionCallNode): CharSequence = node.children.joinToString(separator = "") { it.accept(this) }
 

diff --git a/core/src/main/resources/render/html-wrapper.html b/core/src/main/resources/render/html-wrapper.html
@@ -42,6 +42,10 @@
             width: 100%;
         }
 
+        figure {
+            text-align: center;
+        }
+
         .align {
             width: 100%;
             display: flex;

diff --git a/core/src/test/kotlin/eu/iamgio/quarkdown/HtmlNodeRendererTest.kt b/core/src/test/kotlin/eu/iamgio/quarkdown/HtmlNodeRendererTest.kt
@@ -42,6 +42,7 @@ import eu.iamgio.quarkdown.context.Context
 import eu.iamgio.quarkdown.context.MutableContext
 import eu.iamgio.quarkdown.document.page.cm
 import eu.iamgio.quarkdown.document.page.inch
+import eu.iamgio.quarkdown.flavor.base.BaseMarkdownFlavor
 import eu.iamgio.quarkdown.flavor.quarkdown.QuarkdownFlavor
 import eu.iamgio.quarkdown.misc.Color
 import eu.iamgio.quarkdown.pipeline.PipelineOptions
@@ -73,7 +74,7 @@ class HtmlNodeRendererTest {
             )
         }
 
-        return QuarkdownFlavor.rendererFactory.html(context).nodeRenderer
+        return context.flavor.rendererFactory.html(context).nodeRenderer
     }
 
     private fun Node.render(context: Context = MutableContext(QuarkdownFlavor)) = this.accept(renderer(context))
@@ -162,6 +163,14 @@ class HtmlNodeRendererTest {
                 height = null,
             ).render(),
         )
+        assertEquals(
+            out.next(),
+            Image(
+                Link(label = listOf(), url = "/url", title = "Title"),
+                width = null,
+                height = null,
+            ).render(MutableContext(BaseMarkdownFlavor)),
+        ) // The figcaption appears only with the Quarkdown rendering!
         assertEquals(
             out.next(),
             Image(

diff --git a/core/src/test/resources/rendering/inline/image.html b/core/src/test/resources/rendering/inline/image.html
@@ -6,12 +6,36 @@
 
 ---
 
-<img src="/url" alt="Foo bar" title="Title" />
+<figure>
+    <img src="/url" alt="" title="Title" />
+    <figcaption>
+        Title
+    </figcaption>
+</figure>
 
 ---
 
-<img src="/url" alt="Foo bar" title="Title" />
+<figure>
+    <img src="/url" alt="Foo bar" title="Title" />
+    <figcaption>
+        Title
+    </figcaption>
+</figure>
 
 ---
 
-<img src="/url" alt="Foo bar" title="Title" width="150" height="100" />
+<figure>
+    <img src="/url" alt="Foo bar" title="Title" />
+    <figcaption>
+        Title
+    </figcaption>
+</figure>
+
+---
+
+<figure>
+    <img src="/url" alt="Foo bar" title="Title" width="150" height="100" />
+    <figcaption>
+        Title
+    </figcaption>
+</figure>
diff --git a/core/src/test/resources/rendering/inline/refimage.html b/core/src/test/resources/rendering/inline/refimage.html
@@ -1,12 +1,27 @@
-<img src="/url" alt="Foo" title="Title" />
+<figure>
+    <img src="/url" alt="Foo" title="Title" />
+    <figcaption>
+        Title
+    </figcaption>
+</figure>
 
 ---
 
-<img src="/url" alt="label" title="Title" />
+<figure>
+    <img src="/url" alt="label" title="Title" />
+    <figcaption>
+        Title
+    </figcaption>
+</figure>
 
 ---
 
-<img src="/url" alt="label" title="Title" width="150" height="100" />
+<figure>
+    <img src="/url" alt="label" title="Title" width="150" height="100" />
+    <figcaption>
+        Title
+    </figcaption>
+</figure>
 
 ---