Merge pull request #8391 from processing/fix/text-special-chars

Fix font measurement with font families containing special characters

Author: davepagurek

src/type/textCore.js

@@ -24,6 +24,7 @@ function textCore(p5, fn) {
   const LinebreakRe = /\r?\n/g;
   const CommaDelimRe = /,\s+/;
   const QuotedRe = /^".*"$/;
+  const SpecialCharRe = /[^\x00-\x7F]/; // Non-ascii
   const TabsRe = /\t/g;
 
   const FontVariationSettings = 'fontVariationSettings';
@@ -2425,7 +2426,7 @@ function textCore(p5, fn) {
     let parts = familyStr.split(CommaDelimRe);
     let family = parts.map(part => {
       part = part.trim();
-      if (part.indexOf(' ') > -1 && !QuotedRe.test(part)) {
+      if ((part.indexOf(' ') > -1 || SpecialCharRe.test(part)) && !QuotedRe.test(part)) {
         part = `"${part}"`; // quote font names with spaces
       }
       return part;

test/unit/visual/cases/typography.js

@@ -43,6 +43,22 @@ visualSuite('Typography', function () {
       screenshot();
     });
 
+    visualTest('with a font file and special chars', async function (p5, screenshot) {
+      p5.createCanvas(100, 100, p5.WEBGL);
+      const font = await p5.loadFont(
+        '/unit/assets/Inconsolata-Bold.ttf',
+        'Incönsolata'
+      );
+      p5.textFont(font);
+      p5.textAlign(p5.CENTER, p5.CENTER);
+      p5.textSize(35);
+      p5.text('p5*js', 0, 0);
+      p5.noFill();
+      p5.rectMode(p5.CENTER);
+      p5.rect(0, 0, p5.fontWidth('p5*js'), p5.textLeading());
+      screenshot();
+    });
+
     visualTest('with a woff font file', async function (p5, screenshot) {
       p5.createCanvas(100, 100);
       const font = await p5.loadFont(

test/unit/visual/screenshots/Typography/textFont/with a font file and special chars/000.png

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}