modern-text 2.0.9 → 2.1.1

package/dist/shared/{modern-text.CKFvdNej.cjs → modern-text.BAnUZM0U.cjs}

@@ -3,7 +3,7 @@
 const modernFont = require('modern-font');
 const modernIdoc = require('modern-idoc');
 const modernPath2d = require('modern-path2d');
-const deformation = require('./modern-text.DQWdaYoZ.cjs');
+const deformation = require('./modern-text._10DVHum.cjs');
 
 function createSvgLoader() {
   const loaded = /* @__PURE__ */ new Map();
@@ -147,15 +147,21 @@ class Canvas2DRenderer {
     this.context = context;
   }
   pixelRatio = window?.devicePixelRatio || 1;
+  // 子区域（平铺）渲染：只把 boundingBox 内相对偏移 (x,y)、尺寸 (width,height) 的一块
+  // 画到画布上（其余字形被画布边界裁掉）。用于超大文字按 GPU 上限分块栅格。不设则画整段。
+  region;
   _setupView = () => {
     const pixelRatio = this.pixelRatio;
     const ctx = this.context;
-    const { left, top, width, height } = this.text.boundingBox;
+    const bb = this.text.boundingBox;
+    const region = this.region;
+    const left = bb.left + (region?.x ?? 0);
+    const top = bb.top + (region?.y ?? 0);
+    const canvasWidth = region?.width ?? bb.width;
+    const canvasHeight = region?.height ?? bb.height;
     const view = ctx.canvas;
-    view.dataset.viewBox = String(`${left} ${top} ${width} ${height}`);
+    view.dataset.viewBox = String(`${left} ${top} ${canvasWidth} ${canvasHeight}`);
     view.dataset.pixelRatio = String(pixelRatio);
-    const canvasWidth = width;
-    const canvasHeight = height;
     view.width = Math.max(1, Math.ceil(canvasWidth * pixelRatio));
     view.height = Math.max(1, Math.ceil(canvasHeight * pixelRatio));
     view.style.width = `${canvasWidth}px`;
@@ -433,47 +439,196 @@ const fontWeightMap = {
   800: 0.4,
   900: 0.5
 };
+const GLYPH_CACHE_CAP = 4096;
+const glyphCache = /* @__PURE__ */ new Map();
+function glyphCacheSet(key, tmpl) {
+  glyphCache.set(key, tmpl);
+  if (glyphCache.size > GLYPH_CACHE_CAP) {
+    glyphCache.delete(glyphCache.keys().next().value);
+  }
+}
+let _sfntIdCounter = 0;
+const _sfntIds = /* @__PURE__ */ new WeakMap();
+function sfntId(sfnt) {
+  let id = _sfntIds.get(sfnt);
+  if (id === void 0) {
+    id = ++_sfntIdCounter;
+    _sfntIds.set(sfnt, id);
+  }
+  return id;
+}
+const FONT_METRICS_CAP = 256;
+const fontMetricsCache = /* @__PURE__ */ new Map();
+function getFontMetrics(sfnt, fontSize) {
+  const key = `${sfntId(sfnt)}|${fontSize}`;
+  const cached = fontMetricsCache.get(key);
+  if (cached) {
+    return cached;
+  }
+  const { hhea, os2, post, head } = sfnt;
+  const unitsPerEm = head.unitsPerEm;
+  const ascender = hhea.ascent;
+  const descender = hhea.descent;
+  const rate = unitsPerEm / fontSize;
+  const advanceHeight = (ascender + Math.abs(descender)) / rate;
+  const baseline = ascender / rate;
+  const m = {
+    sfnt,
+    unitsPerEm,
+    advanceHeight,
+    baseline,
+    ascender: ascender / rate,
+    descender: descender / rate,
+    underlinePosition: (ascender - post.underlinePosition) / rate,
+    underlineThickness: post.underlineThickness / rate,
+    strikeoutPosition: (ascender - os2.yStrikeoutPosition) / rate,
+    strikeoutSize: os2.yStrikeoutSize / rate,
+    typoAscender: os2.sTypoAscender / rate,
+    typoDescender: os2.sTypoDescender / rate,
+    typoLineGap: os2.sTypoLineGap / rate,
+    winAscent: os2.usWinAscent / rate,
+    winDescent: os2.usWinDescent / rate,
+    xHeight: os2.version > 1 ? os2.sxHeight / rate : 0,
+    capHeight: os2.version > 1 ? os2.sCapHeight / rate : 0,
+    centerDiviation: advanceHeight / 2 - baseline,
+    fontStyle: fsSelectionMap[os2.fsSelection] ?? macStyleMap[head.macStyle]
+  };
+  if (fontMetricsCache.size >= FONT_METRICS_CAP) {
+    fontMetricsCache.delete(fontMetricsCache.keys().next().value);
+  }
+  fontMetricsCache.set(key, m);
+  return m;
+}
 class Character {
   constructor(content, index, parent) {
     this.content = content;
     this.index = index;
     this.parent = parent;
   }
-  path = new modernPath2d.Path2D().setMeta(this);
-  lineBox = new modernPath2d.BoundingBox();
+  // 惰性 path：布局阶段（measure）只算度量 + glyphBox，不构造逐字定位 path
+  // （3681 字逐字 clone+平移占 Text.update 主成本）。path 仅在真正渲染/命中时才按需构建。
+  _path;
+  _lazyPath;
+  get path() {
+    if (this._path) {
+      return this._path;
+    }
+    const lazy = this._lazyPath;
+    if (lazy) {
+      const { x, y } = lazy;
+      const p = lazy.tmpl.path.clone().setMeta(this);
+      p.applyTransform((pt) => {
+        pt.x += x;
+        pt.y += y;
+      });
+      p.style = lazy.style;
+      this._path = p;
+      this._lazyPath = void 0;
+      return p;
+    }
+    const empty = new modernPath2d.Path2D().setMeta(this);
+    this._path = empty;
+    return empty;
+  }
+  set path(value) {
+    this._path = value;
+    this._lazyPath = void 0;
+  }
   inlineBox = new modernPath2d.BoundingBox();
+  // lineBox（行高/列厚那条 strip）完全由 inlineBox + fontHeight 推出，不再逐字存一个 BoundingBox。
+  // 横排：与 inlineBox 同列、在内容盒上下居中、高=fontHeight；竖排：inline/block 轴交换。
+  get lineBox() {
+    const ib = this.inlineBox;
+    const fh = this.fontHeight;
+    return this.isVertical ? new modernPath2d.BoundingBox(ib.left + (ib.width - fh) / 2, ib.top, fh, ib.height) : new modernPath2d.BoundingBox(ib.left, ib.top + (ib.height - fh) / 2, ib.width, fh);
+  }
   glyphBox;
   advanceWidth = 0;
-  advanceHeight = 0;
-  underlinePosition = 0;
-  underlineThickness = 0;
-  strikeoutPosition = 0;
-  strikeoutSize = 0;
-  ascender = 0;
-  descender = 0;
-  typoAscender = 0;
-  typoDescender = 0;
-  typoLineGap = 0;
-  winAscent = 0;
-  winDescent = 0;
-  xHeight = 0;
-  capHeight = 0;
-  baseline = 0;
-  centerDiviation = 0;
-  fontStyle;
+  // 字偶距（kerning）：与「行内逻辑前一字符」之间的水平调整（px，通常为负=拉近）。
+  // 由 Measurer._applyKerning 在横排测量时按字形对填充；行首/换字体/竖排时为 0。
+  // 断行与定位都计入它，使纯/混排拉丁文本的行宽、换行点与浏览器渲染一致。
+  kerningBefore = 0;
+  // 本字符首字形在其 sfnt 内的索引（逐字），供相邻字符查字偶距。
+  _glyphIndex;
+  // 字体度量 flyweight（按 (sfnt,fontSize) 共享）；下面所有度量 getter 都从这里推导，不逐字存。
+  _metrics;
+  // 度量 getter —— 零实例存储，从共享 _metrics 推导（advanceWidth 是唯一逐字存的度量）。
+  get advanceHeight() {
+    return this._metrics?.advanceHeight ?? 0;
+  }
+  get baseline() {
+    return this._metrics?.baseline ?? 0;
+  }
+  get ascender() {
+    return this._metrics?.ascender ?? 0;
+  }
+  get descender() {
+    return this._metrics?.descender ?? 0;
+  }
+  get underlinePosition() {
+    return this._metrics?.underlinePosition ?? 0;
+  }
+  get underlineThickness() {
+    return this._metrics?.underlineThickness ?? 0;
+  }
+  get strikeoutPosition() {
+    return this._metrics?.strikeoutPosition ?? 0;
+  }
+  get strikeoutSize() {
+    return this._metrics?.strikeoutSize ?? 0;
+  }
+  get typoAscender() {
+    return this._metrics?.typoAscender ?? 0;
+  }
+  get typoDescender() {
+    return this._metrics?.typoDescender ?? 0;
+  }
+  get typoLineGap() {
+    return this._metrics?.typoLineGap ?? 0;
+  }
+  get winAscent() {
+    return this._metrics?.winAscent ?? 0;
+  }
+  get winDescent() {
+    return this._metrics?.winDescent ?? 0;
+  }
+  get xHeight() {
+    return this._metrics?.xHeight ?? 0;
+  }
+  get capHeight() {
+    return this._metrics?.capHeight ?? 0;
+  }
+  get centerDiviation() {
+    return this._metrics?.centerDiviation ?? 0;
+  }
+  get fontStyle() {
+    return this._metrics?.fontStyle;
+  }
+  // 增量布局：把已测量的字形整体沿 y 平移 dy（用于未变段落因前序段落高度变化而下移）。
+  // 同步移动所有盒（inline/line/glyph）与 path（惰性偏移或已构建几何），保持与全量重排一致。
+  translateY(dy) {
+    if (!dy) {
+      return;
+    }
+    this.inlineBox.top += dy;
+    if (this.glyphBox) {
+      this.glyphBox.top += dy;
+    }
+    if (this._lazyPath) {
+      this._lazyPath.y += dy;
+    } else if (this._path) {
+      this._path.applyTransform((p) => {
+        p.y += dy;
+      });
+    }
+  }
   get compatibleGlyphBox() {
+    if (this.glyphBox) {
+      return this.glyphBox;
+    }
     const size = this.computedStyle.fontSize * 0.8;
-    return this.glyphBox ?? (this.isVertical ? new modernPath2d.BoundingBox(
-      this.lineBox.left + this.lineBox.width / 2 - size / 2,
-      this.lineBox.top,
-      size,
-      this.lineBox.height
-    ) : new modernPath2d.BoundingBox(
-      this.lineBox.left,
-      this.lineBox.top + this.lineBox.height / 2 - size / 2,
-      this.lineBox.width,
-      size
-    ));
+    const lb = this.lineBox;
+    return this.isVertical ? new modernPath2d.BoundingBox(lb.left + lb.width / 2 - size / 2, lb.top, size, lb.height) : new modernPath2d.BoundingBox(lb.left, lb.top + lb.height / 2 - size / 2, lb.width, size);
   }
   get center() {
     return this.compatibleGlyphBox.center;
@@ -510,44 +665,30 @@ class Character {
     if (!sfnt) {
       return this;
     }
-    const { hhea, os2, post, head } = sfnt;
-    const unitsPerEm = head.unitsPerEm;
-    const ascender = hhea.ascent;
-    const descender = hhea.descent;
     const { content, computedStyle } = this;
-    const { fontSize } = computedStyle;
-    const rate = unitsPerEm / fontSize;
-    const advanceWidth = sfnt.getAdvanceWidth(content, fontSize);
-    const advanceHeight = (ascender + Math.abs(descender)) / rate;
-    const baseline = ascender / rate;
-    this.advanceWidth = advanceWidth;
-    this.advanceHeight = advanceHeight;
-    this.underlinePosition = (ascender - post.underlinePosition) / rate;
-    this.underlineThickness = post.underlineThickness / rate;
-    this.strikeoutPosition = (ascender - os2.yStrikeoutPosition) / rate;
-    this.strikeoutSize = os2.yStrikeoutSize / rate;
-    this.ascender = ascender / rate;
-    this.descender = descender / rate;
-    this.typoAscender = os2.sTypoAscender / rate;
-    this.typoDescender = os2.sTypoDescender / rate;
-    this.typoLineGap = os2.sTypoLineGap / rate;
-    this.winAscent = os2.usWinAscent / rate;
-    this.winDescent = os2.usWinDescent / rate;
-    this.xHeight = os2.version > 1 ? os2.sxHeight / rate : 0;
-    this.capHeight = os2.version > 1 ? os2.sCapHeight / rate : 0;
-    this.baseline = baseline;
-    this.centerDiviation = advanceHeight / 2 - baseline;
-    this.fontStyle = fsSelectionMap[os2.fsSelection] ?? macStyleMap[head.macStyle];
+    const fontSize = computedStyle.fontSize;
+    this._metrics = getFontMetrics(sfnt, fontSize);
+    this.advanceWidth = sfnt.getAdvanceWidth(content, fontSize);
+    this._glyphIndex = sfnt.textToGlyphIndexes(content)[0];
     return this;
   }
+  // 与逻辑前一字符 prev 之间的字偶距（px）。仅当同一 sfnt（同字体、非缺字回退分叉）
+  // 且两侧字形索引均有效时返回非零；否则 0。kerning value 为 font units，按本字符字号转 px。
+  computeKerningBefore(prev) {
+    const m = this._metrics;
+    if (!prev || !m || prev._metrics?.sfnt !== m.sfnt || prev._glyphIndex === void 0 || this._glyphIndex === void 0) {
+      return 0;
+    }
+    const kv = m.sfnt.getKerningValue(prev._glyphIndex, this._glyphIndex);
+    return kv ? kv * this.computedStyle.fontSize / m.unitsPerEm : 0;
+  }
   /**
    * Populate glyph metrics only (advance width/height, ascender/descender,
    * baseline, …) without building the glyph `path` or touching boxes.
    *
-   * The DOM {@link DomMeasurer} never needs this — it reads positions back from the
-   * browser. A pure-JS measurer (e.g. `FontMeasurer`) must know advances *before*
-   * it can place characters, so it calls this ahead of layout. `update()` later
-   * recomputes the same metrics while building the path, so this is idempotent.
+   * The pure-JS `Measurer` must know advances *before* it can place characters,
+   * so it calls this ahead of layout. `update()` later recomputes the same metrics
+   * while building the path, so this is idempotent.
    */
   measureGlyph(fonts) {
     return this.updateGlyph(this._getFontSFNT(fonts));
@@ -558,10 +699,15 @@ class Character {
       return this;
     }
     this.updateGlyph(sfnt);
+    const style = this.computedStyle;
+    const needsItalic = style.fontStyle === "italic" && this.fontStyle !== "italic";
+    if (!this.isVertical && !needsItalic && !style.textStrokeWidth) {
+      this._updateFromCache(sfnt, style);
+      return this;
+    }
     const {
       isVertical,
       content,
-      computedStyle: style,
       baseline,
       inlineBox,
       ascender,
@@ -572,7 +718,6 @@ class Character {
       advanceHeight
     } = this;
     const { left, top } = inlineBox;
-    const needsItalic = style.fontStyle === "italic" && fontStyle !== "italic";
     let x = left;
     let y = top + baseline;
     let glyphIndex;
@@ -642,6 +787,39 @@ class Character {
     this.glyphBox = this.getGlyphBoundingBox();
     return this;
   }
+  // 横排非合成斜体的快路径：用字形模板缓存构建 path 与 glyphBox。
+  _updateFromCache(sfnt, style) {
+    const content = this.content;
+    const fontSize = style.fontSize;
+    const x = this.inlineBox.left;
+    const y = this.inlineBox.top + this.baseline;
+    const fontWeight = style.fontWeight ?? 400;
+    const boldAmount = fontWeight in fontWeightMap && (fontWeight === 700 || fontWeight === "bold") && this.fontStyle !== "bold" ? fontWeightMap[fontWeight] * fontSize * 0.05 : 0;
+    const key = `${content}|${sfntId(sfnt)}|${fontSize}|${boldAmount}`;
+    let tmpl = glyphCache.get(key);
+    if (!tmpl) {
+      const tpath = new modernPath2d.Path2D();
+      tpath.addCommands(sfnt.getPathCommands(content, 0, 0, fontSize));
+      if (boldAmount) {
+        tpath.bold(boldAmount);
+      }
+      let glyphBox;
+      if (tpath.curves[0]?.curves.length) {
+        const { min, max } = tpath.getMinMax(void 0, void 0, true);
+        glyphBox = new modernPath2d.BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+      }
+      tmpl = { path: tpath, glyphBox };
+      glyphCacheSet(key, tmpl);
+    }
+    this._path = void 0;
+    this._lazyPath = {
+      tmpl,
+      x,
+      y,
+      style: modernIdoc.clearUndef({ fill: style.color, fillRule: "nonzero" })
+    };
+    this.glyphBox = tmpl.glyphBox ? new modernPath2d.BoundingBox(tmpl.glyphBox.left + x, tmpl.glyphBox.top + y, tmpl.glyphBox.width, tmpl.glyphBox.height) : void 0;
+  }
   _italic(path, startPoint) {
     path.skew(-0.24, 0, startPoint || {
       y: this.inlineBox.top + this.baseline,
@@ -649,6 +827,19 @@ class Character {
     });
   }
   getGlyphMinMax(min, max, withStyle) {
+    if (this._path === void 0 && this._lazyPath !== void 0) {
+      const gb = this.glyphBox;
+      if (!gb) {
+        return void 0;
+      }
+      const tl = new modernPath2d.Vector2(gb.left, gb.top);
+      const br = new modernPath2d.Vector2(gb.left + gb.width, gb.top + gb.height);
+      const rMin = min ?? new modernPath2d.Vector2(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
+      const rMax = max ?? new modernPath2d.Vector2(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
+      rMin.clampMin(tl, br);
+      rMax.clampMax(tl, br);
+      return { min: rMin, max: rMax };
+    }
     if (this.path.curves[0]?.curves.length) {
       return this.path.getMinMax(min, max, withStyle);
     } else {
@@ -713,6 +904,18 @@ class Paragraph {
   fragments = [];
   fill;
   outline;
+  // 增量布局缓存（见 Text._update / Measurer）：
+  // _layoutDirty=true 时须全量重排该段；为 false（复用未变段）时，measurer 仅按 dy 平移。
+  // _layoutTop/_layoutHeight/_layoutRight 记录上次测量的绝对 y 顶/高/右，供平移与并集复用。
+  // _glyphBox 缓存该段字形包围盒（绝对坐标），平移时随段一起移，免去逐字 union。
+  _layoutDirty = true;
+  _layoutTop = 0;
+  _layoutHeight = 0;
+  _layoutRight = 0;
+  _glyphBox;
+  // 本段是否「有效测量」：含字符却所有字形 advance 为 0（字体未就绪时的退化测量）则为 false，
+  // 不可作为增量复用基准，须下次重测，避免把字体就绪前的零宽布局固化。
+  _layoutValid = false;
   update() {
     this.computedStyle = {
       ...modernIdoc.clearUndef(this.parent.computedStyle),
@@ -726,381 +929,25 @@ class Paragraph {
   }
 }
 
-let sharedContainer;
-function getSharedContainer() {
-  if (sharedContainer?.isConnected) {
-    return sharedContainer;
-  }
-  const container = document.createElement("div");
-  container.dataset.modernText = "measurer";
-  Object.assign(container.style, {
-    position: "fixed",
-    left: "0",
-    top: "0",
-    visibility: "hidden",
-    pointerEvents: "none"
-  });
-  document.body.appendChild(container);
-  sharedContainer = container;
-  return container;
-}
-class DomMeasurer {
-  static notZeroStyles = /* @__PURE__ */ new Set([
-    "width",
-    "height"
-  ]);
-  static pxStyles = /* @__PURE__ */ new Set([
-    "width",
-    "height",
-    "fontSize",
-    "letterSpacing",
-    "textStrokeWidth",
-    "textIndent",
-    "shadowOffsetX",
-    "shadowOffsetY",
-    "shadowBlur",
-    "margin",
-    "marginLeft",
-    "marginTop",
-    "marginRight",
-    "marginBottom",
-    "padding",
-    "paddingLeft",
-    "paddingTop",
-    "paddingRight",
-    "paddingBottom"
-  ]);
-  _styleCache = /* @__PURE__ */ new WeakMap();
-  _mountedDom;
-  _mountedSignature;
-  _toDomStyle(style) {
-    const cached = this._styleCache.get(style);
-    if (cached) {
-      return cached;
-    }
-    const domStyle = {};
-    const { notZeroStyles, pxStyles } = DomMeasurer;
-    for (const key in style) {
-      const value = style[key];
-      if (notZeroStyles.has(key) && value === 0) {
-        continue;
-      }
-      domStyle[key] = typeof value === "number" && pxStyles.has(key) ? `${value}px` : value;
-    }
-    this._styleCache.set(style, domStyle);
-    return domStyle;
-  }
-  _resolveRootStyles(rootStyle) {
-    const style = { ...rootStyle };
-    const isHorizontal = rootStyle.writingMode.includes("horizontal");
-    switch (rootStyle.textAlign) {
-      case "start":
-      case "left":
-        style.justifyContent = "flex-start";
-        break;
-      case "center":
-        style.justifyContent = "center";
-        break;
-      case "end":
-      case "right":
-        style.justifyContent = "flex-end";
-        break;
-    }
-    switch (rootStyle.verticalAlign) {
-      case "top":
-        style.alignItems = "flex-start";
-        break;
-      case "middle":
-        style.alignItems = "center";
-        break;
-      case "bottom":
-        style.alignItems = "flex-end";
-        break;
-    }
-    const isFlex = Boolean(style.justifyContent || style.alignItems);
-    return {
-      section: {
-        ...this._toDomStyle({
-          ...style,
-          boxSizing: style.boxSizing ?? "border-box",
-          display: style.display ?? (isFlex ? "inline-flex" : void 0),
-          width: style.width ?? "max-content",
-          height: style.height ?? "max-content"
-        }),
-        whiteSpace: "pre-wrap",
-        wordBreak: "break-all"
-      },
-      ul: {
-        verticalAlign: "inherit",
-        listStyleType: "inherit",
-        padding: "0",
-        margin: "0",
-        width: isFlex && isHorizontal ? "100%" : void 0,
-        height: isFlex && !isHorizontal ? "100%" : void 0
-      }
-    };
-  }
-  _applyRootStyle(section, ul, rootStyle) {
-    const styles = this._resolveRootStyles(rootStyle);
-    section.removeAttribute("style");
-    Object.assign(section.style, styles.section);
-    ul.removeAttribute("style");
-    Object.assign(ul.style, styles.ul);
-  }
-  _applyLiStyle(li, paragraph) {
-    li.removeAttribute("style");
-    li.style.verticalAlign = "inherit";
-    Object.assign(li.style, this._toDomStyle(paragraph.style));
-  }
-  _applySpanStyle(span, fragment) {
-    span.removeAttribute("style");
-    span.style.verticalAlign = "inherit";
-    Object.assign(span.style, this._toDomStyle(fragment.style));
-  }
-  _applyFragmentContent(span, fragment) {
-    const textNode = span.firstChild;
-    if (textNode) {
-      if (textNode.data !== fragment.content) {
-        textNode.data = fragment.content;
-      }
-    } else {
-      span.appendChild(document.createTextNode(fragment.content));
-    }
-  }
-  _hide(element) {
-    element.style.visibility = "hidden";
-  }
-  _signature(paragraphs) {
-    let sig = `${paragraphs.length}`;
-    for (let i = 0; i < paragraphs.length; i++) {
-      sig += `:${paragraphs[i].fragments.length}`;
-    }
-    return sig;
-  }
-  /**
-   * <section style="...">
-   *   <ul>
-   *     <li style="...">
-   *       <span style="...">...</span>
-   *       <span>...</span>
-   *     </li>
-   *   </ul>
-   * </section>
-   */
-  createDom(paragraphs, rootStyle) {
-    const section = document.createElement("section");
-    const ul = document.createElement("ul");
-    this._applyRootStyle(section, ul, rootStyle);
-    paragraphs.forEach((paragraph) => {
-      const li = document.createElement("li");
-      this._applyLiStyle(li, paragraph);
-      paragraph.fragments.forEach((fragment) => {
-        const span = document.createElement("span");
-        this._applySpanStyle(span, fragment);
-        this._applyFragmentContent(span, fragment);
-        li.appendChild(span);
-      });
-      ul.appendChild(li);
-    });
-    section.appendChild(ul);
-    return section;
-  }
-  _patchDom(dom, paragraphs, rootStyle, hidden) {
-    const ul = dom.firstChild;
-    this._applyRootStyle(dom, ul, rootStyle);
-    if (hidden) {
-      this._hide(dom);
-    }
-    const lis = ul.children;
-    for (let i = 0; i < paragraphs.length; i++) {
-      const li = lis[i];
-      this._applyLiStyle(li, paragraphs[i]);
-      const fragments = paragraphs[i].fragments;
-      const spans = li.children;
-      for (let j = 0; j < fragments.length; j++) {
-        const span = spans[j];
-        this._applySpanStyle(span, fragments[j]);
-        this._applyFragmentContent(span, fragments[j]);
-      }
-    }
-  }
-  measureDomText(text) {
-    const data = text.data ?? "";
-    const results = [];
-    if (!data.length) {
-      return results;
-    }
-    const range = document.createRange();
-    let i = 0;
-    while (i < data.length) {
-      const cp = data.codePointAt(i);
-      const end = i + (cp > 65535 ? 2 : 1);
-      range.setStart(text, i);
-      range.setEnd(text, end);
-      const rects = range.getClientRects?.();
-      let rect;
-      if (rects && rects.length) {
-        rect = rects[rects.length - 1];
-        if (rects.length > 1 && rect.width < 2) {
-          rect = rects[rects.length - 2];
-        }
-      } else {
-        rect = range.getBoundingClientRect();
-      }
-      if (rect && rect.width + rect.height !== 0) {
-        results.push({
-          content: data.slice(i, end),
-          top: rect.top,
-          left: rect.left,
-          width: rect.width,
-          height: rect.height
-        });
-      }
-      i = end;
-    }
-    return results;
-  }
-  measureDom(dom) {
-    const paragraphs = [];
-    const fragments = [];
-    const characters = [];
-    dom.querySelectorAll("li").forEach((pDom, paragraphIndex) => {
-      const pBox = pDom.getBoundingClientRect();
-      paragraphs.push({
-        paragraphIndex,
-        left: pBox.x,
-        top: pBox.y,
-        width: pBox.width,
-        height: pBox.height
-      });
-      pDom.querySelectorAll(":scope > *").forEach((fDom, fragmentIndex) => {
-        const fBox = fDom.getBoundingClientRect();
-        fragments.push({
-          paragraphIndex,
-          fragmentIndex,
-          left: fBox.x,
-          top: fBox.y,
-          width: fBox.width,
-          height: fBox.height
-        });
-        let characterIndex = 0;
-        const pushChars = (textNode) => {
-          this.measureDomText(textNode).forEach((char) => {
-            characters.push({
-              ...char,
-              newParagraphIndex: -1,
-              paragraphIndex,
-              fragmentIndex,
-              characterIndex: characterIndex++,
-              textWidth: -1,
-              textHeight: -1
-            });
-          });
-        };
-        if (!fDom.children.length && fDom.firstChild instanceof window.Text) {
-          pushChars(fDom.firstChild);
-        } else {
-          fDom.querySelectorAll(":scope > *").forEach((cDom) => {
-            if (cDom.firstChild instanceof window.Text) {
-              pushChars(cDom.firstChild);
-            }
-          });
-        }
-      });
-    });
-    return { paragraphs, fragments, characters };
-  }
-  measureParagraphDom(paragraphs, dom) {
-    const rect = dom.getBoundingClientRect();
-    const measured = this.measureDom(dom);
-    measured.paragraphs.forEach((p) => {
-      const box = paragraphs[p.paragraphIndex].lineBox;
-      box.left = p.left - rect.left;
-      box.top = p.top - rect.top;
-      box.width = p.width;
-      box.height = p.height;
-    });
-    measured.fragments.forEach((f) => {
-      const box = paragraphs[f.paragraphIndex].fragments[f.fragmentIndex].inlineBox;
-      box.left = f.left - rect.left;
-      box.top = f.top - rect.top;
-      box.width = f.width;
-      box.height = f.height;
-    });
-    const results = [];
-    measured.characters.forEach((character) => {
-      const { paragraphIndex, fragmentIndex, characterIndex } = character;
-      const left = character.left - rect.left;
-      const top = character.top - rect.top;
-      results.push({
-        ...character,
-        newParagraphIndex: paragraphIndex,
-        left,
-        top
-      });
-      const item = paragraphs[paragraphIndex].fragments[fragmentIndex].characters[characterIndex];
-      const { fontHeight, isVertical, inlineBox, lineBox } = item;
-      inlineBox.left = left;
-      inlineBox.top = top;
-      inlineBox.width = character.width;
-      inlineBox.height = character.height;
-      if (isVertical) {
-        lineBox.left = left + (character.width - fontHeight) / 2;
-        lineBox.top = top;
-        lineBox.width = fontHeight;
-        lineBox.height = character.height;
-      } else {
-        lineBox.left = left;
-        lineBox.top = top + (character.height - fontHeight) / 2;
-        lineBox.width = character.width;
-        lineBox.height = fontHeight;
-      }
-    });
-    return {
-      paragraphs,
-      boundingBox: new modernPath2d.BoundingBox(0, 0, rect.width, rect.height)
-    };
-  }
-  measure(paragraphs, rootStyle, dom) {
-    return this.measureParagraphDom(paragraphs, dom ?? this._mount(paragraphs, rootStyle));
-  }
-  _mount(paragraphs, rootStyle) {
-    const signature = this._signature(paragraphs);
-    if (this._mountedDom?.isConnected && this._mountedSignature === signature) {
-      this._patchDom(this._mountedDom, paragraphs, rootStyle, true);
-      return this._mountedDom;
-    }
-    this._unmount();
-    const dom = this.createDom(paragraphs, rootStyle);
-    this._hide(dom);
-    getSharedContainer().appendChild(dom);
-    this._mountedDom = dom;
-    this._mountedSignature = signature;
-    return dom;
-  }
-  _unmount() {
-    this._mountedDom?.parentNode?.removeChild(this._mountedDom);
-    this._mountedDom = void 0;
-    this._mountedSignature = void 0;
-  }
-  dispose() {
-    this._unmount();
-  }
-}
-
 function side(style, name, edge) {
   return style[`${name}${edge}`] ?? style[name] ?? 0;
 }
-class FontMeasurer {
+class Measurer {
   measure(paragraphs, rootStyle, _dom, fonts) {
     const _fonts = fonts ?? modernFont.fonts;
     for (const paragraph of paragraphs) {
+      if (!paragraph._layoutDirty) {
+        continue;
+      }
       for (const fragment of paragraph.fragments) {
         for (const character of fragment.characters) {
           character.measureGlyph(_fonts);
         }
       }
     }
+    if (!rootStyle.writingMode.includes("vertical")) {
+      this._applyKerning(paragraphs);
+    }
     return rootStyle.writingMode.includes("vertical") ? this._measureVertical(paragraphs, rootStyle) : this._measureHorizontal(paragraphs, rootStyle);
   }
   _rootPadding(rootStyle) {
@@ -1134,18 +981,48 @@ class FontMeasurer {
       y += mTop + pTop;
       const paraTop = y;
       let paraRight = liLeft;
+      if (!paragraph._layoutDirty) {
+        const dy = paraTop - paragraph._layoutTop;
+        if (dy) {
+          for (const fragment of paragraph.fragments) {
+            for (const c of fragment.characters) {
+              c.translateY(dy);
+            }
+            fragment.inlineBox.top += dy;
+          }
+          paragraph.lineBox.top += dy;
+          if (paragraph._glyphBox) {
+            paragraph._glyphBox.top += dy;
+          }
+        }
+        paragraph._layoutTop = paraTop;
+        paraRight = paragraph._layoutRight;
+        y = paraTop + paragraph.lineBox.height;
+        if (paraRight > maxRight) {
+          maxRight = paraRight;
+        }
+        y += pBottom + mBottom;
+        continue;
+      }
       const lines = this._breakLines(paragraph, liAvail);
       const align = pStyle.textAlign;
       const indent = pStyle.textIndent ?? 0;
+      let hasChars = false;
+      let anyAdvance = false;
       for (let i = 0; i < lines.length; i++) {
         const line = lines[i];
         const lineIndent = i === 0 ? indent : 0;
         let lineHeight = pStyle.fontSize * pStyle.lineHeight;
         let contentWidth = 0;
+        let firstW = true;
         for (const c of line) {
           if (c.fontHeight > lineHeight) {
             lineHeight = c.fontHeight;
           }
+          if (!firstW) {
+            contentWidth += c.kerningBefore;
+          }
+          firstW = false;
           contentWidth += this._advance(c);
         }
         let x = liLeft + lineIndent;
@@ -1157,18 +1034,22 @@ class FontMeasurer {
             x += slack;
           }
         }
+        let firstInLine = true;
         for (const c of line) {
+          hasChars = true;
+          if (c.advanceWidth > 0) {
+            anyAdvance = true;
+          }
+          if (!firstInLine) {
+            x += c.kerningBefore;
+          }
+          firstInLine = false;
           const adv = c.advanceWidth;
           const contentHeight = c.advanceHeight;
-          const fontHeight = c.fontHeight;
           c.inlineBox.left = x;
           c.inlineBox.top = y + (lineHeight - contentHeight) / 2;
           c.inlineBox.width = adv;
           c.inlineBox.height = contentHeight;
-          c.lineBox.left = x;
-          c.lineBox.top = c.inlineBox.top + (contentHeight - fontHeight) / 2;
-          c.lineBox.width = adv;
-          c.lineBox.height = fontHeight;
           x += this._advance(c);
         }
         if (x > paraRight) {
@@ -1186,6 +1067,11 @@ class FontMeasurer {
       paragraph.lineBox.top = paraTop;
       paragraph.lineBox.width = liAvail === Infinity ? paraRight - liLeft : liAvail;
       paragraph.lineBox.height = y - paraTop;
+      paragraph._layoutTop = paraTop;
+      paragraph._layoutHeight = paragraph.lineBox.height;
+      paragraph._layoutRight = paraRight;
+      paragraph._glyphBox = void 0;
+      paragraph._layoutValid = !hasChars || anyAdvance;
       y += pBottom + mBottom;
     }
     const contentBottom = y + rootPad.bottom;
@@ -1209,9 +1095,8 @@ class FontMeasurer {
    * flow top→bottom. It is the horizontal layout with the inline and block axes
    * swapped — the inline (down-column) advance is `advanceWidth` (CJK upright = em;
    * Latin is rotated, so its advance ≈ its width), the cross-axis content box is
-   * `advanceHeight`, and the column thickness is `fontHeight`. The lineBox is
-   * derived exactly as DomMeasurer.measureParagraphDom's vertical branch, so it
-   * stays accurate even though inlineBox carries the content-box rounding residual.
+   * `advanceHeight`, and the column thickness is `fontHeight`. The lineBox stays
+   * accurate even though inlineBox carries the content-box rounding residual.
    *
    * v1: `vertical-rl` only; no per-paragraph margin/padding or block alignment.
    */
@@ -1245,15 +1130,10 @@ class FontMeasurer {
       for (const c of column.chars) {
         const advance = c.advanceWidth;
         const contentWidth = c.advanceHeight;
-        const fontHeight = c.fontHeight;
         c.inlineBox.top = y;
         c.inlineBox.height = advance;
         c.inlineBox.width = contentWidth;
         c.inlineBox.left = colLeft + (column.thickness - contentWidth) / 2;
-        c.lineBox.left = c.inlineBox.left + (contentWidth - fontHeight) / 2;
-        c.lineBox.top = y;
-        c.lineBox.width = fontHeight;
-        c.lineBox.height = advance;
         y += this._advance(c);
       }
       if (y > maxBottom) {
@@ -1300,9 +1180,13 @@ class FontMeasurer {
           flush();
           continue;
         }
-        if (avail !== Infinity && current.length > 0 && width + c.advanceWidth > avail) {
+        const kern = current.length > 0 ? c.kerningBefore : 0;
+        if (avail !== Infinity && current.length > 0 && width + kern + c.advanceWidth > avail) {
           flush();
         }
+        if (current.length > 0) {
+          width += c.kerningBefore;
+        }
         current.push(c);
         width += this._advance(c);
       }
@@ -1310,6 +1194,22 @@ class FontMeasurer {
     flush();
     return lines;
   }
+  // 横排：为每段（仅 dirty 段）填充相邻字形的字偶距。clean 段沿用上次结果（kern 是行内水平量，
+  // 不随段落 y 平移变化），契合增量布局。
+  _applyKerning(paragraphs) {
+    for (const paragraph of paragraphs) {
+      if (!paragraph._layoutDirty) {
+        continue;
+      }
+      let prev;
+      for (const fragment of paragraph.fragments) {
+        for (const c of fragment.characters) {
+          c.kerningBefore = c.computeKerningBefore(prev);
+          prev = c;
+        }
+      }
+    }
+  }
   _unionInto(target, boxes) {
     const used = boxes.filter((b) => b.width !== 0 || b.height !== 0);
     if (!used.length) {
@@ -1328,7 +1228,6 @@ class FontMeasurer {
         fragment.inlineBox.top += dy;
         for (const character of fragment.characters) {
           character.inlineBox.top += dy;
-          character.lineBox.top += dy;
         }
       }
     }
@@ -1831,19 +1730,37 @@ function outlinePlugin() {
 
 function renderPlugin() {
   const pathSet = new modernPath2d.Path2DSet();
+  let chars = [];
+  let built = [];
+  Object.defineProperty(pathSet, "paths", {
+    configurable: true,
+    enumerable: true,
+    get() {
+      if (built === null) {
+        built = chars.map((c) => c.path);
+      }
+      return built;
+    },
+    set(value) {
+      built = value;
+    }
+  });
   return deformation.definePlugin({
     name: "render",
     pathSet,
     update: (text) => {
-      pathSet.paths.length = 0;
+      const next = [];
       const { paragraphs } = text;
       paragraphs.forEach((paragraph) => {
         paragraph.fragments.forEach((fragment) => {
           fragment.characters.forEach((character) => {
-            pathSet.paths.push(character.path);
+            next.push(character);
           });
         });
       });
+      chars = next;
+      built = null;
+      pathSet._lazyCount = next.length;
     },
     getBoundingBox: (text) => {
       const { characters, computedEffects, fontSize } = text;
@@ -2095,11 +2012,24 @@ class Text extends modernIdoc.Reactivable {
   glyphBox = new modernPath2d.BoundingBox();
   pathBox = new modernPath2d.BoundingBox();
   boundingBox = new modernPath2d.BoundingBox();
-  measurer = new DomMeasurer();
+  measurer = new Measurer();
   plugins = /* @__PURE__ */ new Map();
   pathSets = [];
   _paragraphs = [];
   _cachedCharacters;
+  // 增量布局开关与上一帧快照：未变段落按内容键复用，仅重排受影响段、平移后续段。
+  incrementalLayout = true;
+  _prevParagraphs = [];
+  _prevContentKeys = [];
+  _prevStyleKey = "";
+  // 上次测量所用的 fonts 引用：从 undefined→tree.fonts 的赋值会改变字形度量，须作废增量基准
+  // （否则会复用「fonts 未就绪」时测得的零宽字形）。
+  _prevFonts;
+  _prevFontsSet = false;
+  // _update 计算出的待提交快照；仅在 measure() 真正完成测量后才提交到 _prev*（见 measure），
+  // 否则构造函数里的 _update（只建树不测量）会让首测误把未测量段当作可复用。
+  _pendingContentKeys = [];
+  _pendingStyleKey = "";
   _pluginsByUpdateOrder = [];
   _pluginsByRenderOrder = [];
   _renderer;
@@ -2153,12 +2083,6 @@ class Text extends modernIdoc.Reactivable {
       outline,
       deformation: deformation$1
     } = modernIdoc.normalizeText(options);
-    if (options.measurer && typeof options.measurer !== "string") {
-      this.measurer = options.measurer;
-    } else {
-      const kind = options.measurer ?? "font";
-      this.measurer = kind === "font" ? new FontMeasurer() : new DomMeasurer();
-    }
     this.debug = options.debug ?? false;
     this.content = content;
     this.effects = effects;
@@ -2198,10 +2122,13 @@ class Text extends modernIdoc.Reactivable {
   }
   async load() {
     this._update();
-    await Promise.all([
+    const [decoded] = await Promise.all([
       this._decodeFonts(),
       ...Array.from(this.plugins.values()).map((p) => p.load?.(this))
     ]);
+    if (decoded > 0) {
+      this._prevParagraphs = [];
+    }
   }
   /**
    * Eagerly decode the fonts this text uses, off the main thread — WOFF tables
@@ -2221,12 +2148,15 @@ class Text extends modernIdoc.Reactivable {
       }
     }
     entries.add(fonts.fallbackFont);
-    await Promise.all(Array.from(entries, async (entry) => {
+    const decoded = await Promise.all(Array.from(entries, async (entry) => {
       const font = entry?.getFont();
       if (font && typeof font.createSFNTAsync === "function" && !font._sfnt) {
         font._sfnt = await font.createSFNTAsync();
+        return 1;
       }
+      return 0;
     }));
+    return decoded.reduce((a, b) => a + b, 0);
   }
   /**
    * Coerce numeric style fields to finite numbers.
@@ -2259,44 +2189,70 @@ class Text extends modernIdoc.Reactivable {
     }
     return style;
   }
+  _buildParagraph(p, pIndex) {
+    const { fragments, fill: pFill, outline: pOutline, ...pStyle } = p;
+    const paragraph = new Paragraph(pStyle, pIndex, this);
+    paragraph.fill = pFill;
+    paragraph.outline = pOutline;
+    fragments.forEach((f, fIndex) => {
+      const { content, fill: fFill, outline: fOutline, ...fStyle } = f;
+      if (content !== void 0) {
+        paragraph.fragments.push(
+          new Fragment(content, fStyle, fFill, fOutline, fIndex, paragraph)
+        );
+      }
+    });
+    return paragraph;
+  }
+  // 仅当根级样式/填充/描边/特效/形变未变、且非竖排、非块级垂直对齐位移时，才允许复用未变段落
+  // （这些会改变各段 computedStyle 或全局位移，复用会得到错误结果）。
+  _canReuseLayout(styleKey) {
+    if (!this.incrementalLayout || !this._prevParagraphs.length) {
+      return false;
+    }
+    if (styleKey !== this._prevStyleKey) {
+      return false;
+    }
+    if (!this._prevFontsSet || this.fonts !== this._prevFonts) {
+      return false;
+    }
+    const cs = this.computedStyle;
+    if (cs.writingMode.includes("vertical")) {
+      return false;
+    }
+    if (typeof cs.height === "number" && (cs.verticalAlign === "middle" || cs.verticalAlign === "bottom")) {
+      return false;
+    }
+    return true;
+  }
   _update() {
     this.computedStyle = this._normalizeComputedStyle({ ...textDefaultStyle, ...this.style });
     this.computedFill = this.fill ? { ...this.fill } : void 0;
     this.computedOutline = this.outline ? { ...this.outline } : void 0;
     this.computedEffects = this.effects?.map((v) => v) ?? [];
-    const paragraphs = [];
-    this.content.forEach((p, pIndex) => {
-      const { fragments, fill: pFill, outline: pOutline, ...pStyle } = p;
-      const paragraph = new Paragraph(pStyle, pIndex, this);
-      paragraph.fill = pFill;
-      paragraph.outline = pOutline;
-      fragments.forEach((f, fIndex) => {
-        const { content, fill: fFill, outline: fOutline, ...fStyle } = f;
-        if (content !== void 0) {
-          paragraph.fragments.push(
-            new Fragment(
-              content,
-              fStyle,
-              fFill,
-              fOutline,
-              fIndex,
-              paragraph
-            )
-          );
-        }
-      });
-      paragraphs.push(paragraph);
-    });
+    const styleKey = JSON.stringify([this.style, this.fill, this.outline, this.effects, this.deformation]);
+    const reuse = this._canReuseLayout(styleKey);
+    const content = this.content;
+    const contentKeys = Array.from({ length: content.length });
+    const paragraphs = Array.from({ length: content.length });
+    for (let i = 0; i < content.length; i++) {
+      const key = JSON.stringify(content[i]);
+      contentKeys[i] = key;
+      const prev = this._prevParagraphs[i];
+      if (reuse && prev && prev._layoutValid && this._prevContentKeys[i] === key) {
+        prev._layoutDirty = false;
+        paragraphs[i] = prev;
+      } else {
+        const para = this._buildParagraph(content[i], i);
+        para._layoutDirty = true;
+        paragraphs[i] = para;
+      }
+    }
     this.paragraphs = paragraphs;
+    this._pendingContentKeys = contentKeys;
+    this._pendingStyleKey = styleKey;
     return this;
   }
-  createDom() {
-    this._update();
-    if (!this.measurer.createDom) {
-      throw new Error("current measurer does not support createDom()");
-    }
-    return this.measurer.createDom(this.paragraphs, this.computedStyle);
-  }
   measure(dom = this.measureDom) {
     const old = {
       paragraphs: this.paragraphs,
@@ -2311,13 +2267,27 @@ class Text extends modernIdoc.Reactivable {
     const result = this.measurer.measure(this.paragraphs, this.computedStyle, dom, this.fonts);
     this.paragraphs = result.paragraphs;
     this.lineBox = result.boundingBox;
-    const characters = this.characters;
-    for (let i = 0; i < characters.length; i++) {
-      characters[i].update(this.fonts);
+    const paragraphs = this.paragraphs;
+    for (let pi = 0; pi < paragraphs.length; pi++) {
+      const paragraph = paragraphs[pi];
+      if (!paragraph._layoutDirty) {
+        continue;
+      }
+      for (const fragment of paragraph.fragments) {
+        const chars = fragment.characters;
+        for (let i = 0; i < chars.length; i++) {
+          chars[i].update(this.fonts);
+        }
+      }
     }
-    const glyphBox = this.getGlyphBox();
+    const glyphBox = this._computeGlyphBox();
     this.rawGlyphBox = glyphBox;
     this.glyphBox = glyphBox;
+    this._prevParagraphs = this.paragraphs;
+    this._prevContentKeys = this._pendingContentKeys;
+    this._prevStyleKey = this._pendingStyleKey;
+    this._prevFonts = this.fonts;
+    this._prevFontsSet = true;
     const updatePlugins = this._pluginsByUpdateOrder;
     for (let i = 0; i < updatePlugins.length; i++) {
       updatePlugins[i].update?.(this);
@@ -2326,8 +2296,10 @@ class Text extends modernIdoc.Reactivable {
     this.pathSets.length = 0;
     for (let i = 0; i < renderPlugins.length; i++) {
       const plugin = renderPlugins[i];
-      if (plugin.pathSet?.paths.length) {
-        this.pathSets.push(plugin.pathSet);
+      const ps = plugin.pathSet;
+      const count = ps?._lazyCount ?? ps?.paths.length;
+      if (ps && count) {
+        this.pathSets.push(ps);
       }
     }
     this._updateInlineBox()._updatePathBox()._updateBoundingBox();
@@ -2364,6 +2336,45 @@ class Text extends modernIdoc.Reactivable {
       max.y - min.y
     );
   }
+  // 单段字形包围盒（绝对坐标），逻辑与 getGlyphBox 等价但只覆盖一段；空段返回 undefined。
+  _paragraphGlyphBox(paragraph) {
+    const min = modernPath2d.Vector2.MAX;
+    const max = modernPath2d.Vector2.MIN;
+    const fragments = paragraph.fragments;
+    for (let fi = 0; fi < fragments.length; fi++) {
+      const chars = fragments[fi].characters;
+      for (let i = 0; i < chars.length; i++) {
+        const character = chars[i];
+        if (character.getGlyphMinMax(min, max)) {
+          continue;
+        }
+        const { left, top, width, height } = character.inlineBox;
+        min.clampMin(new modernPath2d.Vector2(left, top), new modernPath2d.Vector2(left + width, top + height));
+        max.clampMax(new modernPath2d.Vector2(left, top), new modernPath2d.Vector2(left + width, top + height));
+      }
+    }
+    if (!Number.isFinite(min.x) || !Number.isFinite(min.y) || !Number.isFinite(max.x) || !Number.isFinite(max.y)) {
+      return void 0;
+    }
+    return new modernPath2d.BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+  }
+  // 增量版整体字形盒：仅重排段重算并缓存 _glyphBox，未变段复用已平移的缓存，再并集。
+  _computeGlyphBox() {
+    const paragraphs = this.paragraphs;
+    const boxes = [];
+    for (let pi = 0; pi < paragraphs.length; pi++) {
+      const paragraph = paragraphs[pi];
+      let pbox = paragraph._glyphBox;
+      if (paragraph._layoutDirty || !pbox) {
+        pbox = this._paragraphGlyphBox(paragraph);
+        paragraph._glyphBox = pbox;
+      }
+      if (pbox) {
+        boxes.push(pbox);
+      }
+    }
+    return boxes.length ? modernPath2d.BoundingBox.from(...boxes) : new modernPath2d.BoundingBox(0, 0, 0, 0);
+  }
   _updateInlineBox() {
     const boxes = [];
     const paragraphs = this._paragraphs;
@@ -2423,6 +2434,7 @@ class Text extends modernIdoc.Reactivable {
     }
     const renderer = this._getRenderer(ctx);
     renderer.pixelRatio = pixelRatio;
+    renderer.region = options.region;
     renderer.setup();
     const renderPlugins = this._pluginsByRenderOrder;
     for (let i = 0; i < renderPlugins.length; i++) {
@@ -2478,9 +2490,8 @@ __decorateClass([
 
 exports.Canvas2DRenderer = Canvas2DRenderer;
 exports.Character = Character;
-exports.DomMeasurer = DomMeasurer;
-exports.FontMeasurer = FontMeasurer;
 exports.Fragment = Fragment;
+exports.Measurer = Measurer;
 exports.Paragraph = Paragraph;
 exports.Text = Text;
 exports.backgroundPlugin = backgroundPlugin;