Enhance system font text rendering under WASM

Author: halx99

core/platform/wasm/Device-wasm.cpp

@@ -28,11 +28,11 @@ THE SOFTWARE.
 #include "platform/PlatformConfig.h"
 #if AX_TARGET_PLATFORM == AX_PLATFORM_WASM
 
-#include "platform/Device.h"
-#include "platform/FileUtils.h"
+#    include "platform/Device.h"
+#    include "platform/FileUtils.h"
 
-#include <emscripten/emscripten.h>
-#include <emscripten/html5.h>
+#    include <emscripten/emscripten.h>
+#    include <emscripten/html5.h>
 
 namespace ax
 {
@@ -57,76 +57,102 @@ void Device::setAccelerometerInterval(float interval)
     // TODO: https://emscripten.org/docs/api_reference/html5.h.html?
 }
 
-Data Device::getTextureDataForText(std::string_view text, const FontDefinition& textDefinition, TextAlign align, int &width, int &height, bool& hasPremultipliedAlpha)
+Data Device::getTextureDataForText(std::string_view text,
+                                   const FontDefinition& textDefinition,
+                                   TextAlign align,
+                                   int& width,
+                                   int& height,
+                                   bool& hasPremultipliedAlpha)
 {
     char color[8];
-    sprintf(color, "#%02x%02x%02x", textDefinition._fontFillColor.r, textDefinition._fontFillColor.g, textDefinition._fontFillColor.b);
+    sprintf(color, "#%02x%02x%02x", textDefinition._fontFillColor.r, textDefinition._fontFillColor.g,
+            textDefinition._fontFillColor.b);
+    // clang-format off
     unsigned char* ptr = (unsigned char*)EM_ASM_PTR({
         var lines = UTF8ToString($0).split("\n");
-        var linesWidth = [];
         var fontName = UTF8ToString($1);
         var fontSize = $2;
-        var lineHeight = $2 * 1.2; // Nothing accurate
         var color = UTF8ToString($3);
         var dimWidth = $4;
         var dimHeight = $5;
         var align = $6;
 
+        // use shared canvas
         var canvas = Module.axmolSharedCanvas = Module.axmolSharedCanvas || document.createElement("canvas");
         var context = canvas.getContext('2d', { willReadFrequently: true });
         context.font = fontSize + "px " + fontName;
+        // use alphabetic baseline for text rendering
+        context.textBaseline = "alphabetic";
+
+        var linesWidth = [];
+        var linesAscent = [];
+        var linesDescent = [];
+        var totalHeight = 0;
+        var maxWidth = dimWidth > 0 ? dimWidth : 0;
 
-        var canvasWidth = dimWidth;
-        var canvasHeight = dimHeight;
+        // compute per line metrics
         for (var i = 0; i < lines.length; i++) {
-            var lineWidth = context.measureText(lines[i]).width;
-            linesWidth[i] = lineWidth;
-            if (lineWidth > canvasWidth && dimWidth <= 0) {
-                canvasWidth = lineWidth;
+            var metrics = context.measureText(lines[i]);
+            var lineWidth = metrics.width;
+            // if browser not support actualBoundingBoxAscent/descent, use fallback values
+            var ascent = (typeof metrics.actualBoundingBoxAscent === "number") ? metrics.actualBoundingBoxAscent : fontSize * 0.8;
+            var descent = (typeof metrics.actualBoundingBoxDescent === "number") ? metrics.actualBoundingBoxDescent : fontSize * 0.2;
+            var lineHeight = ascent + descent;
+            linesWidth.push(lineWidth);
+            linesAscent.push(ascent);
+            linesDescent.push(descent);
+            if (dimWidth <= 0 && lineWidth > maxWidth) {
+                maxWidth = lineWidth;
             }
-        };
+            totalHeight += lineHeight;
+        }
 
-        if (dimHeight <= 0) {
-            canvasHeight = lineHeight * lines.length;
+        // if dimensions are specified, use them to limit the height
+        if (dimHeight > 0) {
+            totalHeight = dimHeight;
         }
 
-        canvasWidth = Math.ceil(canvasWidth);
-        canvasHeight = Math.ceil(canvasHeight);
+        var canvasWidth = Math.ceil(maxWidth);
+        var canvasHeight = Math.ceil(totalHeight);
 
         canvas.width = canvasWidth;
         canvas.height = canvasHeight;
 
         context.clearRect(0, 0, canvasWidth, canvasHeight);
         context.font = fontSize + "px " + fontName;
         context.fillStyle = color;
-        context.textBaseline = "top";
+        context.textBaseline = "alphabetic";
 
-        //Vertical top
+        // vertical top
         var offsetY = 0;
-        if ((align & 0xf0) == 0x30) {
-            //Vertical center
-            offsetY = (canvasHeight - lineHeight * lines.length) / 2;
-        } else if ((align & 0xf0) == 0x20) {
-            //Vertical bottom
-            offsetY = canvasHeight - lineHeight * lines.length;
+        if ((align & 0xf0) === 0x30) {
+            // vertical center align
+            offsetY = (canvasHeight - totalHeight) / 2;
+        } else if ((align & 0xf0) === 0x20) {
+            // bottom align
+            offsetY = canvasHeight - totalHeight;
         }
 
+        // draw each line of text
         for (var i = 0; i < lines.length; i++) {
-            //Horizonal left
+            var lineH = linesAscent[i] + linesDescent[i];
+            // horizontal left
             var offsetX = 0;
-            if ((align & 0x0f) == 0x03) {
-                //Horizonal center
+            if ((align & 0x0f) === 0x03) {
                 offsetX = (canvasWidth - linesWidth[i]) / 2;
-            } else if ((align & 0x0f) == 0x02) {
-                //Horizonal right
+            } else if ((align & 0x0f) === 0x02) {
                 offsetX = canvasWidth - linesWidth[i];
             }
-            context.fillText(lines[i], offsetX, offsetY + lineHeight * i);
+            // use align left by default, offsetX remains 0
+            var baselineY = offsetY + linesAscent[i];
+            context.fillText(lines[i], offsetX, baselineY);
+            offsetY += lineH;
         }
 
+        // get pixel data from the canvas
         var data = context.getImageData(0, 0, canvasWidth, canvasHeight).data;
-        var ptr = _malloc(data.byteLength); // Cocos Data object free it
-        var buffer= new Uint8Array(Module.HEAPU8.buffer, ptr, data.byteLength);
+        var ptr = _malloc(data.byteLength);
+        var buffer = new Uint8Array(Module.HEAPU8.buffer, ptr, data.byteLength);
         buffer.set(data);
         return ptr;
     }, text.data(), textDefinition._fontName.c_str(), textDefinition._fontSize, color, textDefinition._dimensions.width, textDefinition._dimensions.height, align);
@@ -137,6 +163,8 @@ Data Device::getTextureDataForText(std::string_view text, const FontDefinition&
     height = EM_ASM_INT({
         return Module.axmolSharedCanvas.height;
     });
+    // clang-format on
+
     hasPremultipliedAlpha = false;
 
     Data ret;
@@ -166,6 +194,6 @@ void Device::prepareSelectionFeedbackGenerator() {}
 
 void Device::selectionChanged() {}
 
-}
+}  // namespace ax
 
-#endif // AX_TARGET_PLATFORM == AX_PLATFORM_WASM
+#endif  // AX_TARGET_PLATFORM == AX_PLATFORM_WASM