css, m.htmlsanity: use a <div> for .m-figure-description.

I can't read, apparently. Thought that the "flow content" on MDN doesn't
allow any block elements, only inline, but it does. So there's no need
to put a stupid <span> there and then try to make a block element out of
it via CSS again.

diff --git a/css/m-components.css b/css/m-components.css
index 651426f7fbfef269fe69d0c1963f639f3e793c13..8186f05ee2517462c0cc64fd6a582d5d3032b831 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -653,7 +653,6 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig
    ignoring everything after that. So it has to be all inside <figcaption>. See
    also https://github.com/mosra/m.css/issues/117 for details. */
 figure.m-figure figcaption .m-figure-description {
-  display: block;
   margin-top: 0.5rem;
   font-weight: normal;
   font-size: 1rem;

diff --git a/css/m-dark+documentation.compiled.css b/css/m-dark+documentation.compiled.css
index 838942f479761dc423094b1a88a42cde4b7ea5c8..79e29e74020bda1637f86984c2e86a6b5001ef81 100644 (file)
--- a/css/m-dark+documentation.compiled.css
+++ b/css/m-dark+documentation.compiled.css
@@ -902,7 +902,6 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig
   text-decoration: none;
 }
 figure.m-figure figcaption .m-figure-description {
-  display: block;
   margin-top: 0.5rem;
   font-weight: normal;
   font-size: 1rem;

diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 94396a52dc1db83415463f65250013d64bc13001..b8d735abb04c453e709fbf6ab1d46f5759d86d27 100644 (file)
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -902,7 +902,6 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig
   text-decoration: none;
 }
 figure.m-figure figcaption .m-figure-description {
-  display: block;
   margin-top: 0.5rem;
   font-weight: normal;
   font-size: 1rem;

diff --git a/css/m-light+documentation.compiled.css b/css/m-light+documentation.compiled.css
index d773c9c3c45ed3c885429a3f8fcf0339925679ae..23ecea712ef4fbe1428819ee0dfbcc6b5b7143ae 100644 (file)
--- a/css/m-light+documentation.compiled.css
+++ b/css/m-light+documentation.compiled.css
@@ -902,7 +902,6 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig
   text-decoration: none;
 }
 figure.m-figure figcaption .m-figure-description {
-  display: block;
   margin-top: 0.5rem;
   font-weight: normal;
   font-size: 1rem;

diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 31afd8fb39e9ef6562218ad27f1f16625644de94..18db62f0df395c5d73d1c8d8c2c5ccbe98941ac7 100644 (file)
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -902,7 +902,6 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig
   text-decoration: none;
 }
 figure.m-figure figcaption .m-figure-description {
-  display: block;
   margin-top: 0.5rem;
   font-weight: normal;
   font-size: 1rem;

diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index b2fb15d0f0ceffd2eae75a3171deeafb438d97fa..eae94e99ea3ce2ec93a3c8c7896bd54845d8c16b 100644 (file)
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -1013,8 +1013,9 @@ Figure, centered:
       <img src="{static}/static/ship-small.jpg" />
       <figcaption>
         A Ship
-        <span class="m-figure-description">Photo ©
-        <a href="http://blog.mosra.cz/">The Author</a></span>
+        <div class="m-figure-description">
+          Photo © <a href="http://blog.mosra.cz/">The Author</a>
+        </div>
       </figcaption>
     </figure>
 
@@ -1026,8 +1027,9 @@ Figure, centered, image link, flat:
       <a href="http://blog.mosra.cz/"><img src="{static}/static/ship-small.jpg" /></a>
       <figcaption>
         A Ship
-        <span class="m-figure-description">Photo ©
-        <a href="http://blog.mosra.cz/">The Author</a></span>
+        <div class="m-figure-description">
+          Photo © <a href="http://blog.mosra.cz/">The Author</a>
+        </div>
       </figcaption>
     </figure>
 
@@ -1049,10 +1051,11 @@ unnecessary wrapping of the text:
       <img src="{static}/static/ship-small.jpg" />
       <figcaption>
         A Somewhat Lengthy Caption For A Photo
-        <span class="m-figure-description">The Photo Displayed Above Was Kindly
-        Taken And Allowed To Be Used On This Page By
-        <a href="http://blog.mosra.cz/">The Author</a>. All Rights
-        Reserved.</span>
+        <div class="m-figure-description">
+          The Photo Displayed Above Was Kindly Taken And Allowed To Be Used On
+          This Page By <a href="http://blog.mosra.cz/">The Author</a>. All
+          Rights Reserved.
+        </div>
       </figcaption>
     </figure>
 
@@ -1065,10 +1068,11 @@ leaking of the image outside of the page:
       <img src="{static}/static/ship.jpg" />
       <figcaption>
         A Somewhat Lengthy Caption For A Photo
-        <span class="m-figure-description">The Photo Displayed Above Was Kindly
-        Taken And Allowed To Be Used On This Page By
-        <a href="http://blog.mosra.cz/">The Author</a>. All Rights
-        Reserved.</span>
+        <div class="m-figure-description">
+          The Photo Displayed Above Was Kindly Taken And Allowed To Be Used On
+          This Page By <a href="http://blog.mosra.cz/">The Author</a>. All
+          Rights Reserved.
+        </div>
       </figcaption>
     </figure>
 
@@ -1081,10 +1085,11 @@ instead of extending the border and there should be proper padding on bottom):
       <img src="{static}/static/ship-small.jpg" />
       <figcaption>
         A Somewhat Lengthy Caption For A Photo
-        <span class="m-figure-description">The Photo Displayed Above Was Kindly
-        Taken And Allowed To Be Used On This Page By
-        <a href="http://blog.mosra.cz/">The Author</a>. All Rights
-        Reserved.</span>
+        <div class="m-figure-description">
+          The Photo Displayed Above Was Kindly Taken And Allowed To Be Used On
+          This Page By <a href="http://blog.mosra.cz/">The Author</a>. All
+          Rights Reserved.
+        </div>
       </figcaption>
     </figure>
 
@@ -1105,7 +1110,7 @@ Figures of varying colors:
           <img src="{static}/static/ship-small.jpg" />
           <figcaption>
             Default figure
-            <span class="m-figure-description">Text.</span>
+            <div class="m-figure-description">Text.</div>
           </figcaption>
         </figure>
       </div>
@@ -1114,7 +1119,7 @@ Figures of varying colors:
           <img src="{static}/static/ship-small.jpg" />
           <figcaption>
             Primary figure
-            <span class="m-figure-description">Text.</span>
+            <div class="m-figure-description">Text.</div>
           </figcaption>
         </figure>
       </div>
@@ -1123,7 +1128,7 @@ Figures of varying colors:
           <img src="{static}/static/ship-small.jpg" />
           <figcaption>
             Success figure
-            <span class="m-figure-description">Text.</span>
+            <div class="m-figure-description">Text.</div>
           </figcaption>
         </figure>
       </div>
@@ -1132,7 +1137,7 @@ Figures of varying colors:
           <img src="{static}/static/ship-small.jpg" />
           <figcaption>
             Warning figure
-            <span class="m-figure-description">Text.</span>
+            <div class="m-figure-description">Text.</div>
           </figcaption>
         </figure>
       </div>
@@ -1143,7 +1148,7 @@ Figures of varying colors:
           <img src="{static}/static/ship-small.jpg" />
           <figcaption>
             Danger figure
-            <span class="m-figure-description">Text.</span>
+            <div class="m-figure-description">Text.</div>
           </figcaption>
         </figure>
       </div>
@@ -1152,7 +1157,7 @@ Figures of varying colors:
           <img src="{static}/static/ship-small.jpg" />
           <figcaption>
             Info figure
-            <span class="m-figure-description">Text.</span>
+            <div class="m-figure-description">Text.</div>
           </figcaption>
         </figure>
       </div>
@@ -1161,7 +1166,7 @@ Figures of varying colors:
           <img src="{static}/static/ship-small.jpg" />
           <figcaption>
             Dim figure
-            <span class="m-figure-description">Text.</span>
+            <div class="m-figure-description">Text.</div>
           </figcaption>
         </figure>
       </div>

diff --git a/doc/css/components.rst b/doc/css/components.rst
index 64f1bf1090091c80f1e7b5f1d5ba36e223d96f45..63b4cd9ada594681644c27416174e75004519973 100644 (file)
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -665,7 +665,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. Inside it, there can optionally be a longer
-description wrapped in a :css:`.m-figure-description` element. The
+description wrapped in a :css:`div.m-figure-description` element. The
 :css:`.m-fullwidth` class works here too and you can also wrap the
 :html:`<img>` / :html:`<svg>` element in an :html:`<a>` tag to make it
 clickable.
@@ -685,9 +685,9 @@ staying unaffected) by adding one of the `CSS color classes <#colors>`_ to the
           <img src="ship.jpg" alt="Ship" />
           <figcaption>
             A Ship
-            <span class="m-figure-description">
+            <div class="m-figure-description">
               Photo © <a href="http://blog.mosra.cz/">The Author</a>
-            </span>
+            </div>
           </figcaption>
         </figure>
 
@@ -697,9 +697,9 @@ staying unaffected) by adding one of the `CSS color classes <#colors>`_ to the
           <img src="{static}/static/ship-small.jpg" alt="Ship" />
           <figcaption>
             A Ship
-            <span class="m-figure-description">
+            <div class="m-figure-description">
               Photo © <a href="http://blog.mosra.cz/">The Author</a>
-            </span>
+            </div>
           </figcaption>
         </figure>
 
@@ -708,15 +708,16 @@ staying unaffected) by adding one of the `CSS color classes <#colors>`_ to the
     While a description *could* be put also after a :html:`<figcaption>` such
     as in the following snippet, CSS styling used by m.css causes Firefox to
     display only the :html:`<figcaption>`, ignoring everything after. Thus it's
-    recommended to always nest the description in a :css:`.m-figure-description`
-    element inside. See also :gh:`mosra/m.css#117` for more information.
+    recommended to always nest the description in a
+    :css:`div.m-figure-description` element inside. See also
+    :gh:`mosra/m.css#117` for more information.
 
     .. code:: html
 
         <figure class="m-figure">
           <img src="ship.jpg" alt="Ship" />
           <figcaption>A Ship</figcaption>
-          <span>Photo © The Author</span> <!-- This will get ignored by Firefox! -->
+          <div>Photo © The Author</div> <!-- This will get ignored by Firefox! -->
         </figure>
 
 .. note-info::
@@ -1157,7 +1158,7 @@ assigned caption and description. It behaves the same as `image figures`_, the
 figure width being defined by the math equation size. Create a
 :html:`<figure class="m-figure">` element and put :html:`<svg class="m-math">`
 as a first child. The remaining content of the figure can be
-:html:`<figcaption>` with optional :css:`.m-figure-description` same as with
+:html:`<figcaption>` with optional :css:`div.m-figure-description` same as with
 `image figures <#figures>`_. Add the :css:`.m-flat` class to the
 :html:`<figure>` to remove the outer border and equation background,
 `CSS color classes`_ on the :html:`<figure>` affect the figure, on the
@@ -1174,7 +1175,7 @@ as a first child. The remaining content of the figure can be
           </svg>
           <figcaption>
             Theorem
-            <span class="m-figure-description">A Pythagorean one.</span>
+            <div class="m-figure-description">A Pythagorean one.</div>
           </figcaption>
         </figure>
 
@@ -1204,7 +1205,7 @@ as a first child. The remaining content of the figure can be
           </svg>
           <figcaption>
             Theorem
-            <span class="m-figure-description">A Pythagorean one.</span>
+            <div class="m-figure-description">A Pythagorean one.</div>
           </figcaption>
         </figure>
 
@@ -1345,7 +1346,7 @@ right after.
           </svg>
           <figcaption>
             Impenetrable logic
-            <span class="m-figure-description">No.</span>
+            <div class="m-figure-description">No.</div>
           </figcaption>
         </figure>
 
@@ -1381,7 +1382,7 @@ right after.
         </svg>
         <figcaption>
           Impenetrable logic
-          <span class="m-figure-description">No.</span>
+          <div class="m-figure-description">No.</div>
         </figcaption>
         </figure>
 

diff --git a/plugins/m/htmlsanity.py b/plugins/m/htmlsanity.py
index bfb404873ea0633c1edea5491d6bb4c90116d401..ce6d6ab18446ccf4685135c545574cf49c17f66a 100644 (file)
--- a/plugins/m/htmlsanity.py
+++ b/plugins/m/htmlsanity.py
@@ -465,7 +465,7 @@ class SaneHtmlTranslator(HTMLTranslator):
     def depart_figure(self, node):
         # See depart_caption() below for details
         if self.in_figure_caption_with_description:
-            self.body.append('</span>\n</figcaption>\n')
+            self.body.append('</div>\n</figcaption>\n')
             self.in_figure_caption_with_description = False
         self.body.append('</figure>\n')
 
@@ -484,7 +484,7 @@ class SaneHtmlTranslator(HTMLTranslator):
         # such, figure out a way to query if there are useful nodes. Can't
         # check for just nodes.legend, as there can be arbitrary other stuff.
         if 'classes' in node.parent and 'm-figure' in node.parent['classes'] and node.next_node(descend=False, siblings=True) is not None:
-            self.body.append(self.starttag(node, 'span', CLASS='m-figure-description'))
+            self.body.append(self.starttag(node, 'div', CLASS='m-figure-description'))
             self.in_figure_caption_with_description = True
         else:
             self.body.append('</figcaption>\n')

diff --git a/plugins/m/test/components/page.html b/plugins/m/test/components/page.html
index e3435e669c4044447db1a97e646f983ffc2915c8..c5cf8767c9d3b9d54374495deb9697e4e0650576 100644 (file)
--- a/plugins/m/test/components/page.html
+++ b/plugins/m/test/components/page.html
@@ -64,9 +64,9 @@ snippet</pre>
 <svg class="m-math" style="width: 5rem; height: 5rem;"></svg><p>Math figure contents.</p>
 </figure>
 <figure class="m-figure">
-<svg class="m-graph" style="width: 5rem; height: 5rem;"></svg><figcaption>Caption<span class="m-figure-description">
+<svg class="m-graph" style="width: 5rem; height: 5rem;"></svg><figcaption>Caption<div class="m-figure-description">
 <p>Graph figure contents.</p>
-</span>
+</div>
 </figcaption>
 </figure>
 <div class="m-text m-dim">

diff --git a/plugins/m/test/dot/page-240.html b/plugins/m/test/dot/page-240.html
index d00a0c77774491d414c8d048c5e7bd9e45a34c96..3f14d8db079e1839eae97ba85ec243f34cb4a729 100644 (file)
--- a/plugins/m/test/dot/page-240.html
+++ b/plugins/m/test/dot/page-240.html
@@ -232,9 +232,9 @@ and the arrowheads, nothing else. Non-default font size should be preserved.</p>
 </g>
 </g>
 </svg>
-<figcaption>This is a title.<span class="m-figure-description">
+<figcaption>This is a title.<div class="m-figure-description">
 <p>This is a description.</p>
-</span>
+</div>
 </figcaption>
 </figure>
 <figure class="m-figure">

diff --git a/plugins/m/test/dot/page.html b/plugins/m/test/dot/page.html
index 1e85bff2b7e2809d0cba330657838a2cd71671db..32c7f6ab861df94dd7eb51611b3b60bff86f7a1f 100644 (file)
--- a/plugins/m/test/dot/page.html
+++ b/plugins/m/test/dot/page.html
@@ -232,9 +232,9 @@ and the arrowheads, nothing else. Non-default font size should be preserved.</p>
 </g>
 </g>
 </svg>
-<figcaption>This is a title.<span class="m-figure-description">
+<figcaption>This is a title.<div class="m-figure-description">
 <p>This is a description.</p>
-</span>
+</div>
 </figcaption>
 </figure>
 <figure class="m-figure">

diff --git a/plugins/m/test/images/page.html b/plugins/m/test/images/page.html
index bbb6e45284af1feec8e691a70d653c34bd429b48..a91ee47b78103fbabe50bb69dca367a0e86da9dd 100644 (file)
--- a/plugins/m/test/images/page.html
+++ b/plugins/m/test/images/page.html
@@ -44,8 +44,8 @@
 <p>Figure:</p>
 <figure class="m-figure">
 <img src="./ship.jpg" />
-<figcaption>A Ship<span class="m-figure-description">
-Yes.</span>
+<figcaption>A Ship<div class="m-figure-description">
+Yes.</div>
 </figcaption>
 </figure>
 <p>Figure with link, scale and only a caption:</p>