css: add .m-link-wrap class for wrapping long link URLs.

And add actual docs mentioning various wrapping methods.

diff --git a/css/m-components.css b/css/m-components.css
index b54df4cc0fb986a2d35b65c1bcd3b6cc0686ea8c..0573c48d6534e750767351f79df13530e5ef4561 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -113,6 +113,9 @@ mark {
   background-color: var(--mark-background-color);
   color: var(--mark-color);
 }
+.m-link-wrap {
+  word-break: break-all;
+}
 
 /* Block/inline code */
 pre, code {

diff --git a/css/m-dark+documentation.compiled.css b/css/m-dark+documentation.compiled.css
index 91bd3d193cc03622bc530b6506dc753e64ab655a..39ae0b9eebf762133504d93084db22627746b2a7 100644 (file)
--- a/css/m-dark+documentation.compiled.css
+++ b/css/m-dark+documentation.compiled.css
@@ -422,6 +422,9 @@ mark {
   background-color: #c7cf2f;
   color: #2f83cc;
 }
+.m-link-wrap {
+  word-break: break-all;
+}
 pre, code {
   font-family: 'Source Code Pro', monospace, monospace, monospace;
   font-size: 0.9em;

diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 30cb0133b46a3c11e4fb23d1b8cca79952654daa..b169ce774fc11130507976dd9be1797c1e380753 100644 (file)
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -422,6 +422,9 @@ mark {
   background-color: #c7cf2f;
   color: #2f83cc;
 }
+.m-link-wrap {
+  word-break: break-all;
+}
 pre, code {
   font-family: 'Source Code Pro', monospace, monospace, monospace;
   font-size: 0.9em;

diff --git a/css/m-light+documentation.compiled.css b/css/m-light+documentation.compiled.css
index d5c86dfb29b65aef11a45f8489377aa7dcfe687a..85038d53e69dde5d589d8bab05f4bd4e35b9853e 100644 (file)
--- a/css/m-light+documentation.compiled.css
+++ b/css/m-light+documentation.compiled.css
@@ -422,6 +422,9 @@ mark {
   background-color: #e6e69c;
   color: #4c93d3;
 }
+.m-link-wrap {
+  word-break: break-all;
+}
 pre, code {
   font-family: 'Source Code Pro', monospace, monospace, monospace;
   font-size: 1em;

diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 6a1a889dbdb2c683b50ea7e1ac3fd1e34deac446..0c426c9a7970249dace8c3f61196eba784e97d01 100644 (file)
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -422,6 +422,9 @@ mark {
   background-color: #e6e69c;
   color: #4c93d3;
 }
+.m-link-wrap {
+  word-break: break-all;
+}
 pre, code {
   font-family: 'Source Code Pro', monospace, monospace, monospace;
   font-size: 1em;

diff --git a/doc/css/typography.rst b/doc/css/typography.rst
index d8694f777874a19893de81bbcf5fe09311d13896..03a6ce15406c4f1b1371eea80c1515515fd222e6 100644 (file)
--- a/doc/css/typography.rst
+++ b/doc/css/typography.rst
@@ -432,8 +432,8 @@ inside the :html:`<dd>` to provide styled back-references to the original text.
           </dd>
         </dl>
 
-`Text alignment`_
-=================
+`Text alignment and wrapping`_
+==============================
 
 Use :css:`.m-text-left`, :css:`.m-text-right` or :css:`.m-text-center` to
 align text inside its parent element. Use :css:`.m-text-top`,
@@ -441,6 +441,48 @@ align text inside its parent element. Use :css:`.m-text-top`,
 example in a table cell. See `Floating around <{filename}/css/grid.rst#floating-around>`_
 in the grid system for aligning and floating blocks in a similar way.
 
+By default, all text is wrapped according to default HTML rules. In order to
+look better on very narrow screens, it's possible to use :html:`&shy;` to
+hyphenate words --- either manually on a case-by-case basis, or using the
+`m.htmlsanity plugin <{filename}/plugins/htmlsanity.rst#hyphenation>`_. The
+:html:`<wbr/>` HTML tag does the same without rendering any hyphens, and
+finally there's a :css:`.m-link-wrap` you can apply to links with long URLs to
+break anywhere:
+
+.. code-figure::
+
+    .. code:: html
+
+        in&shy;com&shy;pre&shy;hen&shy;si&shy;bil&shy;i&shy;ties
+
+        in<wbr/>com<wbr/>pre<wbr/>hen<wbr/>si<wbr/>bil<wbr/>i<wbr/>ties
+
+        <a href="http://…" class="m-link-wrap">
+          llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.co.uk
+        </a>
+
+    .. container:: m-row
+
+        .. container:: m-col-m-2 m-push-m-2 m-col-t-3 m-nopady
+
+            .. raw:: html
+
+                in&shy;com&shy;pre&shy;hen&shy;si&shy;bil&shy;i&shy;ties
+
+        .. container:: m-col-m-2 m-push-m-2 m-col-t-3 m-nopady
+
+            .. raw:: html
+
+                in<wbr/>com<wbr/>pre<wbr/>hen<wbr/>si<wbr/>bil<wbr/>i<wbr/>ties
+
+        .. container:: m-col-m-4 m-push-m-2 m-col-t-6 m-nopady
+
+            .. raw:: html
+
+                <a href="http://llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.co.uk" class="m-link-wrap">
+                  llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.co.uk
+                </a>
+
 `Inline elements`_
 ==================