ntk 8.8.2 → 8.9.0

package/lib/text/fontmanager.js

@@ -43,6 +43,26 @@ function opticalSizeFor(style) {
   return typeof size === 'number' && Number.isFinite(size) ? size : undefined;
 }
 
+/**
+ * Cache-key fragment for what shapes a run beyond its face and size: the
+ * OpenType features (either form fontkit takes — an array of tags, or an
+ * object of tag → on/off), the language and the letter spacing. `''` for a
+ * style with none of them, which is nearly every style.
+ */
+function shapingKeyOf(style) {
+  const { features, language, letterSpacing } = style;
+  if (!features && !language && !letterSpacing) return '';
+  let feats = '';
+  if (Array.isArray(features)) feats = [...features].sort().join(',');
+  else if (features) {
+    feats = Object.keys(features)
+      .sort()
+      .map((tag) => `${tag}=${features[tag] ? 1 : 0}`)
+      .join(',');
+  }
+  return `${feats}|${language ?? ''}|${letterSpacing || 0}`;
+}
+
 /** Cache-key fragment for the optical size, `''` when the axis is left alone. */
 function opticalKeyOf(style) {
   return opticalSizeFor(style) ?? '';
@@ -346,11 +366,16 @@ export default class FontManager {
     // variations and optical-size fragments only earn their keep on the
     // family path — where two points of one axis would otherwise share a
     // shaped run, and the second would be drawn with the first's advances.
+    // Features, language and spacing change the glyphs a word shapes to, so
+    // they are part of the key on both paths: without them a word shaped once
+    // 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);
     const key = font
-      ? `${font.key}|${style.size}|${style.weight}|${style.style}|${levelsKey}|${text}`
+      ? `${font.key}|${style.size}|${style.weight}|${style.style}|${shaping}|${levelsKey}|${text}`
       : `${style.family}|${style.size}|${style.weight}|${style.style}|${variationsKeyOf(
           style.variations
-        )}|${opticalKeyOf(style)}|${levelsKey}|${text}`;
+        )}|${opticalKeyOf(style)}|${shaping}|${levelsKey}|${text}`;
     let shaped = this._shapeCache.get(key);
     if (shaped) {
       // Map iterates in insertion order: re-inserting a hit moves it to the
@@ -390,13 +415,10 @@ export default class FontManager {
    * levels cannot recover it (RTL text in an RTL paragraph carries level 1,
    * which reads as an even base) and start/end alignment depends on it.
    *
-   * `features` and `language` change shaped output but are not part of the
-   * memo key (styles reaching it via TextLayout never carry them into the
-   * key either), so a style with either shapes uncached rather than
-   * poisoning entries other callers share.
+   * `features`, `language` and `letterSpacing` are part of the memo key, so
+   * a style with any of them has entries of its own.
    */
   _shapeCachedWhole(text, style) {
-    if (style.features || style.language) return shapeText(this, text, style);
     const emb = embeddingLevels(text, style.direction);
     const baseLevel = emb.paragraphs.length ? emb.paragraphs[0].level : 0;
     const shaped = this._shapeCached(text, style, normalizedLevels(emb.levels, 0, text.length));

package/lib/text/layout.js

@@ -21,7 +21,8 @@ function isWsGlyph(g) {
  * across relayouts), and bidi reordering is applied per line (UAX#9 L2).
  *
  * Content is a plain string or an array of spans
- * `{ text, family?, size?, weight?, style?, features?, language?, color? }`;
+ * `{ text, family?, size?, weight?, style?, features?, language?,
+ * letterSpacing?, color? }`;
  * span fields override the base style. Options:
  *
  * - `maxWidth` — target container width (default: unlimited)
@@ -72,6 +73,7 @@ export class TextLayout {
         textRendering: s.textRendering ?? style.textRendering,
         features: s.features ?? style.features,
         language: s.language ?? style.language,
+        letterSpacing: s.letterSpacing ?? style.letterSpacing,
         color: s.color ?? style.color ?? null
       };
       merged.font = s.font ?? style.font ?? fonts.match(merged.family, merged);
@@ -322,7 +324,9 @@ export class TextLayout {
       const m = TRAILING_WS.exec(last.text);
       if (m) {
         const spaceGlyph = last.span.font.fk.glyphForCodePoint(0x20);
-        wsWidth = m[0].length * spaceGlyph.advanceWidth * last.span.font.scale(last.span.size);
+        const spacing = Number.isFinite(last.span.letterSpacing) ? last.span.letterSpacing : 0;
+        wsWidth =
+          m[0].length * (spaceGlyph.advanceWidth * last.span.font.scale(last.span.size) + spacing);
       }
     }
     return { fragments, width, wsWidth, required, start, end };

package/lib/text/shape.js

@@ -45,6 +45,62 @@ export function normalizedLevels(levels, start, end) {
   return Array.prototype.slice.call(levels, start, end).join(',');
 }
 
+/**
+ * The ligatures a font applies by default and a reader can do without. CSS
+ * turns them off wherever letters are spaced apart, since an `fi` drawn as
+ * one glyph cannot be spaced in its middle: the gap would open on one side of
+ * the pair and not the other. Required ones — Arabic joining forms, `rlig` —
+ * stay on.
+ */
+const OPTIONAL_LIGATURES = ['liga', 'clig', 'dlig', 'hlig'];
+
+/**
+ * The features a letter-spaced run shapes with: the optional ligatures off,
+ * underneath whatever the caller asked for — a style that names `liga`
+ * itself still gets it. `features` is either form fontkit takes, an array of
+ * tags to turn on or an object of tag → on/off.
+ */
+/**
+ * A copy of `features` for fontkit, which **adds to the object it is handed**
+ * — `rvrn` and the like, as it plans the shaping. Handed a caller's own
+ * object that is a style quietly growing keys, which changes the memo key it
+ * is filed under next time, and a frozen one throws.
+ */
+function ownFeatures(features) {
+  if (!features) return features;
+  return Array.isArray(features) ? [...features] : { ...features };
+}
+
+function spacedFeatures(features) {
+  const off = Object.fromEntries(OPTIONAL_LIGATURES.map((tag) => [tag, false]));
+  if (!features) return off;
+  if (Array.isArray(features)) {
+    for (const tag of features) off[tag] = true;
+    return off;
+  }
+  return { ...off, ...features };
+}
+
+/**
+ * Space a shaped run's glyphs apart by `spacing` px: added to the advance of
+ * every glyph that has one, so a combining mark keeps sitting on its base.
+ * An rtl run stores its glyphs in visual order, and its spacing belongs on
+ * the *reading* side of each glyph — the left — so there the glyph is drawn
+ * that much further along its advance as well.
+ */
+function spaceGlyphs(shaped, spacing) {
+  const rtl = shaped.direction === 'rtl';
+  let width = 0;
+  for (const g of shaped.glyphs) {
+    if (g.ax > 0) {
+      g.ax += spacing;
+      if (rtl) g.dx += spacing;
+    }
+    width += g.ax;
+  }
+  shaped.width = width;
+}
+
 /**
  * Shape a string through the full pipeline:
  *
@@ -61,7 +117,7 @@ export function normalizedLevels(levels, start, end) {
  * @param {FontManager} fonts
  * @param {string} text
  * @param {object} style { font | family/weight/style, size, features,
- *   language, direction: 'ltr'|'rtl'|'auto' }
+ *   language, letterSpacing, direction: 'ltr'|'rtl'|'auto' }
  * @param {ArrayLike<number>} [levels] precomputed embedding levels for `text`
  * @returns {{text, width, baseLevel, runs: Array<{font, size, direction,
  *   level, width, glyphs, text, start, end}>}}
@@ -108,6 +164,11 @@ export function shapeText(fonts, text, style, levels) {
     i += ch.length;
   }
 
+  // px added after every glyph, CSS's `letter-spacing`; 0 leaves the run
+  // exactly as the font shapes it, ligatures and all
+  const spacing = Number.isFinite(style.letterSpacing) ? style.letterSpacing : 0;
+  const features = spacing ? spacedFeatures(style.features) : ownFeatures(style.features);
+
   const runs = [];
   let width = 0;
   for (const item of items) {
@@ -115,9 +176,10 @@ export function shapeText(fonts, text, style, levels) {
     const sub = text.slice(item.start, item.end);
     const shaped = item.font.shape(sub, size, {
       direction,
-      features: style.features,
+      features,
       language: style.language
     });
+    if (spacing) spaceGlyphs(shaped, spacing);
     shaped.level = item.level;
     shaped.text = sub;
     shaped.start = item.start;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "8.8.2",
+  "version": "8.9.0",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",