EMCC: update to use font 'Inconsolata'

Author: chrisws

src/platform/emcc/canvas.cpp

@@ -74,8 +74,8 @@ EM_JS(int, get_text_size, (int id, const char *str, const char *face), {
 
     var s = UTF8ToString(str);
     var metrics = ctx.measureText(s);
-    var height = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent + 2;
-    var width = s == "W" ? metrics.width : (metrics.actualBoundingBoxRight + 2);
+    var height = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent + 4;
+    var width = metrics.width;
     return (Math.round(width) << 16) + height;
   });
 
@@ -147,7 +147,7 @@ EM_JS(void, draw_text, (int id, int x, int y, const char *str, int len, const ch
     var s = UTF8ToString(str).substring(0, len);
     var metrics = ctx.measureText(s);
     ctx.fillStyle = UTF8ToString(color);
-    ctx.fillText(s, x, y + metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent);
+    ctx.fillText(s, x, y + metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent - 1);
   });
 
 strlib::String get_color() {
@@ -179,7 +179,7 @@ Font::Font(int size, bool bold, bool italic) :
   if (bold) {
     _face.append("bold ");
   }
-  _face.append(size).append("px monospace");
+  _face.append(size).append("px 'Inconsolata', monospace");
 }
 
 Font::~Font() {

src/platform/emcc/runtime.cpp

@@ -21,6 +21,7 @@
 #include "platform/emcc/main_bas.h"
 #include "platform/emcc/keymap.h"
 
+#define FONT_SIZE 14
 #define MAIN_BAS "__main_bas__"
 #define WAIT_INTERVAL 10
 #define EVENT_TYPE_RESTART 101
@@ -86,7 +87,7 @@ Runtime::Runtime() :
   _output = new AnsiWidget(EXTENT_X(screenSize), EXTENT_Y(screenSize));
   _output->construct();
   _output->setTextColor(DEFAULT_FOREGROUND, DEFAULT_BACKGROUND);
-  _output->setFontSize(12);
+  _output->setFontSize(FONT_SIZE);
   _eventQueue = new Stack<MAEvent *>();
   _state = kActiveState;
   g_themeId = 0;

src/platform/emcc/shell.html

@@ -4,6 +4,9 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>SmallBASIC</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">
     <style>
       body {
         margin: 0px;
@@ -58,12 +61,10 @@
       <progress value="0" max="100" id="progress" hidden=1></progress>
     </div>
     <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
-
     <script type='text/javascript'>
       var statusElement = document.getElementById('status');
       var progressElement = document.getElementById('progress');
       var spinnerElement = document.getElementById('spinner');
-
       var Module = {
         preRun: [],
         postRun: [],
@@ -72,7 +73,6 @@
           if (element) element.value = ''; // clear browser cache
           return function(text) {
             if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
-            console.log(text);
             if (element) {
               element.value += text + "\n";
               element.scrollTop = element.scrollHeight; // focus on bottom

src/ui/system.cpp

@@ -1114,12 +1114,14 @@ void System::showMenu() {
       _systemMenu[index++] = MENU_KEYPAD;
 #endif
       if (_mainBas) {
+#if !defined(_EMCC)
         sprintf(buffer, MENU_STR_FONT, _fontScale - FONT_SCALE_INTERVAL);
         items->add(new String(buffer));
         sprintf(buffer, MENU_STR_FONT, _fontScale + FONT_SCALE_INTERVAL);
         items->add(new String(buffer));
         _systemMenu[index++] = MENU_ZOOM_UP;
         _systemMenu[index++] = MENU_ZOOM_DN;
+#endif
         sprintf(buffer, MENU_STR_EDITOR, opt_ide == IDE_NONE ? MENU_STR_OFF : MENU_STR_ON);
         items->add(new String(buffer));
         _systemMenu[index++] = MENU_EDITMODE;