admin
3a4fa1c932
保留逐字 margin／jiya.bias 字体后备方案；补齐 demo 重排、量测边界说明及共享规则 1.0.1 反例向量。 验证：完整构建通过，Node 376 项、WKWebView 64 项及原生 demo 9 项通过；Firefox 仍暂缓。
86 lines
4.4 KiB
HTML
86 lines
4.4 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
|
||
（禁用原生 text-autospace）。聚珍不設定 text-spacing-trim；A 保留瀏覽器原生
|
||
排版，B／C 使用相同受管基線以比較 halt 與 margin。 */
|
||
/* 字型設於容器即可——聚珍不管字型（無 _lang.css）、亦不強制 jz-inner（`font:
|
||
inherit`），故消費端字型經繼承正確套到標點字面（標點亦以 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">
|
||
本頁需本機安裝指定版本的方正書宋 GBK；若發生字型替代，下列比較不能作該字型驗收。
|
||
已測版本僅含 <code>vert</code>、<b>無 <code>halt</code></b>，故 halt 模式之開明式擠壓「完全無效」（標點仍佔全形）。
|
||
margin 後備模式以 0.5em 外盒收半形、內盒依墨色偏側定位——本字型簡體點號（，、。；：！？）墨色皆偏左下，故收右側空白。
|
||
白底行盒寬度即直接反映效果：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；整句
|
||
// 整句行寬差取決於實際壓縮字符及目標字型，可於瀏覽器 devtools 量；不以固定 em 值驗收。
|
||
</script>
|
||
</body>
|
||
</html>
|