ntk 7.1.0 → 7.2.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;
@@ -2339,7 +2341,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 +2458,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/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();

package/package.json

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