m.htmlsanity: figure legend shouldn't be wrapped in a <div>.

The <div> element is not allowed inside <figure> in the HTML5 standard.

diff --git a/doc/css/components.rst b/doc/css/components.rst
index a948367a3e7a7efd916bada560ba579be5933015..1ddcd5db32ace291e7e70b4f440c70a3757a147f 100644 (file)
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -521,7 +521,7 @@ Use the HTML5 :html:`<figure>` tag together with :css:`.m-figure` to style it.
 As with plain image, it's by default centered, slightly rounded and has a
 border around the caption and description. The caption is expected to be in the
 :html:`<figcaption>` element. The description is optional, but should be
-wrapped in some tag as well (for example a :html:`<div>`). The
+wrapped in some tag as well (for example a :html:`<span>`). The
 :css:`.m-fullwidth` class works here too and you can also wrap the
 :html:`<img>` element in an :html:`<a>` tag to make it clickable.
 
@@ -536,7 +536,7 @@ the border is distracting, apply the :css:`.m-flat` class to hide it.
         <figure class="m-figure">
           <img src="ship.jpg" alt="Ship" />
           <figcaption>A Ship</figcaption>
-          <div>Photo © <a href="http://blog.mosra.cz/">The Author</a></div>
+          <span>Photo © <a href="http://blog.mosra.cz/">The Author</a></span>
         </figure>
 
     .. raw:: html
@@ -544,7 +544,7 @@ the border is distracting, apply the :css:`.m-flat` class to hide it.
         <figure class="m-figure">
           <img src="{filename}/static/ship-small.jpg" alt="Ship" />
           <figcaption>A Ship</figcaption>
-          <div>Photo © <a href="http://blog.mosra.cz/">The Author</a></div>
+          <span>Photo © <a href="http://blog.mosra.cz/">The Author</a></span>
         </figure>
 
 `Image grid`_

diff --git a/doc/plugins/htmlsanity.rst b/doc/plugins/htmlsanity.rst
index a2fb2977429d4866230e9fcef2dded93eb0cc53d..c6f6bad8b4d375f8973908f4ab45ef4aa39f3455 100644 (file)
--- a/doc/plugins/htmlsanity.rst
+++ b/doc/plugins/htmlsanity.rst
@@ -66,7 +66,8 @@ horrible, right?) with a custom HTML5 writer derived from
     specified otherwise
 -   Figures are using HTML5 :html:`<figure>` tag instead of
     :html:`<div class="figure">`, figure caption is using HTML5 :html:`<figcaption>`
-    instead of :html:`<p class="caption">`
+    instead of :html:`<p class="caption">` and figure legend is just a :html:`<span>`
+    as :html:`<div>` is not allowed inside :html:`<figure>`
 -   Drops *a lot of* useless classes from elements such as :html:`<div class="docutils">`
 -   Makes it possible to have :html:`<a>` elements with block contents (allowed
     in HTML5)

diff --git a/pelican-plugins/m/htmlsanity.py b/pelican-plugins/m/htmlsanity.py
index 6bf4f31855cd96fece7d344425d50fc833e81726..24dc5fb605b6284051a02c114cea9173fc776b1c 100644 (file)
--- a/pelican-plugins/m/htmlsanity.py
+++ b/pelican-plugins/m/htmlsanity.py
@@ -286,6 +286,14 @@ class SaneHtmlTranslator(HTMLTranslator):
         self.section_level -= 1
         self.body.append('</section>\n')
 
+    # Legend inside figure -- print as <span> (instead of <div class="legend">,
+    # as that's not valid inside HTML5 <figure> element)
+    def visit_legend(self, node):
+        self.body.append(self.starttag(node, 'span'))
+
+    def depart_legend(self, node):
+        self.body.append('</span>\n')
+
     # Literal -- print as <code> (instead of some <span>)
     def visit_literal(self, node):
         self.body.append(self.starttag(node, 'code', ''))