Merge pull request #392 from RebonackAl/improvement/clean-typography-symbols

[#390] Typography Symbols are not mapped to universal keyboard standards.

public/css/style.scss

@@ -384,7 +384,7 @@ a:hover {
       grid-template-columns: 1fr 1fr;
       gap: 1rem;
       align-items: center;
-      justify-items: center;
+      justify-items: left;
     }
 
     .check {
@@ -418,6 +418,40 @@ a:hover {
         }
       }
     }
+    .typographyCheck {
+      grid-row: 2;
+      grid-column: 1/3;
+
+      span {
+        display: block;
+        font-size: 0.76rem;
+        color: var(--sub-color);
+        margin-left: 1.5rem;
+      }
+
+      input {
+        margin: 0 !important;
+        cursor: pointer;
+        width: 0;
+        height: 0;
+        display: none;
+
+        & ~ .customTextTypographyCheckbox {
+          width: 12px;
+          height: 12px;
+          background: rgba(0, 0, 0, 0.1);
+          border-radius: 2px;
+          box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
+          display: inline-block;
+          margin: 0 0.5rem 0 0.25rem;
+          transition: 0.25s;
+        }
+
+        &:checked ~ .customTextTypographyCheckbox {
+          background: var(--main-color);
+        }
+      }
+    }
   }
 }
 

public/index.html

@@ -80,6 +80,14 @@
             Word count
             <input type="number" value="1" min="1" max="10000" />
           </label>
+          <label class="typographyCheck">
+            <input type="checkbox" checked />
+            <div class="customTextTypographyCheckbox"></div>
+            Remove Fancy Typography
+            <span>
+              Standardises typography symbols: “ and ” become " for exmaple.
+            </span>
+          </label>
         </div>
         <div class="button">ok</div>
       </div>

public/js/script.js

@@ -2741,6 +2741,19 @@ function changeCustomText() {
   // initWords();
 }
 
+function cleanTypographySymbols(textToClean) {
+  var specials = {
+    '“': '"', // “	“
+    '”': '"', // ”	”
+    '’': "'", // ‘	‘
+    '‘': "'", // ’	’
+    ',': ",", // ‚	‚
+    '—': "-", // —  —
+    '…': "..."// … … 
+  }
+  return textToClean.replace(/[“”’‘—,…]/g, (char) => specials[char] || '');
+}
+
 function changePage(page) {
   if (pageTransition) {
     return;
@@ -3516,6 +3529,9 @@ $("#customTextPopup .button").click((e) => {
   text = text.trim();
   text = text.replace(/[\n\r\t ]/gm, " ");
   text = text.replace(/ +/gm, " ");
+  if($("#customTextPopup .typographyCheck input").prop("checked")) {
+    text = cleanTypographySymbols(text)
+  }
   text = text.split(" ");
   // if (text.length >= 10000) {
   //   showNotification("Custom text cannot be longer than 10000 words.", 4000);