admin
79fee8481f
實 Chromium 定位並修復下游回饋（Peek.nvim，commit 96f5ac3 基線）之全部間隙問題，
另完成現代漢語標點之誤隙稽核。jsdom 不可信（TreeWalker／offset 失真），結論均以
真實 Chromium 量測。
B 全角省略號誤隙：DOTS_CJK 之 alternation `|…` 誤把全角省略號 U+2026 納入，致
`……` 後接 CJK 冒出中西隙。移除 `|…`，僅留 ASCII `...`。
C+E gapTrim 自我應驗誤判（容器寬相關「最後一個間隙消失」、pill 跨行右隙消失）：
間隙之 margin-right 參與斷行；依「後字是否在更低行」判行末，而後字落點又被
margin 推擠 → 間隙自身 margin 把後字擠到次行 → 判行末 → trim 去 margin → 後字
回同行，自相矛盾、卡死於「已 trim、後字同行、間隙消失」。污染雙向：下游間隙之
margin 亦令夾在中間之內容放不下其行。修法：trimGaps 改「起始全部 trim、由左至右
逐一定案」——量測時前方已定案、自身與其後皆 trim，後字落點不受任何 margin 污染。
以 lastRect 為準兼顧跨行 pill。實測 8–22em（ragged／justify）偽 trim 歸零、真行末
仍 trim（justify 齊右不變）。
D 西文字集完整化（列舉法，2016／Windows 10 相容、\uXXXX 無需 flag）：補入貨幣
U+20A0–20BF（€ 等）、拉丁擴充 A/B（拼音聲調 ā ǎ ē）、西里爾、數學運算符
U+2200–22FF；並把希臘由原 U+0370–037D 補全至整塊（原漏 α-ω 本身）。€ 鄰接 CJK
之手工空格遂正規化、邊界補隙。
標點稽核：實 Chromium 全部常用中文標點 × 簡繁共 104 例，CJK 間皆 0 誤隙。修正
唯一偏例——收尾彎引號 `”`（pangu QUOTE_AN 令其後接拉丁／數字補隙，為唯一會補隙
之收尾標點，與 」』）》】〕 不一致；clreq 下全角收尾標點字身已含右側留白）。移除
QUOTE_AN。
- src/core/unicode.ts：WEST_SHARED 列舉補全（\uXXXX、區塊註記）。
- src/typeset/spacing.ts：DOTS_CJK 去 `|…`；移除 QUOTE_AN。
- src/typeset/lineedge.ts：trimGaps 起始全 trim、左→右逐一定案；新增 lastRect。
- test/juzhen.test.mjs：B／D／標點稽核／彎引號 回歸（56 測試通過）。
- demo/resize-check.html：可拖曳容器檢查頁（各寬度間隙穩定性、標點無誤隙）。
- README.md 目視驗證、ARCHITECTURE.md §6.1／§6.1a 自我應驗／§6.1b 標點稽核。
- dist/ 重建（juzhen.css 不變，僅 JS 邏輯）。
82 lines
4.8 KiB
HTML
82 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-Hant">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>聚珍（Juzhen）— 中西間隙／標點 拖曳檢查頁</title>
|
||
<link rel="stylesheet" href="../dist/juzhen.css">
|
||
<style>
|
||
body { font: 16px/1.9 serif; max-width: 60em; margin: 2rem auto; padding: 0 1rem; color: #1a1a1a; }
|
||
h1 { font-size: 1.4rem; }
|
||
h2 { font-size: 1.05rem; margin: 1.6rem 0 .4rem; color: #036; }
|
||
.hint { color: #666; font-size: .85rem; margin: .2rem 0 .6rem; }
|
||
.toolbar { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #ddd; padding: .5rem 0; margin-bottom: 1rem; font-size: .9rem; }
|
||
.toolbar label { margin-right: 1.2rem; cursor: pointer; }
|
||
|
||
/* 可拖曳容器：右下角原生把手；拖動寬度即重排，觀察間隙是否恆穩。 */
|
||
.box {
|
||
resize: horizontal; overflow: hidden;
|
||
min-width: 5em; max-width: 100%; width: 20em;
|
||
border: 1px solid #bbb; border-radius: 4px; padding: .5rem .7rem;
|
||
background: #fafafa; margin: .3rem 0;
|
||
}
|
||
.box p { margin: 0; }
|
||
|
||
/* 兩端對齊切換（檢查行末去隙是否齊右、不內縮）。 */
|
||
body.justify .juzhen p { text-align: justify; }
|
||
|
||
/* 顯示間隙：描出 jz-hws（其右側 0.25em margin 即視覺間隙）與 pill 邊界。 */
|
||
body.show-gaps jz-hws { outline: 1px solid rgba(220,30,30,.45); background: rgba(220,30,30,.06); }
|
||
body.show-gaps jz-hws.jz-hws-trim { outline-color: rgba(30,120,220,.5); background: rgba(30,120,220,.06); }
|
||
body.show-gaps code { background: rgba(0,0,0,.06); }
|
||
code { font-family: ui-monospace, Menlo, Consolas, monospace; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>聚珍 — 中西間隙／標點 拖曳檢查頁</h1>
|
||
<p class="hint">拖動每個方框右下角的把手調整寬度，觀察間隙在各寬度下是否恆穩、標點是否無誤隙。政策：quanjiao（全角式）。</p>
|
||
|
||
<div class="toolbar">
|
||
<label><input type="checkbox" id="t-justify"> 兩端對齊 justify</label>
|
||
<label><input type="checkbox" id="t-gaps"> 顯示間隙（紅＝有隙 jz-hws，藍＝已去隙 trim）</label>
|
||
</div>
|
||
|
||
<h2>E 中西混排（重點：拖動時「最後一個間隙」不應消失、標點不應緊貼）</h2>
|
||
<p class="hint">慢慢拖動寬度，每個 ¥9800／$1299／€1099 與中文間之隙都應始終存在；換行點落於任何邊界皆不致左字與後字緊貼。</p>
|
||
<div class="box juzhen" lang="zh-Hant"><p>價格 ¥9800 或 $1299 或 €1099 都可以接受呢，歡迎洽詢 hello@x.com 謝謝惠顧再聯絡。</p></div>
|
||
|
||
<h2>C 行內 pill 跨行（重點：code 折行後，其右側與中文之間隙不應消失）</h2>
|
||
<p class="hint">把方框拖窄使 <code>code</code> 內容折行，pill 末字與「之後」間應仍有隙。</p>
|
||
<div class="box juzhen" lang="zh-Hant"><p>前綴 <code>git rebase --interactive --autosquash HEAD~10 feature</code> 之後接中文，再補一段較長敘述以利觀察換行行為。</p></div>
|
||
|
||
<h2>B 全角省略號（重點：…… 與後接中文之間不應有隙）</h2>
|
||
<div class="box juzhen" lang="zh-Hant"><p>他竟然就這樣走了……留下一地，唉……真教人無言以對。</p></div>
|
||
|
||
<h2>D 貨幣／拼音／西里爾／希臘／數學（重點：這些外文字元與中文間應有隙）</h2>
|
||
<div class="box juzhen" lang="zh-Hant"><p>售價 €1099 或 $50 都行；拼音 Pīnyīn 含 ā ē ǐ ǒ ǔ；俄文 Привет 世界；希臘 α β γ 常見；數學 設 x≥0 且 ∑aᵢ≠0 皆需間隙。</p></div>
|
||
|
||
<h2>標點稽核（重點：以下各式中文標點介於中文間，皆不應冒出西文間隙）</h2>
|
||
<div class="box juzhen" lang="zh-Hant" style="width:30em"><p>句號。逗號，頓號、分號；冒號：問號？嘆號！引號「引述」『書名』（圓括）【方頭】《書名》〈單名〉省略……破折——間隔·波浪～皆不應有中西間隙；收尾彎引號“例”後接 ABC 亦不補隙。</p></div>
|
||
|
||
<h2>對照：簡體內容（zh-Hans 字形與標點）</h2>
|
||
<div class="box juzhen" lang="zh-Hans" style="width:24em"><p>这是简体测试，包含 Python 与 €99；引号“示例”和标点，；：。混排间隙与标点均应正确。</p></div>
|
||
|
||
<script src="../dist/juzhen.iife.js"></script>
|
||
<script>
|
||
// 全頁一次渲染（quanjiao 全角式，與下游回饋之政策一致）；各框由其 lang 屬性
|
||
// 驅動簡／繁字形。
|
||
Juzhen.createJuzhen({ scope: { include: ".juzhen" }, lang: { style: "quanjiao" } })
|
||
.render(document.body);
|
||
|
||
document.getElementById("t-justify").addEventListener("change", function (e)
|
||
{
|
||
document.body.classList.toggle("justify", e.target.checked);
|
||
});
|
||
document.getElementById("t-gaps").addEventListener("change", function (e)
|
||
{
|
||
document.body.classList.toggle("show-gaps", e.target.checked);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|