Settings: justified layout and hyphenation

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

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>

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; }