@hidemikimura/receipt-html-to-pdf 0.2.1 → 0.4.0

package/src/walker/gradient.js

@@ -0,0 +1,193 @@
+// @ts-check
+/**
+ * CSS の linear-gradient を PDF の軸シェーディング（ShadingType 2）に落とすための解析。
+ *
+ * 入力は computed style の値なので、色は rgb()/rgba() に、角度は deg に正規化済み。
+ * 出力は箱のローカル座標（左上原点・y 下向き・CSS px）でのグラデーション線と、
+ * 0〜1 に正規化した色止め。
+ */
+import { parseColor } from '../units.js';
+
+/**
+ * @typedef {{t: number, color: import('../units.js').Rgba}} GradientStop
+ * @typedef {{x0: number, y0: number, x1: number, y1: number, stops: GradientStop[]}} LinearGradient
+ */
+
+/**
+ * computed の background-image が単一の linear-gradient ならそれを解析する。
+ * 対応しない書式（repeating / radial / conic / 複数レイヤー）は null。
+ *
+ * @param {string} value  computed の background-image
+ * @param {number} width  箱の幅（px）
+ * @param {number} height 箱の高さ（px）
+ * @returns {LinearGradient|null}
+ */
+export function parseLinearGradient(value, width, height) {
+  const m = /^linear-gradient\((.*)\)$/s.exec(value.trim());
+  if (!m) return null;
+  const args = splitTopLevelCommas(/** @type {string} */ (m[1]));
+  if (args.length < 2) return null;
+
+  let i = 0;
+  let angle = 180; // 既定は「to bottom」
+  const first = /** @type {string} */ (args[0]).trim();
+  // `in oklab` などの補間指定は無視して sRGB で近似する
+  const head = first.replace(/^in\s+\S+(\s+\S+\s+hue)?\s*/i, '').trim();
+  const dir = parseDirection(head);
+  if (dir !== null) {
+    angle = dir;
+    i = 1;
+  } else if (/^in\s/i.test(first) && head === '') {
+    i = 1;
+  }
+
+  const rawStops = args.slice(i).map((s) => s.trim());
+  if (rawStops.length < 2) return null;
+
+  // グラデーション線の長さ（CSS 仕様: |W·sin θ| + |H·cos θ|）
+  const rad = (angle * Math.PI) / 180;
+  const sin = Math.sin(rad);
+  const cos = Math.cos(rad);
+  const length = Math.abs(width * sin) + Math.abs(height * cos);
+  if (!(length > 0)) return null;
+
+  /** @type {GradientStop[]} */
+  const stops = [];
+  for (const raw of rawStops) {
+    // "rgb(255, 0, 0) 30%" / "rgba(0, 0, 0, 0.5)" / "red 10px 20px"（二重指定）
+    const sp = splitColorAndPositions(raw);
+    if (!sp) return null;
+    const color = parseColor(sp.color);
+    if (!color) return null;
+    if (!sp.positions.length) {
+      stops.push({ t: NaN, color });
+      continue;
+    }
+    for (const pos of sp.positions) {
+      const t = resolvePosition(pos, length);
+      if (t === null) return null;
+      stops.push({ t, color });
+    }
+  }
+  if (stops.length < 2) return null;
+
+  fillMissingPositions(stops);
+
+  // 中心を通る線分。CSS の角度は 0deg = 上向き、時計回り。y は下向きなので cos を反転する。
+  const cx = width / 2;
+  const cy = height / 2;
+  const dx = sin;
+  const dy = -cos;
+  return {
+    x0: cx - (dx * length) / 2,
+    y0: cy - (dy * length) / 2,
+    x1: cx + (dx * length) / 2,
+    y1: cy + (dy * length) / 2,
+    stops,
+  };
+}
+
+/**
+ * `45deg` / `to right` / `to right bottom` を CSS 角度（0 = 上、時計回り）にする。
+ * 方向指定でなければ null。
+ * @param {string} s
+ * @returns {number|null}
+ */
+function parseDirection(s) {
+  const deg = /^(-?[\d.]+)deg$/.exec(s);
+  if (deg) return ((parseFloat(/** @type {string} */ (deg[1])) % 360) + 360) % 360;
+  const to = /^to\s+(.+)$/.exec(s);
+  if (!to) return null;
+  const words = /** @type {string} */ (to[1]).trim().split(/\s+/).sort().join(' ');
+  /** @type {Record<string, number>} */
+  const table = {
+    top: 0,
+    right: 90,
+    bottom: 180,
+    left: 270,
+    'right top': 45,
+    'bottom right': 135,
+    'bottom left': 225,
+    'left top': 315,
+  };
+  return table[words] ?? null;
+}
+
+/**
+ * 色止めを「色」と「位置（0〜2 個）」に分ける。
+ * @param {string} s
+ * @returns {{color: string, positions: string[]}|null}
+ */
+function splitColorAndPositions(s) {
+  // 関数記法（rgb(...)）を先に切り出す
+  const fn = /^([a-z-]+\([^()]*\))\s*(.*)$/i.exec(s);
+  if (fn) return { color: /** @type {string} */ (fn[1]), positions: splitWords(/** @type {string} */ (fn[2])) };
+  const kw = /^(\S+)\s*(.*)$/.exec(s);
+  if (!kw) return null;
+  return { color: /** @type {string} */ (kw[1]), positions: splitWords(/** @type {string} */ (kw[2])) };
+}
+
+/** @param {string} s */
+function splitWords(s) {
+  const t = s.trim();
+  return t ? t.split(/\s+/) : [];
+}
+
+/**
+ * 位置指定（30% / 10px）をグラデーション線上の 0〜1 にする。
+ * @param {string} pos
+ * @param {number} length
+ * @returns {number|null}
+ */
+function resolvePosition(pos, length) {
+  const pct = /^(-?[\d.]+)%$/.exec(pos);
+  if (pct) return parseFloat(/** @type {string} */ (pct[1])) / 100;
+  const px = /^(-?[\d.]+)px$/.exec(pos);
+  if (px) return parseFloat(/** @type {string} */ (px[1])) / length;
+  return null;
+}
+
+/**
+ * 位置の無い色止めを埋める。両端は 0 と 1、間は等間隔。
+ * さらに前の位置を下回らないよう単調にする（CSS 仕様）。
+ * @param {GradientStop[]} stops
+ */
+function fillMissingPositions(stops) {
+  const last = stops.length - 1;
+  if (Number.isNaN(/** @type {number} */ (stops[0]?.t))) /** @type {GradientStop} */ (stops[0]).t = 0;
+  if (Number.isNaN(/** @type {number} */ (stops[last]?.t))) /** @type {GradientStop} */ (stops[last]).t = 1;
+  for (let i = 1; i < last; i++) {
+    if (!Number.isNaN(/** @type {number} */ (stops[i]?.t))) continue;
+    // 次に位置が決まっている色止めまでを等分する
+    let j = i + 1;
+    while (j < last && Number.isNaN(/** @type {number} */ (stops[j]?.t))) j++;
+    const from = /** @type {number} */ (stops[i - 1]?.t);
+    const to = /** @type {number} */ (stops[j]?.t);
+    for (let k = i; k < j; k++) {
+      /** @type {GradientStop} */ (stops[k]).t = from + ((to - from) * (k - i + 1)) / (j - i + 1);
+    }
+    i = j - 1;
+  }
+  for (let i = 1; i < stops.length; i++) {
+    const prev = /** @type {number} */ (stops[i - 1]?.t);
+    if (/** @type {number} */ (stops[i]?.t) < prev) /** @type {GradientStop} */ (stops[i]).t = prev;
+  }
+}
+
+/** @param {string} s */
+function splitTopLevelCommas(s) {
+  /** @type {string[]} */
+  const out = [];
+  let depth = 0;
+  let cur = '';
+  for (const ch of s) {
+    if (ch === '(') depth++;
+    else if (ch === ')') depth--;
+    if (ch === ',' && depth === 0) {
+      out.push(cur);
+      cur = '';
+    } else cur += ch;
+  }
+  if (cur.trim()) out.push(cur);
+  return out;
+}

package/src/walker/image.js

@@ -262,3 +262,80 @@ export function objectFitToSize(fit) {
       return '100% 100%';
   }
 }
+
+/**
+ * `background-repeat` の computed 値を軸ごとに分ける。
+ * `repeat-x` / `repeat-y` は 2 値表記に展開する。
+ * @param {string} value
+ * @returns {['repeat'|'no-repeat'|'space'|'round', 'repeat'|'no-repeat'|'space'|'round']}
+ */
+export function splitRepeat(value) {
+  const v = (value || 'repeat').trim();
+  if (v === 'repeat-x') return ['repeat', 'no-repeat'];
+  if (v === 'repeat-y') return ['no-repeat', 'repeat'];
+  const parts = v.split(/\s+/);
+  const norm = (/** @type {string} */ s) => (s === 'repeat' || s === 'no-repeat' || s === 'space' || s === 'round' ? s : 'repeat');
+  const a = norm(/** @type {string} */ (parts[0] ?? 'repeat'));
+  const b = norm(/** @type {string} */ (parts[1] ?? parts[0] ?? 'repeat'));
+  return [a, b];
+}
+
+/**
+ * 1 軸ぶんのタイル位置を求める。
+ *
+ * - `repeat`: 指定位置を基準に、描画領域を覆うまで両方向へ並べる
+ * - `no-repeat`: 指定位置に 1 枚
+ * - `round`: 描画領域に整数個収まるようタイルの大きさを調整して並べる（大きさが変わる）
+ * - `space`: 整数個を等間隔に置き、余りを隙間に配る。1 枚しか入らないなら先頭に 1 枚
+ *
+ * @param {'repeat'|'no-repeat'|'space'|'round'} mode
+ * @param {number} start      指定位置（background-position の結果）
+ * @param {number} size       タイルの大きさ
+ * @param {number} areaStart  描画領域の開始
+ * @param {number} areaEnd    描画領域の終わり
+ * @returns {{positions: number[], size: number}}
+ */
+export function tileAxis(mode, start, size, areaStart, areaEnd) {
+  if (!(size > 0)) return { positions: [start], size };
+  const area = areaEnd - areaStart;
+  if (mode === 'no-repeat') return { positions: [start], size };
+
+  if (mode === 'round') {
+    const n = Math.max(1, Math.round(area / size));
+    const s = area / n;
+    return { positions: Array.from({ length: n }, (_, i) => areaStart + i * s), size: s };
+  }
+
+  if (mode === 'space') {
+    const n = Math.floor(area / size);
+    if (n < 2) return { positions: [areaStart], size };
+    const gap = (area - n * size) / (n - 1);
+    return { positions: Array.from({ length: n }, (_, i) => areaStart + i * (size + gap)), size };
+  }
+
+  // repeat: 指定位置から前後へ伸ばす
+  const first = start - Math.ceil((start - areaStart) / size) * size;
+  /** @type {number[]} */
+  const positions = [];
+  for (let p = first; p < areaEnd; p += size) {
+    if (p + size > areaStart) positions.push(p);
+    if (positions.length > 10000) break; // 異常な繰り返しの保険
+  }
+  return { positions: positions.length ? positions : [start], size };
+}
+
+/**
+ * 埋め込みが済んだ画像のピクセルデータを手放す。
+ * デコード結果（RGB・アルファ・JPEG のバイト列）は元画像より桁違いに大きいので、
+ * PDF に書き出したあとも抱えていると大きな文書でピーク使用量が跳ね上がる。
+ *
+ * キャッシュからも外すので、次の変換では読み直しになる（速度よりメモリを優先する）。
+ *
+ * @param {DecodedImage} img
+ */
+export function releasePixels(img) {
+  img.jpeg = null;
+  img.rgb = null;
+  img.alpha = null;
+  cache.delete(img.key);
+}

package/src/walker/svg-path.js

@@ -0,0 +1,342 @@
+// @ts-check
+/**
+ * SVG のパスデータと基本図形を、PDF に出せる形（絶対座標の M / L / C / Z）へ正規化する。
+ *
+ * 円弧（A）は 3 次ベジェへ、二次ベジェ（Q / T）も 3 次へ変換する。
+ * 座標は要素のユーザー単位のまま（変換行列は描画時に cm で適用する）。
+ */
+
+/**
+ * @typedef {['M', number, number]|['L', number, number]|['C', number, number, number, number, number, number]|['Z']} PathSeg
+ */
+
+/**
+ * `d` 属性を絶対座標の M / L / C / Z 列にする。
+ * @param {string} d
+ * @returns {PathSeg[]}
+ */
+export function parsePathData(d) {
+  /** @type {PathSeg[]} */
+  const out = [];
+  const tokens = tokenize(d);
+  let i = 0;
+  let x = 0;
+  let y = 0;
+  let startX = 0;
+  let startY = 0;
+  // 直前の制御点（S / T の反射用）
+  /** @type {[number, number]|null} */
+  let lastC = null;
+  /** @type {[number, number]|null} */
+  let lastQ = null;
+  let cmd = '';
+
+  const num = () => {
+    const t = tokens[i++];
+    return typeof t === 'number' ? t : NaN;
+  };
+  const hasNum = () => typeof tokens[i] === 'number';
+
+  while (i < tokens.length) {
+    if (typeof tokens[i] === 'string') cmd = /** @type {string} */ (tokens[i++]);
+    else if (!cmd) break; // 数値から始まる不正なデータ
+    const rel = cmd === cmd.toLowerCase();
+    const C = cmd.toUpperCase();
+    const ox = rel ? x : 0;
+    const oy = rel ? y : 0;
+
+    if (C === 'M') {
+      x = num() + ox;
+      y = num() + oy;
+      out.push(['M', x, y]);
+      startX = x;
+      startY = y;
+      lastC = lastQ = null;
+      // 続く座標対は L / l 扱い
+      cmd = rel ? 'l' : 'L';
+      continue;
+    }
+    if (C === 'Z') {
+      out.push(['Z']);
+      x = startX;
+      y = startY;
+      lastC = lastQ = null;
+      continue;
+    }
+    if (C === 'L') {
+      x = num() + ox;
+      y = num() + oy;
+      out.push(['L', x, y]);
+      lastC = lastQ = null;
+    } else if (C === 'H') {
+      x = num() + ox;
+      out.push(['L', x, y]);
+      lastC = lastQ = null;
+    } else if (C === 'V') {
+      y = num() + oy;
+      out.push(['L', x, y]);
+      lastC = lastQ = null;
+    } else if (C === 'C') {
+      const x1 = num() + ox;
+      const y1 = num() + oy;
+      const x2 = num() + ox;
+      const y2 = num() + oy;
+      x = num() + ox;
+      y = num() + oy;
+      out.push(['C', x1, y1, x2, y2, x, y]);
+      lastC = [x2, y2];
+      lastQ = null;
+    } else if (C === 'S') {
+      const rx = lastC ? 2 * x - lastC[0] : x;
+      const ry = lastC ? 2 * y - lastC[1] : y;
+      const x2 = num() + ox;
+      const y2 = num() + oy;
+      x = num() + ox;
+      y = num() + oy;
+      out.push(['C', rx, ry, x2, y2, x, y]);
+      lastC = [x2, y2];
+      lastQ = null;
+    } else if (C === 'Q' || C === 'T') {
+      let qx;
+      let qy;
+      if (C === 'Q') {
+        qx = num() + ox;
+        qy = num() + oy;
+      } else {
+        qx = lastQ ? 2 * x - lastQ[0] : x;
+        qy = lastQ ? 2 * y - lastQ[1] : y;
+      }
+      const px = num() + ox;
+      const py = num() + oy;
+      // 二次 → 三次
+      out.push(['C', x + (2 / 3) * (qx - x), y + (2 / 3) * (qy - y), px + (2 / 3) * (qx - px), py + (2 / 3) * (qy - py), px, py]);
+      x = px;
+      y = py;
+      lastQ = [qx, qy];
+      lastC = null;
+    } else if (C === 'A') {
+      const rx = num();
+      const ry = num();
+      const rot = num();
+      const large = num();
+      const sweep = num();
+      const px = num() + ox;
+      const py = num() + oy;
+      for (const seg of arcToCurves(x, y, px, py, rx, ry, rot, large !== 0, sweep !== 0)) out.push(seg);
+      x = px;
+      y = py;
+      lastC = lastQ = null;
+    } else {
+      break; // 未知のコマンド
+    }
+    if (!hasNum() && typeof tokens[i] !== 'string') break;
+  }
+  return out;
+}
+
+/**
+ * `d` を数値とコマンド文字に分解する。
+ * @param {string} d
+ * @returns {(string|number)[]}
+ */
+function tokenize(d) {
+  /** @type {(string|number)[]} */
+  const out = [];
+  const re = /([MmLlHhVvCcSsQqTtAaZz])|(-?(?:\d*\.\d+|\d+)(?:[eE][-+]?\d+)?)/g;
+  let m;
+  while ((m = re.exec(d))) {
+    if (m[1]) out.push(m[1]);
+    else out.push(parseFloat(/** @type {string} */ (m[2])));
+  }
+  return out;
+}
+
+/**
+ * 楕円円弧を 3 次ベジェ列にする（SVG 仕様 F.6 の実装）。
+ * @param {number} x1 @param {number} y1 @param {number} x2 @param {number} y2
+ * @param {number} rx @param {number} ry @param {number} rotDeg
+ * @param {boolean} large @param {boolean} sweep
+ * @returns {PathSeg[]}
+ */
+export function arcToCurves(x1, y1, x2, y2, rx, ry, rotDeg, large, sweep) {
+  if (x1 === x2 && y1 === y2) return [];
+  rx = Math.abs(rx);
+  ry = Math.abs(ry);
+  if (rx === 0 || ry === 0) return [['L', x2, y2]];
+
+  const phi = (rotDeg * Math.PI) / 180;
+  const cosP = Math.cos(phi);
+  const sinP = Math.sin(phi);
+  const dx = (x1 - x2) / 2;
+  const dy = (y1 - y2) / 2;
+  const x1p = cosP * dx + sinP * dy;
+  const y1p = -sinP * dx + cosP * dy;
+
+  // 半径が小さすぎる場合は広げる（仕様 F.6.6）
+  const lambda = (x1p * x1p) / (rx * rx) + (y1p * y1p) / (ry * ry);
+  if (lambda > 1) {
+    const s = Math.sqrt(lambda);
+    rx *= s;
+    ry *= s;
+  }
+
+  const sign = large === sweep ? -1 : 1;
+  const num = rx * rx * ry * ry - rx * rx * y1p * y1p - ry * ry * x1p * x1p;
+  const den = rx * rx * y1p * y1p + ry * ry * x1p * x1p;
+  const co = sign * Math.sqrt(Math.max(0, num / den));
+  const cxp = (co * rx * y1p) / ry;
+  const cyp = (-co * ry * x1p) / rx;
+  const cx = cosP * cxp - sinP * cyp + (x1 + x2) / 2;
+  const cy = sinP * cxp + cosP * cyp + (y1 + y2) / 2;
+
+  const angle = (/** @type {number} */ ux, /** @type {number} */ uy, /** @type {number} */ vx, /** @type {number} */ vy) => {
+    const dot = ux * vx + uy * vy;
+    const len = Math.hypot(ux, uy) * Math.hypot(vx, vy);
+    let a = Math.acos(Math.min(1, Math.max(-1, dot / (len || 1))));
+    if (ux * vy - uy * vx < 0) a = -a;
+    return a;
+  };
+  const theta1 = angle(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry);
+  let dTheta = angle((x1p - cxp) / rx, (y1p - cyp) / ry, (-x1p - cxp) / rx, (-y1p - cyp) / ry);
+  if (!sweep && dTheta > 0) dTheta -= 2 * Math.PI;
+  if (sweep && dTheta < 0) dTheta += 2 * Math.PI;
+
+  // 1 区間あたり 90 度以下になるよう分割する
+  const parts = Math.max(1, Math.ceil(Math.abs(dTheta / (Math.PI / 2))));
+  const delta = dTheta / parts;
+  const t = ((4 / 3) * Math.tan(delta / 4));
+  /** @type {PathSeg[]} */
+  const out = [];
+  let th = theta1;
+  for (let i = 0; i < parts; i++) {
+    const th2 = th + delta;
+    const cos1 = Math.cos(th);
+    const sin1 = Math.sin(th);
+    const cos2 = Math.cos(th2);
+    const sin2 = Math.sin(th2);
+    /** 楕円上の点とその接線から制御点を作る */
+    const map = (/** @type {number} */ ex, /** @type {number} */ ey) => [cosP * rx * ex - sinP * ry * ey + cx, sinP * rx * ex + cosP * ry * ey + cy];
+    const [px1, py1] = map(cos1, sin1);
+    const [px2, py2] = map(cos2, sin2);
+    const [c1x, c1y] = map(cos1 - t * sin1, sin1 + t * cos1);
+    const [c2x, c2y] = map(cos2 + t * sin2, sin2 - t * cos2);
+    void px1;
+    void py1;
+    out.push(['C', /** @type {number} */ (c1x), /** @type {number} */ (c1y), /** @type {number} */ (c2x), /** @type {number} */ (c2y), /** @type {number} */ (px2), /** @type {number} */ (py2)]);
+    th = th2;
+  }
+  return out;
+}
+
+/**
+ * 基本図形をパスにする。対応しない要素は null。
+ * @param {Element} el
+ * @param {(name: string) => string} attr  属性値（プレゼンテーション属性は computed style を優先しない純粋な幾何属性）
+ * @returns {PathSeg[]|null}
+ */
+export function shapeToPath(el, attr) {
+  const n = (/** @type {string} */ name, /** @type {number} */ dflt = 0) => {
+    const v = parseFloat(attr(name));
+    return Number.isFinite(v) ? v : dflt;
+  };
+  switch (el.tagName) {
+    case 'path': {
+      const d = attr('d');
+      return d ? parsePathData(d) : [];
+    }
+    case 'rect': {
+      const x = n('x');
+      const y = n('y');
+      const w = n('width');
+      const h = n('height');
+      if (w <= 0 || h <= 0) return [];
+      let rx = attr('rx') === '' || attr('rx') === 'auto' ? NaN : n('rx');
+      let ry = attr('ry') === '' || attr('ry') === 'auto' ? NaN : n('ry');
+      if (Number.isNaN(rx) && Number.isNaN(ry)) return rectPath(x, y, w, h);
+      if (Number.isNaN(rx)) rx = /** @type {number} */ (ry);
+      if (Number.isNaN(ry)) ry = /** @type {number} */ (rx);
+      rx = Math.min(rx, w / 2);
+      ry = Math.min(ry, h / 2);
+      if (rx <= 0 || ry <= 0) return rectPath(x, y, w, h);
+      return roundRectPath(x, y, w, h, rx, ry);
+    }
+    case 'circle': {
+      const r = n('r');
+      if (r <= 0) return [];
+      return ellipsePath(n('cx'), n('cy'), r, r);
+    }
+    case 'ellipse': {
+      const rx = n('rx');
+      const ry = n('ry');
+      if (rx <= 0 || ry <= 0) return [];
+      return ellipsePath(n('cx'), n('cy'), rx, ry);
+    }
+    case 'line':
+      return [
+        ['M', n('x1'), n('y1')],
+        ['L', n('x2'), n('y2')],
+      ];
+    case 'polyline':
+    case 'polygon': {
+      const pts = attr('points')
+        .split(/[\s,]+/)
+        .map(parseFloat)
+        .filter((v) => Number.isFinite(v));
+      if (pts.length < 4) return [];
+      /** @type {PathSeg[]} */
+      const out = [['M', /** @type {number} */ (pts[0]), /** @type {number} */ (pts[1])]];
+      for (let i = 2; i + 1 < pts.length; i += 2) out.push(['L', /** @type {number} */ (pts[i]), /** @type {number} */ (pts[i + 1])]);
+      if (el.tagName === 'polygon') out.push(['Z']);
+      return out;
+    }
+    default:
+      return null;
+  }
+}
+
+/** @returns {PathSeg[]} */
+function rectPath(/** @type {number} */ x, /** @type {number} */ y, /** @type {number} */ w, /** @type {number} */ h) {
+  return [
+    ['M', x, y],
+    ['L', x + w, y],
+    ['L', x + w, y + h],
+    ['L', x, y + h],
+    ['Z'],
+  ];
+}
+
+const K = 0.5522847498307936; // 4/3·(√2−1)
+
+/** @returns {PathSeg[]} */
+function roundRectPath(/** @type {number} */ x, /** @type {number} */ y, /** @type {number} */ w, /** @type {number} */ h, /** @type {number} */ rx, /** @type {number} */ ry) {
+  const cx = rx * K;
+  const cy = ry * K;
+  const r = x + w;
+  const b = y + h;
+  return [
+    ['M', x + rx, y],
+    ['L', r - rx, y],
+    ['C', r - rx + cx, y, r, y + ry - cy, r, y + ry],
+    ['L', r, b - ry],
+    ['C', r, b - ry + cy, r - rx + cx, b, r - rx, b],
+    ['L', x + rx, b],
+    ['C', x + rx - cx, b, x, b - ry + cy, x, b - ry],
+    ['L', x, y + ry],
+    ['C', x, y + ry - cy, x + rx - cx, y, x + rx, y],
+    ['Z'],
+  ];
+}
+
+/** @returns {PathSeg[]} */
+function ellipsePath(/** @type {number} */ cx, /** @type {number} */ cy, /** @type {number} */ rx, /** @type {number} */ ry) {
+  const ox = rx * K;
+  const oy = ry * K;
+  return [
+    ['M', cx + rx, cy],
+    ['C', cx + rx, cy + oy, cx + ox, cy + ry, cx, cy + ry],
+    ['C', cx - ox, cy + ry, cx - rx, cy + oy, cx - rx, cy],
+    ['C', cx - rx, cy - oy, cx - ox, cy - ry, cx, cy - ry],
+    ['C', cx + ox, cy - ry, cx + rx, cy - oy, cx + rx, cy],
+    ['Z'],
+  ];
+}

package/src/walker/text.js

@@ -4,6 +4,7 @@
  * Range を 1 文字ずつ張って各グリフの矩形を実測し、行ごとにグリフ列（GID・ペン位置）を返す。
  * ブラウザのカーニング・letter-spacing・禁則・両端揃えの結果がそのまま位置に反映される。
  */
+import { buildSubstitution } from '../font/gsub.js';
 
 /**
  * @typedef {object} MeasuredLine
@@ -24,6 +25,7 @@
  * @property {'normal'|'italic'} fstyle
  * @property {number} size  px
  * @property {'font'|'measure'|'auto'} textMeasure
+ * @property {string[]} features  ブラウザが有効にしている OpenType 機能タグ（GSUB の単一置換を再現する）
  * @property {(w: import('../index.js').ConversionWarning) => void} warn
  * @property {Element} element
  */
@@ -73,12 +75,37 @@ export function measureText(node, style, o) {
     }
     cur.top = Math.min(cur.top, top);
     cur.bottom = Math.max(cur.bottom, rect.bottom);
-    const advance = ((font.parsed.advances[gid] ?? 0) * o.size) / font.parsed.unitsPerEm;
-    cur.glyphs.push({ gid, cp: cpForUnicode, x: rect.left, advance });
+    // GSUB（単一置換）: ブラウザが有効にした機能と同じ置換を適用する
+    const subst = o.features.length ? substitutionFor(font.parsed, o.features) : null;
+    const outGid = subst ? subst(gid) : gid;
+    const advance = ((font.parsed.advances[outGid] ?? 0) * o.size) / font.parsed.unitsPerEm;
+    cur.glyphs.push({ gid: outGid, cp: cpForUnicode, x: rect.left, advance });
   }
   return lines;
 }
 
+/** @type {WeakMap<import('../font/parse.js').ParsedFont, Map<string, ((gid: number) => number)|null>>} */
+const substCache = new WeakMap();
+
+/**
+ * (フォント, 機能集合) ごとの置換関数。結果は null も含めてキャッシュする。
+ * @param {import('../font/parse.js').ParsedFont} parsed
+ * @param {string[]} features
+ * @returns {((gid: number) => number)|null}
+ */
+function substitutionFor(parsed, features) {
+  let byKey = substCache.get(parsed);
+  if (!byKey) {
+    byKey = new Map();
+    substCache.set(parsed, byKey);
+  }
+  const key = [...features].sort().join(',');
+  if (byKey.has(key)) return byKey.get(key) ?? null;
+  const fn = buildSubstitution(parsed, features);
+  byKey.set(key, fn);
+  return fn;
+}
+
 /**
  * 1 文字分の矩形のうち幅を持つものを選ぶ。行末の折り返し位置では 2 つ返ることがある。
  * @param {DOMRectList} rects