[devdocsgjs/main: 1831/1867] Settings: justified layout and hyphenation

[Andy Holmes <andyholmes src gnome org>]

commit d2495fbc2ef1ae5e81660a911e1b480e4661dc23
Author: Simon Legner <Simon Legner gmail com>
Date:   Fri Oct 22 21:24:32 2021 +0200

    Settings: justified layout and hyphenation

 assets/javascripts/app/settings.coffee                  | 7 ++++++-
 assets/javascripts/templates/pages/settings_tmpl.coffee | 3 +++
 assets/stylesheets/components/_content.scss             | 5 +++++
 3 files changed, 14 insertions(+), 1 deletion(-)
---
diff --git a/assets/javascripts/app/settings.coffee b/assets/javascripts/app/settings.coffee
index b885fd5e..eef7acf3 100644
--- a/assets/javascripts/app/settings.coffee
+++ b/assets/javascripts/app/settings.coffee
@@ -24,7 +24,12 @@ class app.Settings
     'news'
   ]
 
-  LAYOUTS: ['_max-width', '_sidebar-hidden', '_native-scrollbars']
+  LAYOUTS: [
+    '_max-width'
+    '_sidebar-hidden'
+    '_native-scrollbars'
+    '_text-justify-hyphenate'
+  ]
 
   @defaults:
     count: 0
diff --git a/assets/javascripts/templates/pages/settings_tmpl.coffee 
b/assets/javascripts/templates/pages/settings_tmpl.coffee
index 1bf8e15e..73c65650 100644
--- a/assets/javascripts/templates/pages/settings_tmpl.coffee
+++ b/assets/javascripts/templates/pages/settings_tmpl.coffee
@@ -27,6 +27,9 @@ app.templates.settingsPage = (settings) -> """
       <label class="_settings-label _setting-max-width">
         <input type="checkbox" form="settings" name="layout" value="_max-width"#{if settings['_max-width'] 
then ' checked' else ''}>Enable fixed-width layout
       </label>
+      <label class="_settings-label _setting-text-justify-hyphenate">
+        <input type="checkbox" form="settings" name="layout" value="_text-justify-hyphenate"#{if 
settings['_text-justify-hyphenate'] then ' checked' else ''}>Enable justified layout and automatic hyphenation
+      </label>
       <label class="_settings-label _hide-on-mobile">
         <input type="checkbox" form="settings" name="layout" value="_sidebar-hidden"#{if 
settings['_sidebar-hidden'] then ' checked' else ''}>Automatically hide and show the sidebar
         <small>Tip: drag the edge of the sidebar to resize it.</small>
diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss
index 18c5622b..895cf7dd 100644
--- a/assets/stylesheets/components/_content.scss
+++ b/assets/stylesheets/components/_content.scss
@@ -33,6 +33,11 @@
     margin-top: var(--headerHeight);
   }
 
+  ._text-justify-hyphenate & {
+    text-align: justify;
+    hyphens: auto;
+  }
+
   ._overlay-scrollbars & { padding-left: .625rem; }
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { margin-left: 0; }
   @supports (-ms-overflow-style: none) { margin-left: 0; }