css: work around Firefox-specific behavior with .m-figure.

The `.m-figure > *` has `display: table-caption;` to make overlong
content wrap to width of the image, instead of pushing out the figure
border. However, this makes Firefox render just the first element and
ignore everything after, thus the original figure descriptions weren't
visible in Firefox, only in Chrome.

Because HTML5 says <figcaption> has to be right inside <figure>, I can't
wrap the caption together with other content in a <span>, although that
would make Firefox render things properly. Instead I'm nesting all
description inside <figcaption> in a .m-figure-description, which then
reverts all styling applied for <figcaption>. Kinda ew, but works.

Originally this was reported for just image figures, but the same
problem applies to math and graph figures as well. Not for code/console
figure though, as those don't have `display: table-caption;` and instead
span the whole width always.

This has to be fixed in m.htmlsanity as well, doing that in a separate
commit as it's a bit involved as well.

css/m-components.css

@@ -538,6 +538,8 @@ figure.m-figure.m-flat:before {
 figure.m-figure > * {
   margin-left: 1rem;
   margin-right: 1rem;
+  /* So overflowing figcaption or any other content doesn't expand the figure
+     border but rather gets wrapped */
   display: table-caption;
   caption-side: bottom;
 }
@@ -644,6 +646,21 @@ figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcapt
 figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure figcaption a {
   text-decoration: var(--link-decoration-heading);
 }
+/* Figure description, expected to be inside <figcaption> and has all styling
+   from <figcaption> reverted. Originally this was done by adding a <span>
+   after <figcaption> but while fine in Chrome, the `display: table-caption;`
+   for everything in <figure> made Firefox render just the <figcaption>,
+   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;
+}
+figure.m-figure figcaption .m-figure-description a {
+  text-decoration: var(--link-decoration);
+}
 
 /* Image grid */
 .m-imagegrid > div {
@@ -1277,14 +1294,19 @@ figure.m-figure.m-default:before { border-color: var(--default-filled-background
 figure.m-figure.m-default figcaption { color: var(--default-color); }
 figure.m-figure.m-primary:before { border-color: var(--primary-filled-background-color); }
 figure.m-figure.m-primary figcaption { color: var(--primary-color); }
+figure.m-figure.m-primary figcaption .m-figure-description { color: var(--default-color); }
 figure.m-figure.m-success:before { border-color: var(--success-filled-background-color); }
 figure.m-figure.m-success figcaption { color: var(--success-color); }
+figure.m-figure.m-success figcaption .m-figure-description { color: var(--default-color); }
 figure.m-figure.m-warning:before { border-color: var(--warning-filled-background-color); }
 figure.m-figure.m-warning figcaption { color: var(--warning-color); }
+figure.m-figure.m-warning figcaption .m-figure-description { color: var(--default-color); }
 figure.m-figure.m-danger:before { border-color: var(--danger-filled-background-color); }
 figure.m-figure.m-danger figcaption { color: var(--danger-color); }
+figure.m-figure.m-danger figcaption .m-figure-description { color: var(--default-color); }
 figure.m-figure.m-info:before { border-color: var(--info-filled-background-color); }
 figure.m-figure.m-info figcaption { color: var(--info-color); }
+figure.m-figure.m-info figcaption .m-figure-description { color: var(--default-color); }
 figure.m-figure.m-dim:before { border-color: var(--dim-filled-background-color); }
 figure.m-figure.m-dim { color: var(--dim-color); }
 figure.m-figure.m-dim a { color: var(--dim-link-color); }

doc/css/components-test.rst

@@ -1011,8 +1011,11 @@ Figure, centered:
 
     <figure class="m-figure">
       <img src="{static}/static/ship-small.jpg" />
-      <figcaption>A Ship</figcaption>
-      <span>Photo © <a href="http://blog.mosra.cz/">The Author</a></span>
+      <figcaption>
+        A Ship
+        <span class="m-figure-description">Photo ©
+        <a href="http://blog.mosra.cz/">The Author</a></span>
+      </figcaption>
     </figure>
 
 Figure, centered, image link, flat:
@@ -1021,8 +1024,11 @@ Figure, centered, image link, flat:
 
     <figure class="m-figure m-flat">
       <a href="http://blog.mosra.cz/"><img src="{static}/static/ship-small.jpg" /></a>
-      <figcaption>A Ship</figcaption>
-      <span>Photo © <a href="http://blog.mosra.cz/">The Author</a></span>
+      <figcaption>
+        A Ship
+        <span class="m-figure-description">Photo ©
+        <a href="http://blog.mosra.cz/">The Author</a></span>
+      </figcaption>
     </figure>
 
 Figure, fullwidth, without description (yes, it should be pixelated):
@@ -1041,10 +1047,13 @@ unnecessary wrapping of the text:
 
     <figure class="m-figure m-fullwidth">
       <img src="{static}/static/ship-small.jpg" />
-      <figcaption>A Somewhat Lengthy Caption For A Photo</figcaption>
-      <span>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>
+      <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>
+      </figcaption>
     </figure>
 
 Figure with a large image but not fullwidth, should look the same as above, no
@@ -1054,10 +1063,13 @@ leaking of the image outside of the page:
 
     <figure class="m-figure">
       <img src="{static}/static/ship.jpg" />
-      <figcaption>A Somewhat Lengthy Caption For A Photo</figcaption>
-      <span>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>
+      <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>
+      </figcaption>
     </figure>
 
 Figure with a long caption and description, then just a caption (it should wrap
@@ -1067,10 +1079,13 @@ instead of extending the border and there should be proper padding on bottom):
 
     <figure class="m-figure">
       <img src="{static}/static/ship-small.jpg" />
-      <figcaption>A Somewhat Lengthy Caption For A Photo</figcaption>
-      <span>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>
+      <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>
+      </figcaption>
     </figure>
 
 .. raw:: html
@@ -1088,52 +1103,66 @@ Figures of varying colors:
       <div class="m-col-m-3 m-col-s-6">
         <figure class="m-figure m-default">
           <img src="{static}/static/ship-small.jpg" />
-          <figcaption>Default figure</figcaption>
-          <span>Text.</span>
+          <figcaption>
+            Default figure
+            <span class="m-figure-description">Text.</span>
+          </figcaption>
         </figure>
       </div>
       <div class="m-col-m-3 m-col-s-6">
         <figure class="m-figure m-primary">
           <img src="{static}/static/ship-small.jpg" />
-          <figcaption>Primary figure</figcaption>
-          <span>Text.</span>
+          <figcaption>
+            Primary figure
+            <span class="m-figure-description">Text.</span>
+          </figcaption>
         </figure>
       </div>
       <div class="m-col-m-3 m-col-s-6">
         <figure class="m-figure m-success">
           <img src="{static}/static/ship-small.jpg" />
-          <figcaption>Success figure</figcaption>
-          <span>Text.</span>
+          <figcaption>
+            Success figure
+            <span class="m-figure-description">Text.</span>
+          </figcaption>
         </figure>
       </div>
       <div class="m-col-m-3 m-col-s-6">
         <figure class="m-figure m-warning">
           <img src="{static}/static/ship-small.jpg" />
-          <figcaption>Warning figure</figcaption>
-          <span>Text.</span>
+          <figcaption>
+            Warning figure
+            <span class="m-figure-description">Text.</span>
+          </figcaption>
         </figure>
       </div>
     </div>
     <div class="m-row">
       <div class="m-col-m-3 m-col-s-6">
         <figure class="m-figure m-danger">
           <img src="{static}/static/ship-small.jpg" />
-          <figcaption>Danger figure</figcaption>
-          <span>Text.</span>
+          <figcaption>
+            Danger figure
+            <span class="m-figure-description">Text.</span>
+          </figcaption>
         </figure>
       </div>
       <div class="m-col-m-3 m-col-s-6">
         <figure class="m-figure m-info">
           <img src="{static}/static/ship-small.jpg" />
-          <figcaption>Info figure</figcaption>
-          <span>Text.</span>
+          <figcaption>
+            Info figure
+            <span class="m-figure-description">Text.</span>
+          </figcaption>
         </figure>
       </div>
       <div class="m-col-m-3 m-col-s-6">
         <figure class="m-figure m-dim">
           <img src="{static}/static/ship-small.jpg" />
-          <figcaption>Dim figure</figcaption>
-          <span>Text.</span>
+          <figcaption>
+            Dim figure
+            <span class="m-figure-description">Text.</span>
+          </figcaption>
         </figure>
       </div>
     </div>