Merge pull request #1640 from freeCodeCamp/text-justify-hyphenate

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
@@ -153,7 +158,8 @@ class app.Settings
 
   toggleLayout: (layout, enable) ->
     classList = document.body.classList
-    classList.toggle(layout, enable) unless app.router?.isSettings
+    # sidebar is always shown for settings; its state is updated in app.views.Settings
+    classList.toggle(layout, enable) unless layout is '_sidebar-hidden' and app.router?.isSettings
     classList.toggle('_overlay-scrollbars', $.overlayScrollbarsEnabled())
     return
 

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