From 48bbdc211b65ca022306a32d234ca0b34d60f328 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Fri, 8 May 2020 16:13:20 +0200
Subject: [PATCH] css: add .m-link-wrap class for wrapping long link URLs.

And add actual docs mentioning various wrapping methods.
---
 css/m-components.css                   |  3 ++
 css/m-dark+documentation.compiled.css  |  3 ++
 css/m-dark.compiled.css                |  3 ++
 css/m-light+documentation.compiled.css |  3 ++
 css/m-light.compiled.css               |  3 ++
 doc/css/typography.rst                 | 46 ++++++++++++++++++++++++--
 6 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index b54df4cc..0573c48d 100644
--- 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 91bd3d19..39ae0b9e 100644
--- 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 30cb0133..b169ce77 100644
--- 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 d5c86dfb..85038d53 100644
--- 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 6a1a889d..0c426c9a 100644
--- 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 d8694f77..03a6ce15 100644
--- 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`_
 ==================
 
-- 
2.30.2