admin
7b4a051a1f
margin 後備（供缺 OpenType halt 之字型）： - jiya.halfWidth: "halt"（預設）｜"margin"。margin 以 width:0.5em＋字身依墨色 偏側溢出定位，於 CSS 盒模型重現 halt 之半形 advance（真 0.5em；相鄰標點各 0.5em、合佔 1em，無負 margin 之鄰接疊加／單側重疊）。模式由 data-jz-halfwidth 子樹屬性決定（可逐區塊／逐 lang，含 halt-island 反置）。 - 偏側 inkBias 依字身墨色中心給 left／center／right／full；參考表據方正書宋 GBK 實測，consumer 可經 jiya.bias 逐 lang 逐字覆寫。 - _lang.css 字型堆疊僅作後備（全包 :where 零特異度、只命中帶 lang 屬性之元素、 不直接覆寫 jz-inner）→ 消費端 font-family 恆優先，標點隨之以消費端字型渲染。 - 新增 tools/measure-bias.py（量 glyph ink 中心、產偏側建議表）＋ README 「字型適配工作流」。demo/fallback.html：方正書宋 GBK 對照 halt 失效 vs margin。 下游回饋修復： - 1a：adjacentLogicalChar 透明穿越 jz-jinze（同 jz-hws／樣式行內）→ pill 緊鄰 CJK 標點時，左緣間隙與作者空格剝除復原（jinze 先於 spacing 之交互）。 - 1b：CJK↔CJK 贅餘作者空格（含跨 inline 標籤）剝除、不留隙，與 CJK↔Latin 之 邊界正規化一致（DEL 哨符，全形空格 U+3000 不動）。 - 問題二：新增 justifyAtoms 選項；false → jz-char／jz-jinze 改 display:inline， 相容分頁器（Paged.js）對齊引擎（halt 半形與禁則 nowrap 保留）。 測試 43→49 全通過；dist 重建；README／ARCHITECTURE 同步更新契約。
84 lines
4.2 KiB
HTML
84 lines
4.2 KiB
HTML
<!doctype html>
|
||
<html lang="zh-Hans">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>聚珍 — halt 缺失字型之 margin 後備模式（方正書宋 GBK）</title>
|
||
<link rel="stylesheet" href="../dist/juzhen.css">
|
||
<style>
|
||
/* 全頁強制使用 方正書宋 GBK（本機字型，無 OpenType halt），以測試後備模式。 */
|
||
body
|
||
{
|
||
margin: 0;
|
||
padding: 2rem;
|
||
background: #fafafa;
|
||
color: #1a1a1a;
|
||
font-family: system-ui, sans-serif;
|
||
}
|
||
/* 字型類獨立於 .juzhen：A 用裸 .cn（瀏覽器原生排版），B／C 才掛 .juzhen
|
||
（含 normalize 之 text-spacing-trim:space-all）。否則 A 之原生標點被 space-all
|
||
撐開、顯得比 B 鬆，造成「B 似乎有效」之假象（實則 B 全形未擠、與真原文等寬）。 */
|
||
/* 字型設於容器即可——_lang.css 修正後不再直接強制 jz-inner 之字型，故消費端
|
||
字型經繼承正確套到標點字面（標點亦以 FZShuSong 渲染，halt 確實缺席）。 */
|
||
.cn { font-family: "方正书宋_GBK", "FZShuSong-Z01", serif; font-size: 46px; line-height: 1.5; }
|
||
.w { font-weight: 400; opacity: .85; }
|
||
h1 { font-size: 1rem; }
|
||
.meta { font-size: .72rem; color: #777; line-height: 1.7; max-width: 42em; }
|
||
.meta code { background: #eee; padding: 0 .25em; border-radius: 3px; }
|
||
.row { margin: .6rem 0; }
|
||
.tag { display: inline-block; font-size: .62rem; color: #fff; padding: .12rem .55rem; border-radius: 3px; letter-spacing: .03em; vertical-align: top; margin-top: .9rem; width: 7.5rem; }
|
||
.tag.raw { background: #555; }
|
||
.tag.bad { background: #c0392b; }
|
||
.tag.good { background: #27ae60; }
|
||
/* 把每行的 <p> 設為 inline-block + 背景，行盒寬度即直接反映擠壓效果。 */
|
||
.row p
|
||
{
|
||
display: inline-block;
|
||
margin: 0 0 0 .6rem;
|
||
padding: .15rem .1rem;
|
||
background: #fff;
|
||
border: 1px solid #e0e0e0;
|
||
white-space: nowrap;
|
||
vertical-align: top;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>方正書宋 GBK · margin 後備模式</h1>
|
||
<p class="meta">
|
||
此字型僅含 <code>vert</code>、<b>無 <code>halt</code></b>，故 halt 模式之開明式擠壓「完全無效」（標點仍佔全形）。
|
||
margin 後備模式以負 margin 依字形偏側收半形——本字型簡體點號（，、。；：！？）墨色皆偏左下，故收右側空白。
|
||
白底行盒寬度即直接反映效果：B 與 A 同寬（未擠），C 明顯窄一截（已擠）。
|
||
</p>
|
||
|
||
<div class="row">
|
||
<span class="tag raw" id="tag-raw">A · 原文（瀏覽器原生）</span>
|
||
<div class="cn" id="raw" lang="zh-Hans" style="display:inline-block"><p>他问：“真的吗？”第一、第二、第三；（含括号）。</p></div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<span class="tag bad" id="tag-halt">B · halt 模式<br>（無 halt → 不擠，等同原文）</span>
|
||
<div class="cn juzhen" id="halt" lang="zh-Hans" style="display:inline-block"><p>他问：“真的吗？”第一、第二、第三；（含括号）。</p></div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<span class="tag good" id="tag-margin">C · margin 後備<br>（半形生效）</span>
|
||
<div class="cn juzhen" id="margin" lang="zh-Hans" style="display:inline-block"><p>他问：“真的吗？”第一、第二、第三；（含括号）。</p></div>
|
||
</div>
|
||
|
||
<script src="../dist/juzhen.iife.js"></script>
|
||
<script>
|
||
var base = { spacing: false, jinze: false, longWord: false };
|
||
// B：halt 模式（預設）——此字型無 halt，開明式擠壓不生效（對照組）。
|
||
Juzhen.createJuzhen(Object.assign({ scope: { include: "#halt" } }, base))
|
||
.render(document.getElementById("halt"));
|
||
// C：margin 後備模式——render 於 root 設 data-jz-halfwidth="margin"。
|
||
Juzhen.createJuzhen(Object.assign({ scope: { include: "#margin" }, jiya: { halfWidth: "margin" } }, base))
|
||
.render(document.getElementById("margin"));
|
||
// A 面板留原文（不 render）。
|
||
// 註：margin 模式以 width:0.5em＋字身溢出定位，標點 advance 真為 0.5em；整句
|
||
// 行寬 halt 24.0em → margin 19.5em（10 標點各收 0.5em），可於瀏覽器 devtools 量。
|
||
</script>
|
||
</body>
|
||
</html>
|