From 000d4f35b7273d9c87034294107950a13bf20185 Mon Sep 17 00:00:00 2001
From: boxgaming <75969133+boxgaming@users.noreply.github.com>
Date: Thu, 11 Jan 2024 11:44:17 -0600
Subject: [PATCH] Updates for default font rendering for browsers (primarily
 safari) that do not support the letterSpacing attribute in the 2d canvas

---
 qb.js | 93 ++++++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 69 insertions(+), 24 deletions(-)

diff --git a/qb.js b/qb.js
index 103080c..c454834 100644
--- a/qb.js
+++ b/qb.js
@@ -60,6 +60,7 @@ var QB = new function() {
     var _windowDef = [];
     var _fileHandles = null;
     var _typeMap = {};
+    var _letterSpacingSupport = null;
 
     
     // Array handling methods
@@ -750,23 +751,43 @@ var QB = new function() {
         ctx.beginPath();
         var f = _fonts[_font];
         ctx.font = f.size + " " + f.name;
-        var tm = ctx.measureText(s);
-        var fheight = 0;
-        if (tm.fontBoundingBoxAscent) {
-            fheight = tm.fontBoundingBoxAscent + tm.fontBoundingBoxDescent;
+        // ------------------------------------------------------------------
+        // special case for built-in fonts and safari
+        // if safari adds 2d canvas letterSpacing support this can be removed
+        if (!_letterSpacingSupport && _font < 1000) {
+            for (var i=0; i < s.length; i++) {
+                var ch = s.substring(i, i+1);
+                if (_printMode != QB._KEEPBACKGROUND) {
+                    ctx.fillStyle = _bgColor.rgba();
+                    ctx.fillRect(x + (i * QB.func__FontWidth()), y, QB.func__FontWidth(), QB.func__FontHeight());
+                }
+                if (_printMode != QB._ONLYBACKGROUND) {
+                    // Draw the string
+                    ctx.fillStyle = _fgColor.rgba();
+                    ctx.fillText(ch, x + (i * QB.func__FontWidth()), y + QB.func__FontHeight() - f.offset);
+                }
+            }
         }
+        // ------------------------------------------------------------------
         else {
-            fheight = tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent;
-        }
- 
-        if (_printMode != QB._KEEPBACKGROUND) {
-            ctx.fillStyle = _bgColor.rgba();
-            ctx.fillRect(x, y, tm.width, fheight);
-        }
-        if (_printMode != QB._ONLYBACKGROUND) {
-            // Draw the string
-            ctx.fillStyle = _fgColor.rgba();
-            ctx.fillText(s, x, y + fheight - f.offset);
+            var tm = ctx.measureText(s);
+            var fheight = 0;
+            if (tm.fontBoundingBoxAscent) {
+                fheight = tm.fontBoundingBoxAscent + tm.fontBoundingBoxDescent;
+            }
+            else {
+                fheight = tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent;
+            }
+     
+            if (_printMode != QB._KEEPBACKGROUND) {
+                ctx.fillStyle = _bgColor.rgba();
+                ctx.fillRect(x, y, tm.width, fheight);
+            }
+            if (_printMode != QB._ONLYBACKGROUND) {
+                // Draw the string
+                ctx.fillStyle = _fgColor.rgba();
+                ctx.fillText(s, x, y + fheight - f.offset);
+            }
         }
     };
 
@@ -2387,18 +2408,39 @@ var QB = new function() {
                         }
                         var y =  _locY * QB.func__FontHeight();
 
-                        // Draw the text background
-                        var tm = ctx.measureText(subline);
-                        if (_printMode != QB._KEEPBACKGROUND) {
-                            ctx.fillStyle = _bgColor.rgba();
-                            ctx.fillRect(x, y, tm.width, QB.func__FontHeight());
+                        // ------------------------------------------------------------------
+                        // special case for built-in fonts and safari
+                        // if safari adds 2d canvas letterSpacing support this can be removed
+                        if (!_letterSpacingSupport && _font < 1000) {
+                            for (var i=0; i < subline.length; i++) {
+                                var ch = subline.substring(i, i+1);
+                                if (_printMode != QB._KEEPBACKGROUND) {
+                                    ctx.fillStyle = _bgColor.rgba();
+                                    ctx.fillRect(x + (i * QB.func__FontWidth()), y, QB.func__FontWidth(), QB.func__FontHeight());
+                                }
+                                if (_printMode != QB._ONLYBACKGROUND) {
+                                    // Draw the string
+                                    ctx.fillStyle = _fgColor.rgba();
+                                    ctx.fillText(ch, x + (i * QB.func__FontWidth()), y + QB.func__FontHeight() - f.offset);
+                                }
+                            }
+                            x += QB.func__FontWidth();
                         }
-                        if (_printMode != QB._ONLYBACKGROUND) {
-                            ctx.fillStyle = _fgColor.rgba();
-                            ctx.fillText(subline, x, (y + QB.func__FontHeight() - f.offset));
+                        // ------------------------------------------------------------------
+                        else {
+                            // Draw the text background
+                            var tm = ctx.measureText(subline);
+                            if (_printMode != QB._KEEPBACKGROUND) {
+                                ctx.fillStyle = _bgColor.rgba();
+                                ctx.fillRect(x, y, tm.width, QB.func__FontHeight());
+                            }
+                            if (_printMode != QB._ONLYBACKGROUND) {
+                                ctx.fillStyle = _fgColor.rgba();
+                                ctx.fillText(subline, x, (y + QB.func__FontHeight() - f.offset));
+                            }
+                            x += tm.width;
                         }
 
-                        x += tm.width;
                         _locX += subline.length;
                     }
 
@@ -2916,6 +2958,9 @@ var QB = new function() {
         _keyDownMap = {};
 
         // TODO: set the appropriate default font for the selected screen mode above instead of here
+        if (_letterSpacingSupport == null) {
+            _letterSpacingSupport = (GX.ctx().letterSpacing) ? true : false;
+        }
         QB.sub__Font(_font);
     };