fix: 原子透明——段落繼承屬性漏溢修復(text-indent/hanging-punctuation/text-decoration)
下游回報:段落設 text-indent 時,標點附近冒出巨大間距。根因為聚珍把標點拆成 inline-block 原子,繼承屬性被每個原子重複套用(過套用),且裝飾盒跳過原子(欠套用)。 以「同類問題整體界定」原則統一在庫內修復,使原子對消費端段落樣式透明。 範圍(headless Chrome 逐屬性實測界定,非逐案補丁): 過套用(繼承屬性被 inline-block 原子各自重套),於原子歸零: - text-indent: 0——段落首行縮排傳入後每原子內部各縮排一次,shrink-to-fit 寬膨脹為 縮排量+字形。實測:歸零後段落首行縮排保持 2em、原子寬由 ~3em 回到 0.5em/1em。 - hanging-punctuation: none——同屬區塊容器首/末行機制;Chrome 未實作、Safari 觸發, 且與規劃中之標點懸掛相衝,按機制一併歸零。 欠套用(text-decoration 非繼承、由段落裝飾盒繪製並跳過原子致下劃線斷缺),令原子 inherit 自繪接續: - jz-char/jz-jinze 設 text-decoration: inherit;margin 模式 jz-inner 亦為 inline-block,於 _jiya.css 補一條。像素掃描實測:halt/margin 兩模式下劃線 coverage 由 ~0.25 回到 1.0,且 margin 下劃線隨半形收為 0.5em advance。 不處理者(實測不洩漏或本應逐字穿透):letter-spacing/word-spacing/text-align 系/ text-transform/line-height/color/font/word-break/overflow-wrap/hyphens/ white-space/tab-size/text-emphasis/text-shadow/font-variant/font-stretch。 - src/css/_normalize.css:過套用歸零 + text-decoration 透明(含原則與實測依據注釋)。 - src/css/_jiya.css:margin 模式 jz-inner 裝飾接續。 - test/juzhen.test.mjs:三項回歸斷言(51 測試通過)。 - README.md CSS 基礎設定第 8 項、ARCHITECTURE.md「原子透明原則」一節。 - dist/ 重建。
This commit is contained in:
@@ -2,6 +2,8 @@
|
||||
// bd-* class、邊界、冪等、revert 還原、copy-clean、lang 政策分支、作用域。
|
||||
|
||||
import assert from "node:assert/strict";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { test } from "node:test";
|
||||
|
||||
import { setupDom, countTag } from "./helpers.mjs";
|
||||
@@ -415,3 +417,28 @@ test("compat:預設強制 kaiming,句內點號半形(jz-half)(不因
|
||||
const comma = document.querySelector("jz-char.bd-pause");
|
||||
assert.ok(comma && comma.classList.contains("jz-half"), "compat 不退化:仍擠句內");
|
||||
});
|
||||
|
||||
// ----- text-indent 漏溢防護(下游回報)-----
|
||||
|
||||
test("CSS:jz-* 原子歸零「區塊容器首/末行級」繼承屬性,免 inline-block 重套(透明原則)", () =>
|
||||
{
|
||||
// jsdom 無版面,無法量寬;改驗構建 CSS 確含原子歸零規則。
|
||||
// 機制見 src/css/_normalize.css:此類繼承屬性會被 inline-block 原子(jz-char/
|
||||
// jz-jinze)重新套用於其內部首/末行,故須於原子上歸零(段落本身不受影響)。
|
||||
// 整類僅兩項(headless Chrome 逐屬性實測:letter-spacing/word-spacing/text-align
|
||||
// 系皆不洩漏)。
|
||||
const cssPath = fileURLToPath(new URL("../dist/juzhen.css", import.meta.url));
|
||||
const css = readFileSync(cssPath, "utf8");
|
||||
assert.match(css, /text-indent\s*:\s*0/, "構建 CSS 應含 text-indent:0 重設");
|
||||
assert.match(css, /hanging-punctuation\s*:\s*none/, "構建 CSS 應含 hanging-punctuation:none 重設");
|
||||
});
|
||||
|
||||
test("CSS:jz-* 原子 text-decoration:inherit,補裝飾盒跳過原子致下劃線斷缺(透明原則·欠套用面)", () =>
|
||||
{
|
||||
// 另一機制:text-decoration 非繼承、由段落裝飾盒繪製並跳過原子級 inline-block,
|
||||
// 致下劃線於每個標點原子下斷缺。令原子 inherit 自繪、接續(headless Chrome 像素掃描
|
||||
// 實測 halt/margin coverage 皆回 1.0)。
|
||||
const cssPath = fileURLToPath(new URL("../dist/juzhen.css", import.meta.url));
|
||||
const css = readFileSync(cssPath, "utf8");
|
||||
assert.match(css, /text-decoration\s*:\s*inherit/, "構建 CSS 應含 text-decoration:inherit");
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user