ntk 7.1.0 → 7.3.0

package/lib/renderingcontext_2d.js

@@ -525,6 +525,7 @@ class RenderingContext2d {
       textStyle: this._textStyle,
       fontString: this._lastFontString,
       fontVariations: this._fontVariations,
+      textRendering: this._textRendering,
       textAlign: this.textAlign,
       textBaseline: this.textBaseline,
       m: this._m.slice(),
@@ -548,6 +549,7 @@ class RenderingContext2d {
     this._textStyle = s.textStyle;
     this._lastFontString = s.fontString;
     this._fontVariations = s.fontVariations;
+    this._textRendering = s.textRendering;
     this.textAlign = s.textAlign;
     this.textBaseline = s.textBaseline;
     this._m = s.m;
@@ -1008,8 +1010,9 @@ class RenderingContext2d {
     // extrude-polyline pushes the first and last points outward along the
     // line, which on a closed loop extends the seam over band it already
     // covers — invisible against an opaque colour, a double-blended edge
-    // against a translucent one.
-    const closedStroke =
+    // against a translucent one. Runs cut at an escaping join (see
+    // escapingJoins) want butt ends for the same reason.
+    const buttStroke =
       cap === "butt"
         ? stroke
         : extrudePolyline({
@@ -1063,6 +1066,108 @@ class RenderingContext2d {
       // bevel-to-arc gap depth for turn angle θ: r * (1 - cos(θ/2))
       if (r * (1 - Math.sqrt((1 + dot) / 2)) > 0.05) addDisk(b[0], b[1]);
     };
+    /**
+     * Interior vertices whose join extrude-polyline cannot be trusted with,
+     * ascending; null — the common case — for a polyline with none.
+     *
+     * Whatever the join style, it closes the *inner* side of a join at the
+     * intersection of the two inner offsets, r/cos(φ/2) from the vertex for
+     * a turn of φ: 'bevel' bevels the outer side and still emits that
+     * point, and `miterLimit` only chooses which side gets bevelled. As φ
+     * approaches a reversal the intersection runs away to infinity, so a
+     * hairpin — a cusp in a curve, a polyline that doubles back — threw a
+     * spike hundreds of pixels off the path that no join style and no miter
+     * limit could reach (issue #233).
+     *
+     * The intersection is legitimate only while it stays inside the two
+     * segments, which it does when each is at least r·tan(φ/2) long: that
+     * is how far back along both the point sits. Where they are shorter it
+     * is ink outside the path, and the run is cut at that vertex instead —
+     * both sides then end butt on it, so the inner corner is the union of
+     * the two rectangles, and the outer side gets addJoinWedge.
+     */
+    const escapingJoins = (run) => {
+      let cuts = null;
+      for (let i = 1; i < run.length - 1; i++) {
+        const ax = run[i][0] - run[i - 1][0];
+        const ay = run[i][1] - run[i - 1][1];
+        const bx = run[i + 1][0] - run[i][0];
+        const by = run[i + 1][1] - run[i][1];
+        // This runs over every vertex of every stroke and almost never
+        // fires, so it is written to answer "no" in multiplications alone:
+        // squared lengths, and the raw (unnormalized) dot and cross, which
+        // give tan(φ/2) = cross / (|a||b| + dot) directly.
+        const la = ax * ax + ay * ay;
+        const lb = bx * bx + by * by;
+        if (!la || !lb) continue;
+        const shortest = la < lb ? la : lb;
+        const dot = ax * bx + ay * by;
+        // a turn of 90° or less has tan(φ/2) <= 1, and so cannot reach past
+        // a segment that is already at least r long
+        if (dot >= 0 && r * r <= shortest) continue;
+        const cross = ax * by - ay * bx;
+        // r·tan(φ/2) > min(|a|, |b|), squared. A non-positive denominator is
+        // the reversal the tangent is infinite at.
+        const denom = Math.sqrt(la * lb) + dot;
+        if (denom <= 0 || (r * cross) ** 2 > shortest * denom * denom) {
+          (cuts ??= []).push(i);
+        }
+      }
+      return cuts;
+    };
+    /**
+     * The outer side of the join at `b`, which cutting the run leaves to us:
+     * the wedge between the two segments' outer offsets. A miter within the
+     * limit fills it to the tip, everything else bevels — the same choice
+     * the extruder would have made, on geometry that stays put.
+     */
+    const addJoinWedge = (a, b, c) => {
+      const l1 = Math.hypot(b[0] - a[0], b[1] - a[1]);
+      const l2 = Math.hypot(c[0] - b[0], c[1] - b[1]);
+      if (!l1 || !l2) return;
+      const ux = (b[0] - a[0]) / l1;
+      const uy = (b[1] - a[1]) / l1;
+      const vx = (c[0] - b[0]) / l2;
+      const vy = (c[1] - b[1]) / l2;
+      // outer side: away from the turn. A zero cross product is a straight
+      // run or an exact reversal, and neither leaves a wedge to fill.
+      const cross = ux * vy - uy * vx;
+      if (!cross) return;
+      // each segment's own offset at b: the normal r out on the outer side
+      const s = cross > 0 ? -r : r;
+      const p1x = b[0] - uy * s;
+      const p1y = b[1] + ux * s;
+      const p2x = b[0] - vy * s;
+      const p2y = b[1] + vx * s;
+      const dot = Math.max(-1, Math.min(1, ux * vx + uy * vy));
+      const ratio = 1 / Math.sqrt((1 + dot) / 2); // miter length / r
+      if (join === "miter" && ratio <= this.miterLimit) {
+        // the tip is r·ratio along the bisector, where the two offsets meet
+        const mx = p1x + p2x - 2 * b[0];
+        const my = p1y + p2y - 2 * b[1];
+        const ml = Math.hypot(mx, my);
+        const tx = b[0] + (mx / ml) * r * ratio;
+        const ty = b[1] + (my / ml) * r * ratio;
+        tris.push(b[0], b[1], p1x, p1y, tx, ty);
+        tris.push(b[0], b[1], tx, ty, p2x, p2y);
+        return;
+      }
+      tris.push(b[0], b[1], p1x, p1y, p2x, p2y);
+    };
+    const emit = (run, extruder) => {
+      const mesh = extruder.build(run);
+      for (const tri of mesh.cells) {
+        for (let i = 0; i < 3; ++i) {
+          tris.push(mesh.positions[tri[i]][0], mesh.positions[tri[i]][1]);
+        }
+      }
+    };
+    // a square cap's extension of end point `p` away from its neighbour `q`
+    const capOut = (p, q) => {
+      const d = Math.hypot(p[0] - q[0], p[1] - q[1]);
+      if (!d) return p;
+      return [p[0] + ((p[0] - q[0]) / d) * r, p[1] + ((p[1] - q[1]) / d) * r];
+    };
     // one polyline through extrusion + round-geometry post-processing;
     // closed loops carry the seam point at both ends and get no caps
     const extrudeRun = (pts, closed) => {
@@ -1089,11 +1194,30 @@ class RenderingContext2d {
         ];
         pts = [mid, ...pts.slice(1), mid];
       }
-      const mesh = (closed ? closedStroke : stroke).build(pts);
-      for (const tri of mesh.cells) {
-        for (let i = 0; i < 3; ++i) {
-          tris.push(mesh.positions[tri[i]][0], mesh.positions[tri[i]][1]);
+      const cuts = escapingJoins(pts);
+      if (!cuts) {
+        emit(pts, closed ? buttStroke : stroke);
+      } else {
+        // Extrude the pieces between the cuts, each ending butt on the cut
+        // vertex it shares with the next. That leaves the run's own two ends
+        // to us as well: extrude-polyline squares both ends of whatever it
+        // is handed, so a square cap is applied here instead.
+        const last = pts.length - 1;
+        let from = 0;
+        for (const to of [...cuts, last]) {
+          const run = pts.slice(from, to + 1);
+          if (!closed && cap === "square") {
+            if (from === 0) run[0] = capOut(run[0], run[1]);
+            if (to === last)
+              run[run.length - 1] = capOut(
+                run[run.length - 1],
+                run[run.length - 2],
+              );
+          }
+          emit(run, buttStroke);
+          from = to;
         }
+        for (const i of cuts) addJoinWedge(pts[i - 1], pts[i], pts[i + 1]);
       }
       if (roundJoin) {
         // every real vertex is interior now, the seam included: a closed
@@ -2339,7 +2463,12 @@ class RenderingContext2d {
     const positioned = [];
     let cursor = ox;
     for (const run of reorderRuns(shaped.runs)) {
-      positioned.push({ run, x: cursor, y: oy });
+      positioned.push({
+        run,
+        x: cursor,
+        y: oy,
+        textRendering: this._textRendering,
+      });
       cursor += run.width;
     }
     this.drawGlyphs(
@@ -2451,6 +2580,30 @@ class RenderingContext2d {
     return this._fontVariations ?? null;
   }
 
+  /**
+   * CSS's `text-rendering`: which glyph path this text takes, overriding the
+   * size thresholds in `app.textPolicy`.
+   *
+   * - `'geometricPrecision'` — outlines every draw, glyph origins **not**
+   *   rounded to whole pixels. What display text wants, and what any text
+   *   whose shape is being animated wants: a variable font's axis moves
+   *   advances by fractions of a pixel, and cached glyphs can only land on
+   *   whole ones, so those fractions accumulate until a glyph crosses a
+   *   rounding boundary and jumps a pixel on its own.
+   * - `'optimizeSpeed'` — cached server-side glyphs at any size.
+   * - `'auto'` (default) — the thresholds decide.
+   *
+   * `'optimizeLegibility'` is accepted and means `'auto'`; ntk has no
+   * hinting to turn on.
+   */
+  set textRendering(val) {
+    this._textRendering = val || undefined;
+  }
+
+  get textRendering() {
+    return this._textRendering ?? "auto";
+  }
+
   // ------------------------------------------------------------------
   // gradients / images
 

package/lib/renderingcontext_gles.js

@@ -0,0 +1,312 @@
+// Direct rendering context: OpenGL ES 2 on the GPU, frames delivered to the
+// server as dma-buf descriptors over DRI3 + Present (lib/glswapchain.js).
+//
+// The API is WebGL-shaped and camelCase — `gl.createShader`, `gl.drawElements`
+// — because that is what the addon's ES 2 binding exposes and what anyone
+// writing shaders already knows. It is *not* the same API as the indirect GLX
+// context, whose OpenGL 1.x commands are PascalCase and whose pipeline has no
+// shaders at all; the two backends are honestly different rather than one
+// pretending to be the other. Cross-backend code branches on `gl.backend`
+// ('direct' or 'indirect') — see docs/context-gles.md.
+//
+// Setup is synchronous, which is the point: creating the GPU context and its
+// buffers needs the DRM device and nothing from the X server, so `gl.*` works
+// on the line after `getContext`. Only *presenting* needs the server, and
+// `ready` is what reports whether that works — it resolves when the first
+// buffer has been imported by the server, which is the moment the whole path
+// is proven.
+
+import Drawable from './drawable.js';
+import { GLError, backendFor, glError, loadDriAddon } from './gl.js';
+import { GLSwapchain } from './glswapchain.js';
+
+/**
+ * One GPU context per app and pixel format, not one per surface.
+ *
+ * An EGL context is expensive (a device, a GBM device, a display, a config
+ * scan) and every surface in an app wants the same one; sharing it also means
+ * textures and programs are shared between surfaces, as they are between
+ * canvases in a browser tab. The cost is that exactly one surface is current
+ * at a time, which `_bind` takes care of.
+ */
+function sharedGpu(app, dri, { format, depthSize, devicePath }) {
+  const key = `${format}|${depthSize}|${devicePath ?? ''}`;
+  const cache = (app._glGpus ??= new Map());
+  const existing = cache.get(key);
+  if (existing) return existing;
+  let gpu;
+  try {
+    gpu = new dri.Gpu({ format, depthSize, ...(devicePath ? { devicePath } : {}) });
+  } catch (err) {
+    throw glError(
+      GLError.CONTEXT_FAILED,
+      `could not create a GPU context on ${devicePath ?? 'the default render node'}: ${err.message}`,
+      null,
+      err
+    );
+  }
+  cache.set(key, gpu);
+  return gpu;
+}
+
+class RenderingContextGLES {
+  constructor(window, config = {}) {
+    const app = window.app;
+    const caps = app._glCapsResolved;
+    if (!caps) {
+      throw glError(
+        GLError.CONTEXT_FAILED,
+        "getContext('gles') needs the direct-rendering probe to have answered, and it has not",
+        `createClient() runs the probe during the handshake when glPolicy could pick the
+direct backend, so a context can be created synchronously afterwards. Under the
+default policy ('indirect') it does not run, and asking for this context by name
+does not make it retroactive. Either:
+
+  const app = await createClient({ glPolicy: 'auto' });   // probe at connect
+  await app.glCapabilities();                             // or ask, once, later`
+      );
+    }
+    if (!caps.direct) throw caps.reason;
+
+    const dri = loadDriAddon();
+    this.window = window;
+    this.app = app;
+    this.X = window.X;
+    this.dri = dri;
+    /** which backend this is, for code that runs on either */
+    this.backend = 'direct';
+    this.error = null;
+
+    // The buffer format has to match how the server will read the pixmap, and
+    // that is the window's depth: 24 is XRGB (opaque), 32 is ARGB (the
+    // compositor blends the alpha). A window created without an explicit depth
+    // has the root's.
+    const depth = window.depth || app.display.screen[0].root_depth || 24;
+    if (depth !== 24 && depth !== 32) {
+      throw glError(
+        GLError.CONTEXT_FAILED,
+        `direct rendering needs a 24- or 32-bit window, and this one is ${depth}-bit`,
+        'Create the window with depth 24 (opaque) or 32 (per-pixel alpha, via\napp.findArgbVisual()).'
+      );
+    }
+    this.depth = depth;
+
+    const policy = app.glPolicy;
+    this.gpu = sharedGpu(app, dri, {
+      format: depth === 32 ? dri.FORMAT.ARGB8888 : dri.FORMAT.XRGB8888,
+      depthSize: config.depthSize ?? config.DEPTH_SIZE ?? 16,
+      devicePath: policy.devicePath ?? caps.device
+    });
+
+    this.swapchain = new GLSwapchain({
+      window,
+      gpu: this.gpu,
+      dri,
+      DRI3: caps.DRI3,
+      Present: caps.Present,
+      depth,
+      policy
+    });
+    window._setGenericEventSink(caps.Present.majorOpcode, this.swapchain);
+
+    /**
+     * Resolves once a frame's buffer has been accepted by the server — the
+     * whole path proven, not just the parts on this side of the socket — and
+     * rejects with a coded error if it cannot be. Nothing needs to await it
+     * before drawing; it is how a caller decides to show a fallback instead.
+     */
+    this.ready = new Promise((resolve, reject) => {
+      this.swapchain.onValidated = (err) => {
+        if (err) {
+          this.error = err;
+          reject(err);
+        } else resolve(this);
+      };
+    });
+    // a rejection nobody is listening for must not take the process down;
+    // `error` and the onError hook are the other ways to find out
+    this.ready.catch(() => {});
+    this.swapchain.onReady = () => this._onFrameAvailable();
+    this._frameWanted = null;
+
+    // GL entry points and constants, bound so that whichever surface this
+    // context owns is the current one when they run
+    this._installGL();
+    this.makeCurrent();
+    // settle `ready` now rather than on the first frame — see validate()
+    this.swapchain.validate();
+  }
+
+  /**
+   * Copy the addon's ES 2 namespace onto this context.
+   *
+   * Every function is wrapped with the currency check rather than documented
+   * as the caller's job: the shared context means another surface may have
+   * been current since the last call here, and a GL call against the wrong
+   * surface draws into the wrong window. The check is one comparison against
+   * a field — next to a native call, it does not register.
+   */
+  _installGL() {
+    const table = this.dri.gl;
+    for (const key in table) {
+      const value = table[key];
+      if (typeof value !== 'function') {
+        this[key] = value; // GL constants
+        continue;
+      }
+      this[key] = (...args) => {
+        if (this.app._glCurrent !== this) this._bind();
+        return value(...args);
+      };
+    }
+  }
+
+  /**
+   * Make this context's surface current, sizing it to the window first.
+   *
+   * Call it at the top of a frame: that is where a resize can be honoured
+   * without throwing away a half-drawn one.
+   */
+  makeCurrent() {
+    if (this.error || this._destroyed || this.window._destroyed) return this;
+    const width = this.window.width;
+    const height = this.window.height;
+    if (width !== this._width || height !== this._height) {
+      this._width = width;
+      this._height = height;
+      this._surface = null; // a new size is a new generation
+    }
+    this._bind();
+    return this;
+  }
+
+  _bind() {
+    if (this.error || this._destroyed) return;
+    if (!this._surface) {
+      this._surface = this.swapchain.surfaceFor(this._width ?? this.window.width, this._height ?? this.window.height);
+    }
+    this.gpu.makeCurrent(this._surface);
+    this.app._glCurrent = this;
+  }
+
+  /**
+   * Is a frame worth drawing right now?
+   *
+   * False when every buffer is still with the server. Drawing anyway is not
+   * wrong, only wasted: the swap that followed would have nowhere to go.
+   * `onFrameAvailable` is the other half — it fires when this turns true.
+   */
+  canRender() {
+    return this.swapchain.canRender();
+  }
+
+  /** Called when `canRender()` became true again after a swap was refused. */
+  set onFrameAvailable(fn) {
+    this._frameWanted = fn;
+  }
+
+  get onFrameAvailable() {
+    return this._frameWanted;
+  }
+
+  _onFrameAvailable() {
+    this._frameWanted?.();
+  }
+
+  /**
+   * Show the frame just drawn.
+   *
+   * Named as the indirect context names it, so a draw loop can end the same
+   * way on either backend; `swapBuffers` is the same call under the spelling
+   * the rest of this API uses. Returns false when the frame could not be
+   * shown yet — see `canRender`.
+   */
+  SwapBuffers() {
+    if (this.error || this._destroyed || this.window._destroyed) return false;
+    const sent = this.swapchain.swap();
+    // A resize seen only now still gets picked up: the next frame binds a
+    // generation at the new size. Checked after the swap so the frame that was
+    // drawn at the old size is the one that goes out.
+    if (this.window.width !== this._width || this.window.height !== this._height) {
+      this._surface = null;
+    }
+    return sent;
+  }
+
+  swapBuffers() {
+    return this.SwapBuffers();
+  }
+
+  /** The GL renderer string, once there is a context — handy in bug reports. */
+  get renderer() {
+    try {
+      return this.dri.gl.getString(this.dri.GL.RENDERER);
+    } catch {
+      return null;
+    }
+  }
+
+  destroy() {
+    if (this._destroyed) return;
+    this._destroyed = true;
+    this.swapchain.destroy();
+    this.window._setGenericEventSink(0, null);
+    if (this.app._glCurrent === this) {
+      this.app._glCurrent = null;
+      try {
+        this.gpu.makeCurrent(null);
+      } catch {
+        // the context is going away regardless
+      }
+    }
+    this._surface = null;
+    // the Gpu itself is shared and outlives this context (App#close frees it)
+  }
+
+  [Symbol.dispose]() {
+    this.destroy();
+  }
+}
+
+Drawable.renderingContextFactory['gles'] = (window, config) => new RenderingContextGLES(window, config);
+
+// `getContext('opengl')` is the backend-neutral name: it is what the indirect
+// context registered before there was a choice, and what code that does not
+// care should keep asking for. The policy decides which one it gets, and the
+// default policy is still the indirect one, so nothing changes under an app
+// that has not opted in.
+const indirectFactory = Drawable.renderingContextFactory['opengl'];
+Drawable.renderingContextFactory['opengl'] = (window, config) => {
+  const app = window.app;
+  const backend = backendFor(app);
+  if (backend === 'direct') return new RenderingContextGLES(window, config);
+  if (backend === 'off') {
+    const caps = app._glCapsResolved;
+    throw (
+      caps?.reason ??
+      glError(GLError.DISABLED, "glPolicy is 'off', so getContext('opengl') has no backend to use")
+    );
+  }
+  // null: the policy could pick direct, but the probe has not answered — a
+  // policy raised after connecting. 'direct' must not quietly become the other
+  // backend, because the whole point of asking for it by name is that the draw
+  // code only speaks ES 2.
+  if (backend === null) {
+    if (app.glPolicy.mode === 'direct') {
+      throw glError(
+        GLError.CONTEXT_FAILED,
+        "glPolicy is 'direct' but the direct-rendering probe has not answered, so there is no context to give you",
+        'The probe runs inside createClient() when the policy is set there. A policy\n' +
+          'raised afterwards needs one `await app.glCapabilities()` first.'
+      );
+    }
+    console.warn(
+      "ntk: glPolicy is 'auto' but the direct-rendering probe has not answered yet, so " +
+        "getContext('opengl') is using indirect GLX. Pass glPolicy to createClient(), or " +
+        'await app.glCapabilities() before creating the context.'
+    );
+  }
+  return indirectFactory(window, config);
+};
+
+export default RenderingContextGLES;

package/lib/text/glyphs.js

@@ -20,11 +20,17 @@ import { trapezoidize } from '../trapezoid.js';
  * - `cacheBytes` — LRU budget for uploaded glyph bitmaps per connection;
  *   least-recently-drawn (face, size) pages are freed server-side
  *   (FreeGlyphSet) so transient sizes don't accumulate.
+ * - `textRendering` — an app-wide default for the per-run property of the
+ *   same name (see `routeForRendering`). Left undefined the thresholds
+ *   decide, which is what almost every app wants; `'geometricPrecision'`
+ *   here is the blunt instrument for a window that is all display text.
+ *   A run that names its own always wins.
  */
 export const DEFAULT_TEXT_POLICY = {
   bitmapMax: 128,
   vectorFrom: 256,
-  cacheBytes: 8 << 20
+  cacheBytes: 8 << 20,
+  textRendering: undefined
 };
 
 function policyOf(app) {
@@ -228,21 +234,75 @@ export function positionGlyphs(positioned) {
  *
  * @returns {'bitmap'|'vector'}
  */
-export function routeGlyphSize(app, font, size, policy = policyOf(app)) {
+/**
+ * CSS's `text-rendering`, as far as it means anything here: a run's own
+ * answer to which glyph path it takes, overriding the size thresholds.
+ *
+ * - `geometricPrecision` — the vector path, always. Outlines are flattened
+ *   at the exact size and glyph origins are not rounded, so advances land
+ *   where shaping put them. This is what display text wants, and what any
+ *   text whose shape is being animated wants: a variable font's axis moves
+ *   advances by fractions of a pixel, and on the bitmap path those fractions
+ *   accumulate silently until a glyph crosses a rounding boundary and jumps
+ *   a whole pixel on its own. It is also the path that caches nothing, so
+ *   an axis under a slider stops minting a glyph page per step.
+ * - `optimizeSpeed` — the bitmap path, always. Cached server-side glyphs at
+ *   any size, for text that is large but static.
+ * - `auto` (the default, and anything unrecognized) — the size thresholds
+ *   and the churn ring decide, as before.
+ *
+ * `optimizeLegibility` is accepted and means `auto`: ntk has no hinting to
+ * turn on, so promising anything by it would be a lie.
+ */
+export function routeForRendering(textRendering) {
+  if (textRendering === 'geometricPrecision') return 'vector';
+  if (textRendering === 'optimizeSpeed') return 'bitmap';
+  return null; // auto: ask the thresholds
+}
+
+export function routeGlyphSize(app, font, size, policy = policyOf(app), textRendering) {
+  // Inlined rather than a call to `routeForRendering`: this is the first
+  // thing every run of every draw does, and the overwhelmingly common answer
+  // is "nobody asked". One `??` and one comparison get us past it.
+  const asked = textRendering ?? policy.textRendering;
+  if (asked !== undefined && asked !== 'auto') {
+    const route = routeForRendering(asked);
+    if (route) return route;
+  }
   if (size <= policy.bitmapMax) return 'bitmap';
   if (size > policy.vectorFrom) return 'vector';
 
+  // The ring answers "is this face being drawn at something it has drawn
+  // recently, or is it churning?" — so it has to be keyed by the thing that
+  // stays put while the churn happens.
+  //
+  // For a variable font that is the *base* face, not the instance: every
+  // point on an axis is a Font of its own, with its own key, so an animated
+  // axis handed each step a fresh empty ring and the churn was invisible —
+  // it read as eight unrelated faces each drawn once. Keyed by the base and
+  // recording the instance alongside the size, an axis sweep and a size
+  // sweep look like what they both are, and a page of static text at one
+  // weight still reuses its entry on every frame.
   if (!app._sizeRings) app._sizeRings = new Map();
-  let ring = app._sizeRings.get(font.key);
+  // A face with no instances behind it keeps the old ring exactly: its key
+  // is already constant across the ring, so the size alone identifies a
+  // glyph page and the entries stay numbers. Only a variable instance pays
+  // for the composite key, and only in this band — text at or below
+  // `bitmapMax` returned above without touching any of it.
+  const base = font.variationOf;
+  let ring = app._sizeRings.get(base ? base.key : font.key);
   if (!ring) {
     ring = [];
-    app._sizeRings.set(font.key, ring);
+    app._sizeRings.set(base ? base.key : font.key, ring);
   }
-  const reused = ring.includes(size);
+  // what a glyph page is keyed by, which is exactly what has to repeat for
+  // caching to pay for itself
+  const entry = base ? `${font.key}@${size}` : size;
+  const reused = ring.includes(entry);
   // dedupe consecutive entries so one frame drawing many runs at one size
   // occupies a single slot — the ring then spans ~8 distinct frames
-  if (ring[ring.length - 1] !== size) {
-    ring.push(size);
+  if (ring[ring.length - 1] !== entry) {
+    ring.push(entry);
     if (ring.length > 8) ring.shift();
   }
 
@@ -269,7 +329,9 @@ export function drawGlyphRuns(app, op, srcId, dstId, positioned) {
   let vector = null;
   for (let i = 0; i < positioned.length; i++) {
     const { run } = positioned[i];
-    if (routeGlyphSize(app, run.font, run.size, policy) === 'vector') {
+    if (
+      routeGlyphSize(app, run.font, run.size, policy, positioned[i].textRendering) === 'vector'
+    ) {
       if (!vector) {
         vector = [];
         bitmap = positioned.slice(0, i);

package/lib/text/layout.js

@@ -67,6 +67,7 @@ export class TextLayout {
         weight: s.weight ?? style.weight,
         style: s.style ?? style.style,
         variations: s.variations ?? style.variations,
+        textRendering: s.textRendering ?? style.textRendering,
         features: s.features ?? style.features,
         language: s.language ?? style.language,
         color: s.color ?? style.color ?? null
@@ -497,7 +498,15 @@ export class TextLayout {
         const color = r.span.color;
         if (batch.length && color !== batchColor) flush();
         batchColor = color;
-        batch.push({ run: r.run, x: x + line.x + r.x, y: y + line.baseline });
+        batch.push({
+          run: r.run,
+          x: x + line.x + r.x,
+          y: y + line.baseline,
+          // per run, because it is a span property: one paragraph may hold
+          // a display word that wants exact positions and body text that
+          // wants its glyph cache. `drawGlyphRuns` already partitions.
+          textRendering: r.span.textRendering
+        });
       }
     }
     flush();