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:
2026-06-02 17:18:41 +08:00
parent 7b4a051a1f
commit 96f5ac32e1
6 changed files with 113 additions and 0 deletions
+32
View File
@@ -497,6 +497,38 @@ class 約定:`bd`(標點)、`bd-open/close/cop/stop/sep/liga`、`cjk`、`j
不動 JS。注意:`margin` 後備半形依賴 inline-block 之 `width:0.5em`,與
`justifyAtoms:false` 不可兼得——分頁器場景須用含 `halt` 字型。
**原子透明原則(繼承屬性漏溢,下游回饋)**:`jz-char``jz-jinze`(及 `margin` 模式之
`jz-inner`)為 inline-block,而 inline-block 自成區塊容器。凡「作用於區塊容器首/末行」之
**繼承屬性**,會被每個單字標點原子各自重新套用一次,使「用聚珍」與「未用聚珍」表現不一致。
**作用範圍判斷**:此類間距/位移源於我們生成之原子,屬本庫責任,由庫內統一免疫(消費端無需
配置);且須以「同類機制」整體界定範圍——要麼全修、要麼全交下游,不做逐案補丁。修法
`_normalize.css`)於原子上歸零此類屬性,只切斷其向原子內部之再套用,段落本身之同名屬性不
受影響(仍作用於段落自身行盒)。
經 headless Chrome 逐屬性實測,屬此類者僅兩項,皆已歸零:
- `text-indent: 0`——段落首行縮排傳入後,每原子內部首行各縮排一次,shrink-to-fit 寬膨脹為
`縮排量+字形`,標點附近冒出巨大間距。實測:歸零後段落首行縮排仍保持 2em,原子寬由 ~3em
回到 0.5em1em。
- `hanging-punctuation: none`——同屬區塊容器首/末行機制,每原子各自懸掛自身標點。Chrome
未實作(測不出)、Safari 會觸發,且與規劃中之「標點懸掛」(§任務 6)相衝,故按機制一併歸零。
**不歸零者**(實測不洩漏或本應逐字穿透):`letter-spacing``word-spacing`(原子邊界處理
一致、無翻倍,實測 delta 與基線同);`text-align``text-align-last``text-justify`
halt 為 shrink-to-fit、margin 為內容溢出,皆無對齊餘量,兩模式實測 `jz-inner` 偏移不變);
`text-transform``line-height``color``font`(逐字內容或縱向屬性,須穿透原子);
`word-break``overflow-wrap``hyphens``white-space``tab-size``text-emphasis`
`text-shadow``font-variant``font-stretch`(逐屬性實測 delta 皆與基線同,不洩漏)。
**透明之另一面——欠套用(`text-decoration`**:與上述「過套用」相反,`text-decoration`
**非繼承**屬性,由段落之「裝飾盒」統一繪製並跨後代延伸;但原子級 inline-block 會被裝飾盒
**跳過**,致段落下劃線在每個標點原子下斷缺(像素掃描實測:純文字 coverage 1.0、聚珍僅
~0.25)。故反向處理——令原子 `text-decoration: inherit` 承段落裝飾自繪,因共用基線與字型
度量而無縫接續(`_normalize.css` 設 `jz-char``jz-jinze``margin` 模式 `jz-inner` 亦為
inline-block,於 `_jiya.css` 補一條)。實測:haltmargin 兩模式 coverage 皆回 1.0,且
`margin` 下劃線隨半形收為 0.5em advance。**此為「同類問題」整體界定之一部分**:凡因原子化
而生之版面瑕疵,要麼庫內統一修復、要麼統一交下游;本庫選前者,使原子對消費端樣式透明。
---
## 9. 跨瀏覽器策略