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:
@@ -497,6 +497,38 @@ class 約定:`bd`(標點)、`bd-open/close/cop/stop/sep/liga`、`cjk`、`j
|
|||||||
不動 JS。注意:`margin` 後備半形依賴 inline-block 之 `width:0.5em`,與
|
不動 JS。注意:`margin` 後備半形依賴 inline-block 之 `width:0.5em`,與
|
||||||
`justifyAtoms:false` 不可兼得——分頁器場景須用含 `halt` 字型。
|
`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.5em/1em。
|
||||||
|
- `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` 補一條)。實測:halt/margin 兩模式 coverage 皆回 1.0,且
|
||||||
|
`margin` 下劃線隨半形收為 0.5em advance。**此為「同類問題」整體界定之一部分**:凡因原子化
|
||||||
|
而生之版面瑕疵,要麼庫內統一修復、要麼統一交下游;本庫選前者,使原子對消費端樣式透明。
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 9. 跨瀏覽器策略
|
## 9. 跨瀏覽器策略
|
||||||
|
|||||||
@@ -231,6 +231,11 @@ JS 只注入 `jz-*` 結構,**所有視覺尺寸在 `juzhen.css`**——故 CSS
|
|||||||
7. **自動處理、無需消費端介入**:`juzhen.css` 已在 `.juzhen` 範圍內以 `@supports`
|
7. **自動處理、無需消費端介入**:`juzhen.css` 已在 `.juzhen` 範圍內以 `@supports`
|
||||||
關閉 Blink 原生 `text-spacing-trim`/`text-autospace`(避免與託管擠壓重複作用),
|
關閉 Blink 原生 `text-spacing-trim`/`text-autospace`(避免與託管擠壓重複作用),
|
||||||
並令注入間隙 `user-select: none`(複製乾淨)。
|
並令注入間隙 `user-select: none`(複製乾淨)。
|
||||||
|
8. **段落屬性照常設、原子透明**:聚珍把標點拆成 inline-block 原子,但已確保這些原子對
|
||||||
|
消費端段落樣式透明——可在段落正常設 `text-indent`(首行縮排)、`hanging-punctuation`、
|
||||||
|
`text-decoration`(下劃線)等;庫內已歸零會被原子重複套用之繼承屬性、並令原子承接段落
|
||||||
|
裝飾,故首行縮排正常、下劃線連續不斷,無需任何額外配置(機制見 ARCHITECTURE「原子透明
|
||||||
|
原則」)。
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
Vendored
+9
@@ -12,6 +12,12 @@ jz-jinze,
|
|||||||
jz-em {
|
jz-em {
|
||||||
font: inherit;
|
font: inherit;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
text-indent: 0;
|
||||||
|
hanging-punctuation: none;
|
||||||
|
}
|
||||||
|
jz-char,
|
||||||
|
jz-jinze {
|
||||||
|
text-decoration: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* src/css/_lang.css */
|
/* src/css/_lang.css */
|
||||||
@@ -99,6 +105,9 @@ jz-char.jz-half-le jz-inner {
|
|||||||
[data-jz-halfwidth=margin] jz-char.jz-ink-right jz-inner {
|
[data-jz-halfwidth=margin] jz-char.jz-ink-right jz-inner {
|
||||||
margin-left: -0.5em;
|
margin-left: -0.5em;
|
||||||
}
|
}
|
||||||
|
[data-jz-halfwidth=margin] jz-char jz-inner {
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
[data-jz-halfwidth=halt] jz-char.jz-half jz-inner,
|
[data-jz-halfwidth=halt] jz-char.jz-half jz-inner,
|
||||||
[data-jz-halfwidth=halt] jz-char.jz-half-le jz-inner {
|
[data-jz-halfwidth=halt] jz-char.jz-half-le jz-inner {
|
||||||
font-feature-settings: "halt" 1;
|
font-feature-settings: "halt" 1;
|
||||||
|
|||||||
@@ -89,6 +89,14 @@ jz-char.jz-half-le jz-inner
|
|||||||
margin-left: -0.5em;
|
margin-left: -0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* margin 模式 jz-inner 為 inline-block,會被段落裝飾盒跳過致下劃線於盒內斷缺
|
||||||
|
(見 _normalize.css「原子透明之另一面」)。令其承段落裝飾自繪、接續下劃線。
|
||||||
|
halt 模式 jz-inner 為 inline、裝飾自然穿透,故僅此模式需要。 */
|
||||||
|
[data-jz-halfwidth="margin"] jz-char jz-inner
|
||||||
|
{
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
/* 粒度控制:模式由 data-jz-halfwidth **屬性所在子樹** 決定(CSS 後代選擇器),
|
/* 粒度控制:模式由 data-jz-halfwidth **屬性所在子樹** 決定(CSS 後代選擇器),
|
||||||
故可掛於任意祖先——root(JS 全域預設)、某 lang 容器、單一段落皆可,無需重設
|
故可掛於任意祖先——root(JS 全域預設)、某 lang 容器、單一段落皆可,無需重設
|
||||||
實例。下列 halt-reset 規則置於 margin 規則之後:當 margin 頁面中**巢狀**一塊
|
實例。下列 halt-reset 規則置於 margin 規則之後:當 margin 頁面中**巢狀**一塊
|
||||||
|
|||||||
@@ -27,4 +27,36 @@ jz-em
|
|||||||
{
|
{
|
||||||
font: inherit;
|
font: inherit;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
/* 原子透明原則:jz-char/jz-jinze(及 margin 模式之 jz-inner)為 inline-block,
|
||||||
|
而 inline-block 自成區塊容器。凡「作用於區塊容器首/末行」之繼承屬性,會被每個
|
||||||
|
單字標點原子各自重新套用一次,使「用聚珍」與「未用聚珍」表現不一致。故須於原子
|
||||||
|
上歸零此類屬性——只切斷其向原子內部之再套用;段落本身之同名屬性不受影響(仍作用
|
||||||
|
於段落自身之行盒)。範圍以「同類機制」整體界定,非逐案補丁。
|
||||||
|
· text-indent:段落首行縮排傳入後,每個原子內部首行各縮排一次,shrink-to-fit
|
||||||
|
寬膨脹為 縮排量+字形,標點附近冒出巨大間距(下游回報)。歸零後實測:段落首行
|
||||||
|
縮排保持,原子寬回到 0.5em/1em。
|
||||||
|
· hanging-punctuation:同屬區塊容器首/末行機制,每個原子各自懸掛自身標點。
|
||||||
|
Chrome 未實作(測不出),Safari 會觸發;且與本庫規劃之「標點懸掛」相衝,故一併
|
||||||
|
歸零(不支援處為 no-op,支援處既擋原子重套、亦不礙段落級懸掛)。
|
||||||
|
不歸零者(經 headless Chrome 實測不洩漏,或本應逐字放行):letter-spacing/
|
||||||
|
word-spacing(原子邊界處理一致、無翻倍);text-align/text-align-last/
|
||||||
|
text-justify(halt 為 shrink-to-fit、margin 為內容溢出,二者皆無對齊餘量,
|
||||||
|
兩模式實測 jz-inner 偏移不變);text-transform/line-height/color/font(逐字
|
||||||
|
內容或縱向屬性,須穿透原子)。 */
|
||||||
|
text-indent: 0;
|
||||||
|
hanging-punctuation: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 原子透明之另一面——欠套用(與上一塊之過套用相反):text-decoration **非**繼承屬性,
|
||||||
|
而是由祖先(段落)之「裝飾盒」統一繪製、跨後代延伸;但原子級 inline-block(jz-char/
|
||||||
|
jz-jinze,及 margin 模式之 jz-inner)會被裝飾盒**跳過**,致段落下劃線在每個標點原子下
|
||||||
|
斷缺(實測:純文字 coverage 1.0、聚珍僅 ~0.25)。令原子 text-decoration: inherit,
|
||||||
|
使其承段落之裝飾自繪——因共用基線與字型度量,與漢字下劃線無縫接續(headless Chrome
|
||||||
|
像素掃描實測:halt/margin 兩模式 coverage 皆回 1.0,且 margin 下劃線隨半形收為
|
||||||
|
0.5em advance,正確)。margin 模式 jz-inner 亦為 inline-block、同遭跳過,故於該模式
|
||||||
|
補一條(halt 模式 jz-inner 為 inline、裝飾自然穿透,無需)。 */
|
||||||
|
jz-char,
|
||||||
|
jz-jinze
|
||||||
|
{
|
||||||
|
text-decoration: inherit;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,6 +2,8 @@
|
|||||||
// bd-* class、邊界、冪等、revert 還原、copy-clean、lang 政策分支、作用域。
|
// bd-* class、邊界、冪等、revert 還原、copy-clean、lang 政策分支、作用域。
|
||||||
|
|
||||||
import assert from "node:assert/strict";
|
import assert from "node:assert/strict";
|
||||||
|
import { readFileSync } from "node:fs";
|
||||||
|
import { fileURLToPath } from "node:url";
|
||||||
import { test } from "node:test";
|
import { test } from "node:test";
|
||||||
|
|
||||||
import { setupDom, countTag } from "./helpers.mjs";
|
import { setupDom, countTag } from "./helpers.mjs";
|
||||||
@@ -415,3 +417,28 @@ test("compat:預設強制 kaiming,句內點號半形(jz-half)(不因
|
|||||||
const comma = document.querySelector("jz-char.bd-pause");
|
const comma = document.querySelector("jz-char.bd-pause");
|
||||||
assert.ok(comma && comma.classList.contains("jz-half"), "compat 不退化:仍擠句內");
|
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