Preview of MapLibre text rendering overhaul

.github/workflows/build-preview.yml

@@ -18,10 +18,10 @@ jobs:
   build-preview:
     runs-on: ubuntu-latest
     steps:
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
       - name: Checkout Main Branch 🛎️
         uses: actions/checkout@v4
         with:
@@ -43,12 +43,25 @@ jobs:
         # TODO: when we move shieldlib to its own repo, move shieldlib docs CI also
         run: |
           npm ci --include=dev
+          rm -rf maplibre-gl-js
+          git clone https://github.com/1ec5/maplibre-gl-js.git --branch=complex-text-50 --depth=10 ../maplibre-gl-js
+          cd ../maplibre-gl-js/
+          npm install --include=dev
+          npm run build-dev
+          npm run build-dist
+          cd -
+          npm link ../maplibre-gl-js/
+          cd shieldlib/
+          npm link ../../maplibre-gl-js
+          cd ../
+          npm install
+          npm link ../maplibre-gl-js/
           npm run build
+          grep u200D ../maplibre-gl-js/build/generate-unicode-data.ts ../maplibre-gl-js/src/data/unicode_properties.ts node_modules/maplibre-gl/build/generate-unicode-data.ts node_modules/maplibre-gl/src/data/unicode_properties.ts node_modules/maplibre-gl/dist/maplibre-gl-unminified.js node_modules/maplibre-gl/dist/maplibre-gl-dev.js dist/americana.js
           npm run style
           npm run shields
           cp src/configs/config.aws.js src/config.js
           mkdir -p dist/shield-docs
-          cp -r shieldlib/docs/* dist/shield-docs
           mv dist ..
         working-directory: pr-branch
       - name: Capture main branch usage statistics
@@ -109,6 +122,10 @@ jobs:
           cat ../pr/pr_preview-extra.md
           mv samples-diff ../dist/
         working-directory: pr-branch
+      - name: Verify build has latest changes
+        id: grep-build
+        run: |
+          grep u200D dist/americana.js
       - name: Upload Build artifacts
         uses: actions/upload-artifact@v4
         with:
@@ -127,3 +144,4 @@ jobs:
         with:
           name: pr_ci_artifacts
           path: pr/
+          overwrite: true

package.json

@@ -11,7 +11,7 @@
     "shieldlib"
   ],
   "scripts": {
-    "build:shieldlib": "cd shieldlib && run-s build:code docs",
+    "build:shieldlib": "cd shieldlib && run-s build:code",
     "build:code": "tsx scripts/build",
     "build": "run-s clean-build sprites build:shieldlib build:code taginfo status_map",
     "clean": "run-s clean:shieldlib clean:code clean-download clean-build",

scripts/generate_samples.ts

@@ -18,6 +18,8 @@ declare global {
 type SampleSpecification = {
   /** location on the map, a string in the format "z/lat/lon" */
   location: string;
+  /** language of the map, a string in the format "abc,def-GH,ijk" */
+  language?: string;
   /** name of this screenshot, used for the filename */
   name: string;
   /** Size in pixels of the clip */
@@ -83,7 +85,9 @@ async function createImage(screenshot: SampleSpecification) {
   const pagePath: string = screenshot.controls ? "" : "bare_map.html";
 
   await page.goto(
-    `http://localhost:1776/${pagePath}#map=${screenshot.location}`
+    `http://localhost:1776/${pagePath}#map=${screenshot.location}&language=${
+      screenshot.language || "en"
+    }`
   );
 
   // Wait for map to load, then wait two more seconds for images, etc. to load.

src/constants/label.js

@@ -471,25 +471,14 @@ export const localizedNameWithLocalGloss = [
             "format",
             ["var", "localizedNameList"],
             "\n",
-            "(\u200B",
+            "(\u2068",
             { "font-scale": 0.8 },
-            // GL JS lacks support for bidirectional isolating characters, so use a
-            // character from the localized name to insulate the parentheses from the
-            // embedded text's writing direction. Make it so small that GL JS doesn't
-            // bother rendering it.
-            ["concat", ["slice", ["var", "localizedName"], 0, 1], " "],
-            { "font-scale": 0.001 },
             listValuesExpression(["get", "name"], inlineSeparator, [
               "var",
               "localizedName",
             ]),
             { "font-scale": 0.8 },
-            ["concat", " ", ["slice", ["var", "localizedName"], 0, 1]],
-            { "font-scale": 0.001 },
-            // A ZWSP prevents GL JS from combining this component with the preceding
-            // one, which would cause it to vanish along with the faux isolating
-            // character.
-            "\u200B)",
+            "\u2069)",
             { "font-scale": 0.8 },
           ],
         ],

test/sample_locations.json

@@ -95,5 +95,143 @@
       "width": 400,
       "height": 400
     }
+  },
+  {
+    "location": "17/25.029431/121.520308",
+    "language": "zh",
+    "name": "heping_fuyou_branch",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "12/38.86185/-77.20877",
+    "language": "zh",
+    "name": "na_hang",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "6/20.298/95.846",
+    "language": "hi",
+    "name": "naypyitaw",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "14/28.63388/77.22034",
+    "language": "hi",
+    "name": "connaught_place",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "4.11/6.02/80.75",
+    "language": "si,en",
+    "name": "sri_lanka",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "2/28.93/51.74",
+    "language": "dv",
+    "name": "mideast",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "2.66/4.15/87.89",
+    "language": "th",
+    "name": "indian_ocean",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "6/14.171/100.518",
+    "language": "th",
+    "name": "tanintharyi",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "13/20.8724/92.33761",
+    "language": "mul",
+    "name": "paung_zar",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "15/49.02432/-123.10257",
+    "language": "hur",
+    "name": "blue_heron_nest_park",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "18/50.292153/57.185227",
+    "name": "ovi_derm",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "18/51.00589/8.006319",
+    "name": "grubenweiher",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "19/40.6752369/14.7714701",
+    "name": "we_heart_puro",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "18/18.53495/-72.398062",
+    "name": "hotel_79",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "19/49.483454/8.4965913",
+    "name": "garden_of_chernivtsi",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "18/-18.936429/-159.736903",
+    "name": "one_foot_island",
+    "viewport": {
+      "width": 400,
+      "height": 400
+    }
   }
 ]

test/spec/label.js

@@ -292,7 +292,7 @@ describe("label", function () {
       if (typeof evaluated === "string") {
         return [evaluated];
       }
-      return [evaluated.sections[0].text, evaluated.sections[4]?.text];
+      return [evaluated.sections[0].text, evaluated.sections[3]?.text];
     };
 
     let expectGloss = (
@@ -336,18 +336,14 @@ describe("label", function () {
         name: "Insula Nullius",
       });
 
-      expect(evaluated.sections.length).to.be.eql(7);
+      expect(evaluated.sections.length).to.be.eql(5);
       expect(evaluated.sections[0].text).to.be.eql("Null Island");
       expect(evaluated.sections[1].text).to.be.eql("\n");
-      expect(evaluated.sections[2].text).to.be.eql("(\u200B");
-      expect(evaluated.sections[3].text).to.be.eql("Null Island"[0] + " ");
-      expect(evaluated.sections[4].text).to.be.eql("Insula Nullius");
-      expect(evaluated.sections[5].text).to.be.eql(" " + "Null Island"[0]);
-      expect(evaluated.sections[6].text).to.be.eql("\u200B)");
+      expect(evaluated.sections[2].text).to.be.eql("(\u2068");
+      expect(evaluated.sections[3].text).to.be.eql("Insula Nullius");
+      expect(evaluated.sections[4].text).to.be.eql("\u2069)");
 
-      expect(evaluated.sections[3].scale).to.be.below(0.1);
-      expect(evaluated.sections[4].scale).to.be.below(1);
-      expect(evaluated.sections[5].scale).to.be.below(0.1);
+      expect(evaluated.sections[3].scale).to.be.below(1);
     });
     it("deduplicates matching anglicized and local names", function () {
       expectGloss("en", "Null Island", "Null Island", "Null Island");