@cardenelabs/cdl 0.73.0 → 0.75.0

package/src/kinds/shape-finance.tsx

@@ -1,5 +1,11 @@
 import type { JSX } from "react";
-import { shapeRegion, labelPlan, fitArt } from "./shape-region";
+import {
+  shapeRegion,
+  labelPlan,
+  fitArt,
+  打ち消しの倍率,
+  type 打ち消す字,
+} from "./shape-region";
 import type { LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
 
@@ -193,7 +199,7 @@ export function ShapeBankNode({ node, active }: ShapeProps): JSX.Element {
       })}
       <path d={`M ${x - BANK_BODY_OUT} ${y + pedimentH} L ${r.cx} ${y - BANK_PEDIMENT_RISE} L ${x + bldW + BANK_BODY_OUT} ${y + pedimentH} Z`} fill="var(--cdl-node-fill, #ffffff)" stroke={frame.stroke} strokeWidth={frame.strokeWidth} strokeLinejoin="round" />
       <circle cx={r.cx} cy={y + pedimentH / 2 + 4} r={14} fill="var(--cdl-tone-accent, #2d6a8f)" stroke={frame.stroke} strokeWidth={1.5} />
-      <text x={r.cx} y={y + pedimentH / 2 + 10} fontSize={18} fontWeight={700} textAnchor="middle" fill="#ffffff" fontFamily="Georgia, serif">
+      <text data-cdl-counter-scaled="0" x={r.cx} y={y + pedimentH / 2 + 10} fontSize={18} fontWeight={700} textAnchor="middle" fill="#ffffff" fontFamily="Georgia, serif">
         $
       </text>
       <rect x={x - 4} y={y + pedimentH} width={bldW + 8} height={architraveH} fill="var(--cdl-divider, #d4d4d8)" fillOpacity={0.4} stroke={frame.stroke} strokeWidth={frame.strokeWidth} />
@@ -278,7 +284,7 @@ export function ShapeTrustBankNode({ node, active, lang }: ShapeProps): JSX.Elem
         return <rect key={i} x={r.cx - w / 2} y={y + bldH + i * BANK_STEP_DY} width={w} height={BANK_STEP_H} fill="var(--cdl-divider, #d4d4d8)" fillOpacity={0.5 + i * 0.15} stroke={frame.stroke} strokeWidth={BANK_STEP_SW} />;
       })}
       <path d={`M ${x - 6} ${y + pedimentH} L ${r.cx} ${y + 2} L ${x + bldW + 6} ${y + pedimentH} Z`} fill="var(--cdl-node-fill, #ffffff)" stroke={frame.stroke} strokeWidth={frame.strokeWidth} strokeLinejoin="round" />
-      <text x={r.cx} y={y + pedimentH - 8} fontSize={15} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="var(--cdl-tone-accent, #2d6a8f)" fontFamily="Georgia, serif">
+      <text data-cdl-counter-scaled="0" x={r.cx} y={y + pedimentH - 8} fontSize={15} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="var(--cdl-tone-accent, #2d6a8f)" fontFamily="Georgia, serif">
         {字引("trustBank.sign")}
       </text>
       <rect x={x - 4} y={y + pedimentH} width={bldW + 8} height={architraveH} fill="var(--cdl-divider, #d4d4d8)" fillOpacity={0.4} stroke={frame.stroke} strokeWidth={frame.strokeWidth} />
@@ -394,6 +400,11 @@ export function ShapeCreditCardNode({ node, active }: ShapeProps): JSX.Element {
  */
 const BROKERAGE_TICK_H = 12;
 const BROKERAGE_LOGO_H = 26;
+/** 電光掲示板の内側の帯と、そこに流れる相場の字の指定。 */
+const BROKERAGE_TICK_INNER_H = 8;
+const BROKERAGE_TICKER_SIZE = 5.5;
+/** ロゴ帯の看板の字の指定。 */
+const BROKERAGE_SIGN_SIZE = 12;
 /** 窓の格子。 上端はロゴ帯の下、 下端は基壇の上。 */
 const BROKERAGE_GRID_TOP = 62;
 const BROKERAGE_CELL_W = 14;
@@ -454,7 +465,22 @@ export function ShapeBrokerageNode({ node, active, lang }: ShapeProps): JSX.Elem
   );
   const gridStartX = x + (w - (cols * cellW + (cols - 1) * gapX)) / 2;
   const goldCells = new Set([`0,1`, `0,4`, `1,2`, `2,3`, `3,5`]); // ランダム点灯 window
-  const 絵 = (
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 相場の字は電光掲示板の内側 (幅 w - 4、高さ 8) に入る。
+   *
+   * **看板 `$ SECURITIES` は打ち消さない**。 字間 2.5 を持ち幅が字数に比例するため、言語で
+   * 字数が変われば帯を超える (#886 の記号と同じ扱い)。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    {
+      text: 字引("brokerage.ticker"),
+      size: BROKERAGE_TICKER_SIZE,
+      帯: { 幅: w - 4, 高さ: BROKERAGE_TICK_INNER_H },
+    },
+  ];
+  const 絵 = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       {/* drop shadow */}
       <ellipse cx={cx} cy={y + h + BROKERAGE_SHADOW_DY} rx={w * BROKERAGE_SHADOW_RX_RATIO} ry={BROKERAGE_SHADOW_RY} fill={frame.stroke} opacity={0.2} stroke="none" />
@@ -465,12 +491,12 @@ export function ShapeBrokerageNode({ node, active, lang }: ShapeProps): JSX.Elem
       {/* 上部電光掲示板 tick */}
       <rect x={x} y={y} width={w} height={BROKERAGE_TICK_H} fill="#0f1830" stroke="none" />
       <rect x={x + 2} y={y + 2} width={w - 4} height={8} fill="#1a2340" stroke="none" />
-      <text x={cx} y={y + 9} fontSize={5.5} fontWeight={700} textAnchor="middle" fill="#4ea36a" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
+      <text data-cdl-counter-scaled="1" x={cx} y={y + 9} fontSize={BROKERAGE_TICKER_SIZE * 倍} fontWeight={700} textAnchor="middle" fill="#4ea36a" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
         {字引("brokerage.ticker")}
       </text>
       {/* $ SECURITIES ロゴ帯 */}
       <rect x={x} y={y + BROKERAGE_TICK_H} width={w} height={BROKERAGE_LOGO_H} fill="#e5c07b" stroke="none" />
-      <text x={cx} y={y + 30} fontSize={12} fontWeight={700} letterSpacing={2.5} textAnchor="middle" fill="#0f1830">
+      <text data-cdl-counter-scaled="0" x={cx} y={y + 30} fontSize={BROKERAGE_SIGN_SIZE} fontWeight={700} letterSpacing={2.5} textAnchor="middle" fill="#0f1830">
         {字引("brokerage.sign")}
       </text>
       {/* window grid (段数は高さ次第、 列は 6 固定) */}
@@ -492,7 +518,8 @@ export function ShapeBrokerageNode({ node, active, lang }: ShapeProps): JSX.Elem
       {/* 底部床 (ATM のように狭め) */}
       <rect x={x - BROKERAGE_FLOOR_OUT} y={y + h + BROKERAGE_FLOOR_DY} width={w + BROKERAGE_FLOOR_OUT * 2} height={BROKERAGE_FLOOR_H} fill="#5a6270" stroke="none" />
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, 広がり, 絵)}
@@ -502,6 +529,9 @@ export function ShapeBrokerageNode({ node, active, lang }: ShapeProps): JSX.Elem
 }
 
 /** shape-exchange = E2-A 中央 clearing house (hexagon EXCHANGE + 放射 8 node + 双方向 tx dots) */
+/** 六角形の下に置く清算の字の指定。 */
+const EXCHANGE_SUB_SIZE = 8;
+
 export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
@@ -540,7 +570,7 @@ export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Eleme
    */
   const 節点 = Math.max(0, nodeR) + 8 + 1.5 / 2;
   const 六角 = hexR + frame.strokeWidth / 2;
-  const 字下 = 26 + 8 * 0.25;
+  const 字下 = 26 + EXCHANGE_SUB_SIZE * 0.25;
   const 外 = Math.max(節点, 六角);
   const ずれ = cy - r.cy;
   const 広がり = {
@@ -549,7 +579,19 @@ export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Eleme
     左: 外,
     右: 外,
   };
-  const 絵 = (
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 清算の字は六角形の下の空いた所に置くので、幅は絵の横幅を
+   * そのまま使える。 高さは字の下の余り (`字下`) に合わせて 14 を採る。
+   *
+   * **看板 `EXCHANGE` と記号 `⇄` は打ち消さない**。 前者は字間 2 を持ち幅が字数に比例し、
+   * 後者は六角形の中に余白を持たない。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    { text: 字引("exchange.sub"), size: EXCHANGE_SUB_SIZE, 帯: { 幅: 外 * 2, 高さ: 14 } },
+  ];
+  const 絵 = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       {/* 8 dashed radial lines */}
       {nodes.map((n, i) => (
@@ -567,17 +609,18 @@ export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Eleme
       })}
       {/* 中央 hexagon EXCHANGE (単色 #255a7a、 縦向き正六角形) */}
       <path d={hexPath} fill="#255a7a" stroke={accentDarker} strokeWidth={frame.strokeWidth} strokeLinejoin="round" />
-      <text x={cx} y={cy - 8} fontSize={10} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="#e5c07b">{字引("exchange.sign")}</text>
+      <text data-cdl-counter-scaled="0" x={cx} y={cy - 8} fontSize={10} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="#e5c07b">{字引("exchange.sign")}</text>
       {/* swap 記号 */}
-      <text data-cdl-role="node-body" x={cx} y={cy + 12} fontSize={22} fontWeight={700} textAnchor="middle" fill="#e5c07b">⇄</text>
+      <text data-cdl-counter-scaled="0" data-cdl-role="node-body" x={cx} y={cy + 12} fontSize={22} fontWeight={700} textAnchor="middle" fill="#e5c07b">⇄</text>
       {/* clearing label */}
-      <text x={cx} y={cy + 26} fontSize={8} fontWeight={700} textAnchor="middle" fill="#a4b5f2">{字引("exchange.sub")}</text>
+      <text data-cdl-counter-scaled="1" x={cx} y={cy + 26} fontSize={EXCHANGE_SUB_SIZE * 倍} fontWeight={700} textAnchor="middle" fill="#a4b5f2">{字引("exchange.sub")}</text>
       {/* 8 外周 node (buyer/seller) */}
       {nodes.map((n, i) => (
         <circle key={`n${i}`} cx={n.cx} cy={n.cy} r={8} fill={n.fill} stroke={accentDarker} strokeWidth={1.5} />
       ))}
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, 広がり, 絵)}
@@ -654,21 +697,32 @@ export function ShapeAtmNode({ node, active, lang }: ShapeProps): JSX.Element {
   // 画面と 10 キーが潰れて読めなくなる
   const 面 = Math.min(1, atmW / ATM_PANEL_W, atmH / ATM_PANEL_H);
   const 面左 = -ATM_PANEL_W / 2;
+  /*
+   * **操作面の字は打ち消さない** (#887)。 画面は高さ 52 に 3 行 (指定 10 / 8 / 10) を詰めており、
+   * 行の間隔が 12 から 14 しか無い = 指定 10 の字に対して行の間隔の 8 割を割る
+   * (12 * 0.8 / 10 = 0.96)。 打ち消すと上下の行か画面の枠に触れる。
+   *
+   * 1 行だけ除いて残りを戻す形も採らない = 画面の 3 行は 1 つのまとまりなので、`¥ 20,000` だけ
+   * 戻さないと金額が見出しより小さくなる。 鍵盤の数字 (18x10 の鍵に入る絵) と天井看板
+   * (字間 2 を持ち幅が字数に比例する) も据え置く。
+   *
+   * 縮む前から画面の字が読める大きさに届かないこと自体は別の課題 (cardene777/cdl#888)。
+   */
   const 絵 = (
     <g>
       {/* drop shadow */}
       <ellipse cx={cx} cy={y + totalH + ATM_SHADOW_DY} rx={totalW * ATM_SHADOW_RX_RATIO} ry={ATM_SHADOW_RY} fill={frame.stroke} opacity={0.15} stroke="none" />
       {/* 天井 ATM CORNER 看板 */}
       <rect x={centerX - totalW / 2} y={signY} width={totalW} height={signH} fill={accentDarker} stroke="#000" strokeWidth={ATM_SIGN_SW} />
-      <text x={centerX} y={signY + 17} fontSize={11} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="#e5c07b">{字引("atm.sign")}</text>
+      <text data-cdl-counter-scaled="0" x={centerX} y={signY + 17} fontSize={11} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="#e5c07b">{字引("atm.sign")}</text>
       {/* ATM body */}
       <rect data-cdl-role="node-body" x={atmX} y={atmY} width={atmW} height={atmH} rx={6} fill="#255a7a" stroke={accentDarker} strokeWidth={frame.strokeWidth} />
       <g transform={`translate(${centerX} ${atmY}) scale(${面})`}>
         {/* screen */}
         <rect x={面左 + 8} y={10} width={ATM_PANEL_W - 16} height={52} rx={3} fill="#0f1830" stroke="#000" strokeWidth={1.5} />
-        <text x={0} y={30} fontSize={10} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#e5c07b">お引出し</text>
-        <text x={0} y={44} fontSize={8} fontWeight={700} textAnchor="middle" fill="#a4b5f2">{字引("atm.screen")}</text>
-        <text x={0} y={56} fontSize={10} fontWeight={700} textAnchor="middle" fill="#4ea36a">¥ 20,000</text>
+        <text data-cdl-counter-scaled="0" x={0} y={30} fontSize={10} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#e5c07b">お引出し</text>
+        <text data-cdl-counter-scaled="0" x={0} y={44} fontSize={8} fontWeight={700} textAnchor="middle" fill="#a4b5f2">{字引("atm.screen")}</text>
+        <text data-cdl-counter-scaled="0" x={0} y={56} fontSize={10} fontWeight={700} textAnchor="middle" fill="#4ea36a">¥ 20,000</text>
         {/* keypad 5x2 */}
         <rect x={面左 + 8} y={68} width={ATM_PANEL_W - 16} height={42} rx={2} fill="#8b949e" stroke="#5a6270" strokeWidth={1} />
         {(() => {
@@ -688,7 +742,7 @@ export function ShapeAtmNode({ node, active, lang }: ShapeProps): JSX.Element {
             return (
               <g key={`k${i}`}>
                 <rect x={kx} y={ky} width={keyW} height={keyH} fill={k[1]} stroke="#0f1830" strokeWidth={0.8} />
-                <text x={kx + keyW / 2} y={ky + 7} fontSize={/* 決める鍵 (末尾) は 2 字あるので小さく描く。 字は言語で変わるため位置で見分ける */ i === keys.length - 1 ? 6 : 7} fontWeight={700} textAnchor="middle" fill="#ffffff">{k[0]}</text>
+                <text data-cdl-counter-scaled="0" x={kx + keyW / 2} y={ky + 7} fontSize={/* 決める鍵 (末尾) は 2 字あるので小さく描く。 字は言語で変わるため位置で見分ける */ i === keys.length - 1 ? 6 : 7} fontWeight={700} textAnchor="middle" fill="#ffffff">{k[0]}</text>
               </g>
             );
           });
@@ -696,7 +750,7 @@ export function ShapeAtmNode({ node, active, lang }: ShapeProps): JSX.Element {
         {/* card slot */}
         <rect x={面左 + 12} y={116} width={ATM_PANEL_W - 24} height={8} rx={1.5} fill="#0f1830" stroke={accentDarker} strokeWidth={1} />
         <rect x={面左 + 15} y={118} width={ATM_PANEL_W - 30} height={4} rx={0.5} fill="#e5c07b" />
-        <text x={0} y={132} fontSize={6} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#e5c07b">{字引("atm.cardSlot")}</text>
+        <text data-cdl-counter-scaled="0" x={0} y={132} fontSize={6} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#e5c07b">{字引("atm.cardSlot")}</text>
         {/* cash slot */}
         <rect x={面左 + 12} y={136} width={ATM_PANEL_W - 24} height={4} rx={1} fill="#0f1830" />
       </g>

package/src/kinds/shape-people.tsx

@@ -334,7 +334,7 @@ export function ShapeNotaryNode({ node, active }: ShapeProps): JSX.Element {
         <line x1={chestX - 14} y1={chestY + 14} x2={chestX + 14} y2={chestY + 14} stroke="#8b949e" strokeWidth={1} />
         <line x1={chestX - 14} y1={chestY + 22} x2={chestX + 8} y2={chestY + 22} stroke="#8b949e" strokeWidth={1} />
         <line x1={chestX - 14} y1={chestY + 34} x2={chestX + 2} y2={chestY + 34} stroke="#0f3450" strokeWidth={1.5} />
-        <text x={chestX + 6} y={chestY + 37} fontSize={8} fill="#0f3450" fontFamily="cursive" fontStyle="italic">
+        <text data-cdl-counter-scaled="0" x={chestX + 6} y={chestY + 37} fontSize={8} fill="#0f3450" fontFamily="cursive" fontStyle="italic">
           ✓
         </text>
         {/* 右下 印章 badge */}
@@ -342,7 +342,7 @@ export function ShapeNotaryNode({ node, active }: ShapeProps): JSX.Element {
           <g>
             <circle cx={0} cy={0} r={12} fill="#c15a4a" stroke="none" />
             <circle cx={0} cy={0} r={8} fill="none" stroke="#ffffff" strokeWidth={1.2} />
-            <text x={0} y={4} fontFamily="Georgia, serif" fontSize={10} fontWeight={700} fill="#ffffff" textAnchor="middle">
+            <text data-cdl-counter-scaled="0" x={0} y={4} fontFamily="Georgia, serif" fontSize={10} fontWeight={700} fill="#ffffff" textAnchor="middle">
               印
             </text>
           </g>
@@ -420,7 +420,7 @@ export function ShapeCustomerServiceNode({ node, active }: ShapeProps): JSX.Elem
         {collarV(cx, cy, p.strokeColor)}
         {/* 体内 24H badge */}
         <rect x={chestX - 22} y={chestY + 5} width={44} height={22} rx={11} fill="#e5c07b" stroke="#a67c00" strokeWidth={2} />
-        <text x={chestX} y={chestY + 20} fontSize={12} fontWeight={900} fill="#5a3a10" textAnchor="middle" letterSpacing={2}>
+        <text data-cdl-counter-scaled="0" x={chestX} y={chestY + 20} fontSize={12} fontWeight={900} fill="#5a3a10" textAnchor="middle" letterSpacing={2}>
           24H
         </text>
         {/* 右下 headset badge */}

package/src/kinds/shape-region.tsx

@@ -21,6 +21,8 @@
  */
 import type { JSX } from "react";
 import type { LaidNode, NodeKind } from "../types";
+import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
+import { textWidth } from "./text-width";
 
 // 既存の呼出 (検査を含む) がここから取っているため、 そのまま出し直す。
 export { textWidth } from "./text-width";
@@ -508,8 +510,98 @@ export function fitArt(
   // 書くと変換の形が 2 通りになり、 読む側が両方を扱う必要が出る (実測 = 検査の変換 parser が
   // `translate(0 1)` を読めず 8 件落ちた)。 `scale(1)` は無害なので形を 1 つに保つ
   return (
-    <g transform={`translate(${dx} ${dy}) scale(${s})`}>
+    /*
+     * 包みに印を付ける (#886)。 **`scale(` を持つ変換は他にもある** = `event` は目立たせる
+     * ための脈動を `scale(0.78)` から `scale(1)` で描き、絵を箱に収める縮小ではない。
+     * 祖先の変換を正規表現で見る形だと、その脈動まで「絵の縮小」 として数える。
+     */
+    <g data-cdl-art-fit="1" transform={`translate(${dx} ${dy}) scale(${s})`}>
       {組む(s)}
     </g>
   );
 }
+
+/**
+ * 打ち消しを掛ける字 1 つ (#886)。
+ *
+ * `帯` はその字が座る場所の広さ (絵の座標)。 行なら行の間隔と行の内側の幅、
+ * 見出しなら見出しの帯の高さと、見出しが使える幅。
+ *
+ * **絵が自分の定数から渡す**。 表に書き写すと、絵の寸法を変えた日に片方だけ古くなる
+ * (`ArtExtent` と同じ考え方)。
+ */
+export type 打ち消す字 = {
+  /** 描く字。 幅の上限を出すのに使う */
+  text: string;
+  /** 打ち消す前の指定 */
+  size: number;
+  /** 字間。 渡さない呼び方は 0 */
+  letterSpacing?: number;
+  /** その字が座る場所の広さ */
+  帯: { 幅: number; 高さ: number };
+};
+
+/**
+ * 打ち消した字が帯の高さのどこまでを占めてよいか。 超えると隣の行や帯の縁に触れる。
+ *
+ * **高さにだけ掛ける**。 帯の高さは行の間隔 = 次の行までの距離なので、字がそのまま使うと
+ * 上下が触れる。 帯の幅は絵が余白を引いた内側の幅を渡すので、そのまま使ってよい
+ * (8 割で止めると、字を切る予算より狭い所で打ち消しが止まって 2 割を捨てる)。
+ */
+const 帯の高さに対する上限 = 0.8;
+
+/**
+ * 絵の中の字の幅。 **実物以上に出る側へ倒す**。
+ *
+ * 等幅の字送りで数えた値と、字形から数えた値の大きい方を採る = 下回ると
+ * 「収まっていない物を収まっていると判定」 する向きに外れる (`row-align.ts` の
+ * `rowColumnWidth` と同じ考え方)。
+ */
+export function 絵の中の字の幅(text: string, size: number, letterSpacing = 0): number {
+  return Math.max(
+    displayWidth(text) * size * MONO_ADVANCE_RATIO,
+    textWidth(text, size, letterSpacing),
+  );
+}
+
+/**
+ * 縮んだ分を字の指定で打ち消す倍率 (#871 で連鎖の箱に入れ、#886 で共通化した)。
+ *
+ * 入れ子の絵は決まった大きさで組んでから `fitArt` が箱に収まる倍率で丸ごと縮めるため、
+ * 字も一緒に縮む (実測 = 指定 10.5 が倍率 0.719 の図で 7.55)。 字の指定にこの倍率を掛けると
+ * 画面に出る大きさが指定へ戻る。
+ *
+ * ## 上限は絵の中の帯から出す
+ *
+ * 固定値にすると、絵の寸法を変えた日に効き方だけが変わる。
+ * **幅と高さの両方から出して小さい方を採る** (#886) = 高さだけで止めると、中央揃えの看板の
+ * ように幅が字数に比例して伸びる字が横へ出る。
+ *
+ * ## 帯に収まっていない字では打ち消さない
+ *
+ * 上限が 1 を下回る字がある絵では 1 を返す (実測 = 判子の中の `印` は半径 8 の丸に収まる
+ * 四角の 1 辺 11.3 を指定 10 の 1 字でほぼ使い切っており、幅から出る上限は 1 を下回る)。
+ * 打ち消す側に倒すと、その字が確実に入れ物から出る。
+ *
+ * ## 測れる字が 1 つも無い時も打ち消さない
+ *
+ * 帯の値が有限の正の値でない絵は、収まるかの判定ができない。
+ * `fitArt` が判定できない入力で手を触れないのと同じ向きに倒す。
+ */
+export function 打ち消しの倍率(倍率: number, 字ら: readonly 打ち消す字[]): number {
+  const 戻し = Number.isFinite(倍率) && 倍率 > 0 ? 1 / 倍率 : 1;
+  let 上限 = Number.POSITIVE_INFINITY;
+  for (const 字 of 字ら) {
+    if (!(Number.isFinite(字.size) && 字.size > 0)) continue;
+    const { 幅, 高さ } = 字.帯;
+    if (Number.isFinite(高さ) && 高さ > 0) {
+      上限 = Math.min(上限, (高さ * 帯の高さに対する上限) / 字.size);
+    }
+    const 実幅 = 絵の中の字の幅(字.text, 字.size, 字.letterSpacing ?? 0);
+    if (Number.isFinite(幅) && 幅 > 0 && 実幅 > 0) {
+      上限 = Math.min(上限, 幅 / 実幅);
+    }
+  }
+  if (!Number.isFinite(上限)) return 1;
+  return Math.max(1, Math.min(戻し, 上限));
+}