Start adding hex codes in chars; Firefox no longer appears to support calculating width

Author: WebCoder49

plugins/special-chars.css

@@ -3,42 +3,28 @@
  * Files: special-chars.js, special-chars.css
  */
 
-/*TODO: Update chars to something like this:*/
-/*
-.char_replacement {
-            text-decoration: underline;
-        }
-
-        .container {
-            margin: 0;
-            padding: 0;
-            border: 0;
-            display: inline-block;
-        }
-
-        .demo {
-            background-color: currentColor;
-            image-rendering: pixelated;
-            display: inline-block;
-            width: 0.6em;
-            height: 1em;
-
-            mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdjZGBgYPj///9/RhCAMcA0bg6yHgAPmh/6BoxTcQAAAABJRU5ErkJgggAA'), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdjZGBgYPj///9/RhAggwMAitIUBr9U6sYAAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGCEMUCCjCgyYBFGRrAKFBkAuLYT9kYcIu0AAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABhJREFUGFdj/P///38GKGCEMUCCjMTJAACYiBPyG8sfAgAAAABJRU5ErkJggg==');
-            mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
-            mask-size: 49%, 49%, 49%, 49%;
-            mask-position: 0% 0%, 102% 0%, 0% 102%, 102% 102%;
-
-            -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdjZGBgYPj///9/RhCAMcA0bg6yHgAPmh/6BoxTcQAAAABJRU5ErkJgggAA'), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdjZGBgYPj///9/RhAggwMAitIUBr9U6sYAAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGCEMUCCjCgyYBFGRrAKFBkAuLYT9kYcIu0AAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABhJREFUGFdj/P///38GKGCEMUCCjMTJAACYiBPyG8sfAgAAAABJRU5ErkJggg==');
-            -webkit-mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
-            -webkit-mask-size: 49%, 49%, 49%, 49%;
-            -webkit-mask-position: 0% 0%, 102% 0%, 0% 102%, 102% 102%;
-        }
-*/
-
 /* Main styling */
 
+:root, body { /* Font for hex chars */
+    --code-input_special-chars_0: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdjZGBgYPj///9/RhCAMcA0bg6yHgAPmh/6BoxTcQAAAABJRU5ErkJgggAA');
+    --code-input_special-chars_1: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdjZGBgYPj///9/RhAggwMAitIUBr9U6sYAAAAASUVORK5CYII=');
+    --code-input_special-chars_2: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGCEMUCCjCgyYBFGRrAKFBkAuLYT9kYcIu0AAAAASUVORK5CYII=');
+    --code-input_special-chars_3: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABhJREFUGFdj/P///38GKGCEMUCCjMTJAACYiBPyG8sfAgAAAABJRU5ErkJggg==');
+    --code-input_special-chars_4: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///39GRkZGMI3BYYACRhgDrAKZAwAYxhvyz0DRIQAAAABJRU5ErkJggg==');
+    --code-input_special-chars_5: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACJJREFUGFdj/P///38GKGAEcRgZGRlBfDAHLgNjgFUgywAAuR4T9hxJl2YAAAAASUVORK5CYII=');
+    --code-input_special-chars_6: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdj/P///38GKGAEcRgZGRlBfDAHQwasAlkGABcdF/Y4yco2AAAAAElFTkSuQmCC');
+    --code-input_special-chars_7: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdj/P///38GKGCEMUCCRHIAWMgT8kue3bQAAAAASUVORK5CYII=');
+    --code-input_special-chars_8: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GKGAEcRgZGSE0cTIAvHcb8v+mIfAAAAAASUVORK5CYII=');
+    --code-input_special-chars_9: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGAEcRgZGSE0igxMCVgGmQMAPqcX8hWL1K0AAAAASUVORK5CYII=');
+    --code-input_special-chars_a: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdjZGBgYPj///9/RhCAMcA0iADJggCmDEw5ALdxH/aGuYHqAAAAAElFTkSuQmCC');
+    --code-input_special-chars_b: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GBgYGRhAAceA0cTIAvc0b/vRDnVoAAAAASUVORK5CYII=');
+    --code-input_special-chars_c: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdjZGBgYPj///9/EM0IYjAyMjIS4CDrAQC57hP+uLwvFQAAAABJRU5ErkJggg==');
+    --code-input_special-chars_d: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdj/P///38GBgYGRhAAceA0fg5MDwAveh/6ToN9VwAAAABJRU5ErkJggg==');
+    --code-input_special-chars_e: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABxJREFUGFdj/P///38GKGAEcRgZGRlBfDCHsAwA2UwT+mVIH1MAAAAASUVORK5CYII=');
+    --code-input_special-chars_f: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///38GKGAEcRgZGRlBfDAHtwxMGQDZZhP+BnB1kwAAAABJRU5ErkJggg==');
+}
+
 .code-input_special-char_container { /* pre element */
-    line-height: 4;
     font-size: 20px;
 }
 
@@ -74,27 +60,28 @@
 /* Default - Two bytes - 4 hex chars */
 
 .code-input_special-char::before {
-    content: attr(data-hex0) "\A" attr(data-hex1);
-    
-    top: -1.5em;
-    left: 0;
-    padding: 0;
-    padding-bottom: 2px;
-    border-top: 1px solid;
-    border-left: 1px solid;
-    border-right: 1px solid;
-}
+    content: " ";
 
-.code-input_special-char::after {
-    content: attr(data-hex2) "\A" attr(data-hex3);
-    
-    bottom: -1.5em;
-    left: 0;
-    padding: 0;
-    padding-top: 2px;
-    border-bottom: 1px solid;
-    border-left: 1px solid;
-    border-right: 1px solid;
+    background-color: currentColor;
+    image-rendering: pixelated;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+
+    --char-0: var(--code-input_special-chars_0);
+    --char-1: var(--code-input_special-chars_1);
+    --char-2: var(--code-input_special-chars_2);
+    --char-3: var(--code-input_special-chars_3);
+
+    mask-image: var(--char-0), var(--char-1), var(--char-2), var(--char-3);
+    mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
+    mask-size: 45%, 45%, 45%, 45%;
+    mask-position: 2% 2%, 100% 2%, 2% 100%, 100% 100%;
+
+    -webkit-mask-image: var(--char-0), var(--char-1), var(--char-2), var(--char-3);
+    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
+    -webkit-mask-size: 40%, 40%, 40%, 40%;
+    -webkit-mask-position: 10% 10%, 90% 10%, 10% 90%, 90% 90%;
 }
 
 /* Zero-width - style so takes up no space */

plugins/special-chars.js

@@ -153,9 +153,10 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
 
         // Try to get width
         let width = this.canvasContext.measureText(char).width;
+        this.canvasContext.fillText(char, 100, 100);
         if(width > 20) {
             width /= 2; // Fix double-width-in-canvas Firefox bug
-        } else if(width == 0) {
+        } else if(width == 0 && char != "\u0096") {
             let fallbackWidth = this.getCharacterWidth("\u0096");
             return fallbackWidth; // In Firefox some control chars don't render, but all control chars are the same width
         }