ntk 8.13.1 → 8.14.1

package/lib/text/anchors.js

@@ -0,0 +1,81 @@
+// fontkit's mark attachment, for a face whose tables leave an anchor out.
+//
+// A mark-to-base, mark-to-ligature or mark-to-mark subtable holds an anchor
+// for each base (ligature component, earlier mark) and mark class, and the
+// OpenType spec lets one be NULL: that subtable attaches no mark of that
+// class to that glyph. HarfBuzz answers "not applied", and the lookup's next
+// subtable gets its turn. fontkit reads the NULL's coordinates and throws
+// `Cannot read properties of null (reading 'xCoordinate')` out of a layout,
+// and faces ship them: Noto Sans Bold holds 2,822, DejaVu Sans Mono 198 (a
+// Lithuanian Į̃ reaches one), Amiri, Noto Naskh Arabic and FreeSerif
+// thousands. Upstream that is foliojs/fontkit#367; #374 returns early
+// instead, which ends the crash but still counts the subtable as applied.
+//
+// Answering "not applied" means wrapping the processor's `applyLookup`,
+// which runs for every glyph at every lookup: 2% of shaping a word the
+// first time. So a face pays it only from the first NULL its text reaches.
+// Until then `applyAnchor` alone is watched — it runs when a mark attaches —
+// and a NULL there abandons the layout (`NO_ANCHOR`), which `Font#_layout`
+// shapes again with the wrapper in. Abandoning loses nothing: fontkit keeps
+// no state from a layout but the tables it decoded, which a second one
+// reads the same.
+
+/**
+ * Thrown through fontkit's layout from a NULL anchor, and caught here or in
+ * `Font#_layout`. One error, made once: a face can reach NULLs many times a
+ * word, and a fresh error would take a stack trace each time. It says what
+ * happened to anything that calls a watched face's `layout` directly.
+ */
+export const NO_ANCHOR = new Error(
+  'a mark attachment subtable has a NULL anchor for this glyph and mark class: ' +
+    "shaped through ntk's Font, that is a subtable that did not apply"
+);
+
+/** The face's GPOS processor, where fontkit shapes it through GPOS; else null. */
+function processorOf(fk) {
+  try {
+    return fk._layoutEngine?.engine?.GPOSProcessor ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Watch a face's mark attachment for a NULL anchor, which then abandons the
+ * layout it is reached in with `NO_ANCHOR`.
+ *
+ * @param {object} fk a fontkit font
+ * @returns {boolean} whether there is anything to watch: false for a face
+ *   fontkit does not position through GPOS
+ */
+export function watchAnchors(fk) {
+  const gpos = processorOf(fk);
+  if (!gpos || typeof gpos.applyAnchor !== 'function') return false;
+  if (Object.hasOwn(gpos, 'applyAnchor')) return true;
+  const applyAnchor = gpos.applyAnchor;
+  gpos.applyAnchor = function (markRecord, baseAnchor, baseGlyphIndex) {
+    if (baseAnchor == null || markRecord.markAnchor == null) throw NO_ANCHOR;
+    return applyAnchor.call(this, markRecord, baseAnchor, baseGlyphIndex);
+  };
+  return true;
+}
+
+/**
+ * From here on a subtable that reaches a NULL anchor is one that did not
+ * apply, so the lookup's next subtable is tried, as HarfBuzz tries it.
+ *
+ * @param {object} fk a fontkit font `watchAnchors` has been handed
+ */
+export function tolerateAnchors(fk) {
+  const gpos = processorOf(fk);
+  if (!gpos || Object.hasOwn(gpos, 'applyLookup')) return;
+  const applyLookup = gpos.applyLookup;
+  gpos.applyLookup = function (lookupType, table) {
+    try {
+      return applyLookup.call(this, lookupType, table);
+    } catch (err) {
+      if (err === NO_ANCHOR) return false;
+      throw err;
+    }
+  };
+}

package/lib/text/font.js

@@ -1,6 +1,8 @@
 import * as fontkit from 'fontkit';
 
 import { flatten, rasterizePath } from '../rasterize.js';
+import { NO_ANCHOR, tolerateAnchors, watchAnchors } from './anchors.js';
+import { marksCover, standInMarks } from './marks.js';
 
 // Axis coordinates are rounded to this many decimals before anything is
 // instantiated or cached. Every distinct coordinate is a font in its own
@@ -122,6 +124,14 @@ export default class Font {
     this._upem = 0;
     this._vertical = null;
     this._space = -1;
+    // the face's mark lookups while they are stood in for (./marks.js), set
+    // at its first shaping; null once the real ones are back, or never were
+    // stood in for
+    this._marks = undefined;
+    this._drawable = undefined;
+    // whether the face's mark attachment is watched for a NULL anchor
+    // (./anchors.js): set at its first shaping, false once one has been met
+    this._anchors = false;
   }
 
   static loadSync(path, postscriptName) {
@@ -303,8 +313,29 @@ export default class Font {
     return this._space * this.scale(size);
   }
 
+  /**
+   * Whether fontkit can make a glyph of this face at all. It makes one from
+   * `glyf`, `CFF ` or `CFF2` outlines, or an `sbix` or `COLR`/`CPAL` colour
+   * glyph, and answers null for anything else — and its shaper throws on the
+   * null. A bitmap-only colour font (`CBDT`/`CBLC`) is that face: Noto Color
+   * Emoji and EmojiOne as most Linux desktops ship them, which fontconfig
+   * answers first for an emoji. Its cmap says it has the character and
+   * nothing can be shaped or drawn from it, so it covers nothing here
+   * (`hasGlyph`), and `FontManager` hands it out neither as a match nor as a
+   * fallback.
+   */
+  get drawable() {
+    if (this._drawable === undefined) {
+      const t = this.fk.directory?.tables ?? {};
+      this._drawable = Boolean(
+        t.glyf || t['CFF '] || t.CFF2 || t.sbix || (t.COLR && t.CPAL)
+      );
+    }
+    return this._drawable;
+  }
+
   hasGlyph(codepoint) {
-    return this.fk.hasGlyphForCodePoint(codepoint);
+    return this.drawable && this.fk.hasGlyphForCodePoint(codepoint);
   }
 
   /**
@@ -324,7 +355,7 @@ export default class Font {
    * @returns {number|null} font glyph id, as `shape()` would report in `glyphs[].id`
    */
   glyphIdFor(codepoint) {
-    if (!this.fk.hasGlyphForCodePoint(codepoint)) return null;
+    if (!this.hasGlyph(codepoint)) return null;
     return this.fk.glyphForCodePoint(codepoint).id;
   }
 
@@ -339,7 +370,7 @@ export default class Font {
    *   ax = advance, dx/dy = drawing offset from pen position (y up = positive dy)
    */
   shape(text, size, opts = {}) {
-    const run = this.fk.layout(text, opts.features, opts.script, opts.language, opts.direction);
+    const run = this._layout(text, opts);
     const s = this.scale(size);
     const glyphs = new Array(run.glyphs.length);
     let width = 0;
@@ -358,6 +389,53 @@ export default class Font {
     return { font: this, size, direction: run.direction, width, glyphs };
   }
 
+  /**
+   * fontkit's layout, with the face's mark lookups stood in for until a run
+   * holds a glyph they act at.
+   *
+   * fontkit decodes a feature's lookups the first time a run asks for it,
+   * and a face's mark attachment can be most of its tables: 14 ms of Noto
+   * Sans' first shaping, in the first frame. Until a run needs them the
+   * lookups are empty stand-ins (./marks.js), which a run holding none of
+   * their glyphs comes out the same with. A run that holds one puts the
+   * real ones back and is shaped again, and so is every run after it.
+   */
+  _layout(text, opts) {
+    const { features, script, language, direction } = opts;
+    if (this._marks === undefined) {
+      this._marks = standInMarks(this.fk);
+      this._anchors = watchAnchors(this.fk);
+    }
+    const marks = this._marks;
+    // fontkit adds to the features object it is handed: a second shaping
+    // gets what the caller asked for, not what the first left there
+    const again = marks === null || features == null ? features : Array.isArray(features) ? [...features] : { ...features };
+    const run = this._fkLayout(text, features, script, language, direction);
+    if (marks === null || !run.glyphs.some((glyph) => marksCover(marks.bits, glyph.id))) return run;
+    marks.restore();
+    this._marks = null;
+    return this._fkLayout(text, again, script, language, direction);
+  }
+
+  /**
+   * fontkit's layout, shaped once more where a NULL anchor abandoned it: a
+   * face's mark attachment is watched for one until its text reaches the
+   * first, and takes one as a subtable that did not apply from then on
+   * (./anchors.js).
+   */
+  _fkLayout(text, features, script, language, direction) {
+    if (!this._anchors) return this.fk.layout(text, features, script, language, direction);
+    const again = features == null ? features : Array.isArray(features) ? [...features] : { ...features };
+    try {
+      return this.fk.layout(text, features, script, language, direction);
+    } catch (err) {
+      if (err !== NO_ANCHOR) throw err;
+      tolerateAnchors(this.fk);
+      this._anchors = false;
+      return this.fk.layout(text, again, script, language, direction);
+    }
+  }
+
   /** nominal (unshaped) advance of a glyph id, in pixels */
   advanceOf(glyphId, size) {
     return this.fk.getGlyph(glyphId).advanceWidth * this.scale(size);

package/lib/text/fontmanager.js

@@ -111,8 +111,12 @@ function shapePrefixOf(style) {
   // plain answered every later request for it with the plain glyphs, and a
   // `tnum` asked for after that point was silently ignored.
   const shaping = shapingKeyOf(style);
+  // The family list too where a face is given, since the letters that face
+  // lacks are set in the families after it (`fallbackFor`): a word shaped
+  // under `Ahem, Times New Roman` answered the same word under `Ahem,
+  // Arial`, in Times.
   return font
-    ? `${font.key}|${style.size}|${style.weight}|${style.style}|${shaping}`
+    ? `${font.key}|${style.family ?? ''}|${style.size}|${style.weight}|${style.style}|${shaping}`
     : `${style.family}|${style.size}|${style.weight}|${style.style}|${variationsKeyOf(
         style.variations
       )}|${opticalKeyOf(style)}|${shaping}`;
@@ -227,6 +231,54 @@ export default class FontManager {
     return this._source ?? defaultFontSource();
   }
 
+  /**
+   * Have `family` ready before a layout asks for it: a source that resolves
+   * families by asking the system (fontconfig) starts on its faces now, off
+   * the event loop, so the first layout in that family takes the answer
+   * instead of stalling for it. For a family the caller knows is coming — a
+   * code editor's monospace, set before it renders. A source with nothing to
+   * look up ignores it, and it never throws.
+   *
+   * `faces`, each `{ weight, style }`, names the faces to start on instead
+   * of the family's regular, bold, italic and bold italic: a face outside
+   * those that the caller knows text will be set in, such as a menu's
+   * medium. The family is spelled the way `match` spells it, so a list or a
+   * quoted name warms the pattern a layout will ask for.
+   */
+  prewarm(family, faces) {
+    const spelled = familiesOf(family).join(',');
+    if (!spelled) return;
+    this.source.prewarm?.(
+      spelled,
+      faces?.map(({ weight, style }) => ({
+        weight: numWeight(weight),
+        style: style?.includes('italic') ? 'italic' : 'normal'
+      }))
+    );
+  }
+
+  /**
+   * The best of `candidates` a glyph can be made from (`Font.drawable`):
+   * `emoji`, or a stylesheet's `"Noto Color Emoji"`, is a bitmap-only face
+   * on most Linux desktops, and a base face nothing can be shaped in threw
+   * on the first character of its text. The first candidate still, where
+   * none is — there is nothing better to hand out.
+   */
+  _firstDrawable(candidates) {
+    let first = null;
+    for (const c of candidates) {
+      let font;
+      try {
+        font = this._open(c);
+      } catch {
+        continue; // unparseable candidate — try the next one
+      }
+      if (font.drawable) return font;
+      first ??= font;
+    }
+    return first ?? this._open(candidates[0]);
+  }
+
   /** open (and cache) a match candidate — see fontsource.js for the shape */
   _open(candidate) {
     const key = candidate.key ?? `${candidate.path}#${candidate.postscriptName || ''}`;
@@ -283,7 +335,7 @@ export default class FontManager {
     let bestScore = Infinity;
     for (const family of families) {
       for (const r of this._registered) {
-        if (r.family !== family) continue;
+        if (r.family !== family || !r.font.drawable) continue;
         const score = Math.abs(r.weight - weight) + (r.italic !== italic ? 1000 : 0);
         if (score < bestScore) {
           bestScore = score;
@@ -333,9 +385,21 @@ export default class FontManager {
       italic
     );
     if (!face) {
-      // sources understand comma-separated family lists natively
-      const candidates = this.source.matchSorted(patternOf(family, weight, italic));
-      face = this._open(candidates[0]);
+      // sources understand comma-separated family lists natively; one that
+      // can answer the best face alone saves reading the fallback chain the
+      // face may never need — unless no glyph can be made from that face
+      const pattern = patternOf(family, weight, italic);
+      const source = this.source;
+      let head = null;
+      if (typeof source.matchFirst === 'function') {
+        const candidate = source.matchFirst(pattern);
+        try {
+          head = this._open(candidate);
+        } catch {
+          // unparseable: the chain has the next candidate
+        }
+      }
+      face = head?.drawable ? head : this._firstDrawable(source.matchSorted(pattern));
     }
     this._matches.set(cacheKey, face);
     // A long-lived app can name a lot of families. Same sweep as the shaping
@@ -352,9 +416,17 @@ export default class FontManager {
 
   /**
    * Find a font that has a glyph for `codepoint`, for use when the primary
-   * font doesn't. Registered fonts first, then the source's fallback chain
-   * (filtered by the source's coverage data — font files are only opened to
-   * confirm). Returns null when nothing on the system covers the codepoint.
+   * font doesn't. The registered faces of the families the style names
+   * first, in the order it names them, then any registered face, then the
+   * source's fallback chain (filtered by the source's coverage data — font
+   * files are only opened to confirm). Returns null when nothing on the
+   * system covers the codepoint.
+   *
+   * The families first because that is what a list of them is for: CSS's
+   * `font-family: Icons, Arial` sets a letter the icon face lacks in Arial,
+   * as a browser does. Walking every registered face instead gave it to
+   * whichever was registered first — an app's serif — however far down the
+   * list, or off it, that face was.
    *
    * "Nothing covers it" includes "this environment has no system fonts at
    * all". An app that loaded its own faces still reaches here for the first
@@ -373,10 +445,23 @@ export default class FontManager {
     if (perCp.has(codepoint)) return perCp.get(codepoint);
 
     let found = null;
-    for (const r of this._registered) {
-      if (r.font.hasGlyph(codepoint)) {
-        found = r.font;
-        break;
+    if (this._registered.length) {
+      const weight = numWeight(opts.weight);
+      const italic = !!opts.style?.includes('italic');
+      for (const name of familiesOf(family)) {
+        const font = this._matchRegistered([name.toLowerCase()], weight, italic);
+        if (font && font.hasGlyph(codepoint)) {
+          found = font;
+          break;
+        }
+      }
+    }
+    if (!found) {
+      for (const r of this._registered) {
+        if (r.font.hasGlyph(codepoint)) {
+          found = r.font;
+          break;
+        }
       }
     }
     if (!found) {

package/lib/text/fontsource.js

@@ -48,10 +48,12 @@
 import { builtin } from '../builtin.js';
 import {
   charsetHas,
+  matchFirstSync,
   matchSorted,
   matchSortedSync,
   noFontsError,
   prewarmFaces,
+  prewarmPatterns,
   supported
 } from '../fontconfig.js';
 import Font from './font.js';
@@ -129,6 +131,29 @@ export class FontconfigFontSource {
     return matchSortedSync(pattern);
   }
 
+  /**
+   * `matchSorted(pattern)[0]`, reading only the head of a prewarm's answer
+   * where one is waiting (`matchFirstSync` in fontconfig.js): a face's
+   * match needs its first candidate, and the fallback chain behind it is
+   * read when a character first falls back.
+   */
+  matchFirst(pattern) {
+    return matchFirstSync(pattern);
+  }
+
+  /**
+   * The family's faces — regular, bold, and both in italic, or the `faces`
+   * named, each `{ weight, style }` — matched off the event loop, as the
+   * constructor does for sans-serif, and answerable by a layout that asks
+   * before the loop runs again (see `prewarm` in fontconfig.js). A pattern
+   * already cached or running is not asked again; never rejects and never
+   * reports.
+   */
+  prewarm(family, faces) {
+    if (faces) prewarmPatterns(faces.map(({ weight, style }) => ({ family, weight, style })));
+    else prewarmFaces({ family });
+  }
+
   /**
    * Non-blocking sibling: the fc-match spawn runs off the event loop and
    * seeds the same cache, so a later synchronous layout for the pattern is

package/lib/text/layout.js

@@ -407,7 +407,7 @@ export class TextLayout {
         const shaped = this.fonts._shapeCached(fragText, shaping, fragLevels);
         // the levels ride along so a later split can re-shape a piece at the
         // level it actually has, rather than assuming ltr
-        fragments.push({ text: fragText, span, shaped, start: pos, levels: fragLevels });
+        fragments.push({ text: fragText, span, shaping, shaped, start: pos, levels: fragLevels });
         width += shaped.width;
       }
       pos = fragEnd;
@@ -497,33 +497,47 @@ export class TextLayout {
         used += frag.shaped.width;
         continue;
       }
-      // binary search the longest grapheme prefix of this fragment that fits.
+      // shaped at the bidi level this text actually has: assuming level 0
+      // here re-shapes an rtl word as ltr, which lays its glyphs out
+      // backwards and hands reorderRuns an even level that stops it from
+      // being reordered at all
+      const shaping = frag.shaping ?? frag.span;
+      const shape = (text, from, to) =>
+        this.fonts._shapeCached(text, shaping, sliceLevels(frag.levels, from, to));
+      let best = null;
       // Graphemes rather than code points: cutting between a base character
       // and its combining mark, or inside an emoji ZWJ sequence, leaves a
       // dotted circle or a pair of half-emoji on the two sides of the break.
-      const cps = graphemes(frag.text);
-      let lo = 0;
-      let hi = cps.length - 1;
-      let best = null;
-      while (lo <= hi) {
-        const mid = (lo + hi) >> 1;
-        const prefix = cps.slice(0, mid + 1).join('');
-        // shaped at the bidi level this text actually has: assuming level 0
-        // here re-shapes an rtl word as ltr, which lays its glyphs out
-        // backwards and hands reorderRuns an even level that stops it from
-        // being reordered at all
-        const shaped = this.fonts._shapeCached(prefix, frag.span, sliceLevels(frag.levels, 0, prefix.length));
-        if (used + shaped.width <= maxWidth) {
-          best = { len: prefix.length, shaped, text: prefix };
-          lo = mid + 1;
-        } else {
-          hi = mid - 1;
+      const lead = firstGrapheme(frag.text);
+      if (used + shape(lead, 0, lead.length).width <= maxWidth) {
+        // binary search the longest grapheme prefix of this fragment that fits
+        const cps = graphemes(frag.text);
+        let lo = 0;
+        let hi = cps.length - 1;
+        while (lo <= hi) {
+          const mid = (lo + hi) >> 1;
+          const prefix = cps.slice(0, mid + 1).join('');
+          const shaped = shape(prefix, 0, prefix.length);
+          if (used + shaped.width <= maxWidth) {
+            best = { len: prefix.length, shaped, text: prefix };
+            lo = mid + 1;
+          } else {
+            hi = mid - 1;
+          }
         }
+      } else if (!headFrags.length) {
+        // Not even its first cluster fits, so nothing of the token does: the
+        // caller lets it overflow whole. That is every word at width 0, where
+        // a layout is asked for the narrowest it can be, and the search found
+        // it out by segmenting the whole word and shaping a dozen prefixes of
+        // it, each a word the memo had never seen.
+        return [null, token];
       }
       if (best) {
         headFrags.push({
           text: best.text,
           span: frag.span,
+          shaping,
           shaped: best.shaped,
           start: frag.start,
           levels: sliceLevels(frag.levels, 0, best.len)
@@ -538,7 +552,8 @@ export class TextLayout {
         restFrags.push({
           text: restText,
           span: frag.span,
-          shaped: this.fonts._shapeCached(restText, frag.span, restLevels),
+          shaping,
+          shaped: this.fonts._shapeCached(restText, shaping, restLevels),
           start: frag.start + cut,
           levels: restLevels
         });
@@ -958,19 +973,48 @@ export class TextLayout {
 // somehow absent, code points are the old behaviour and still safe for the
 // scripts that reach a force-break most often.
 let segmenter;
-function graphemes(text) {
+function graphemeSegmenter() {
   if (segmenter === undefined) {
     segmenter =
       typeof Intl !== 'undefined' && Intl.Segmenter
         ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
         : null;
   }
-  if (!segmenter) return Array.from(text);
+  return segmenter;
+}
+
+// Two ASCII characters are never one cluster, bar a CR before a LF (UAX#29
+// GB3): whatever extends a cluster or joins into one — marks, joiners,
+// spacing marks, prepends — sits above U+02FF. So text of nothing else,
+// which is most of what a document cuts, needs no segmenter: it costs a
+// microsecond a call, and the width floors ask once a word.
+function plainAscii(text) {
+  for (let i = 0; i < text.length; i++) {
+    const c = text.charCodeAt(i);
+    if (c >= 0x80 || (c === 13 && text.charCodeAt(i + 1) === 10)) return false;
+  }
+  return true;
+}
+
+function graphemes(text) {
+  if (plainAscii(text)) return text.split('');
+  const segments = graphemeSegmenter();
+  if (!segments) return Array.from(text);
   const out = [];
-  for (const { segment } of segmenter.segment(text)) out.push(segment);
+  for (const { segment } of segments.segment(text)) out.push(segment);
   return out;
 }
 
+/** The first grapheme cluster of `text`, without segmenting the rest. */
+function firstGrapheme(text) {
+  const c0 = text.charCodeAt(0);
+  if (c0 < 0x80 && c0 !== 13 && !(text.charCodeAt(1) >= 0x80)) return text.slice(0, 1);
+  const segments = graphemeSegmenter();
+  if (!segments) return String.fromCodePoint(text.codePointAt(0));
+  for (const { segment } of segments.segment(text)) return segment;
+  return '';
+}
+
 // UTF-16 length of a glyph cluster's codePoints array
 function cuLength(codePoints) {
   let len = 0;