cjk-autospace/demo/index.html

<!doctype html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>聚珍（Juzhen）切片 1 — 目视验证</title>
<!-- 明确载入 Noto 系列 webfont 作参考：擠壓依赖字型 OpenType halt，
     系统 fallback 字型（如 PingFang）可能无 halt，Safari 下尤其表现为开明式无效。
     Noto Serif/Sans SC/TC 含 halt，确保跨浏览器一致参考。
     注意：字型由**消费端**自行设定——聚珍不再内建 _lang.css 字体堆叠。下方 <style>
     之 `.juzhen:lang(...)` 即推荐范式（逐 lang 设 font-family，须含 halt）。 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&family=Noto+Sans+TC&family=Noto+Serif+SC&family=Noto+Serif+TC&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../dist/juzhen.css">
<style>
    /* demo 自身样式（非套件之一）。 */
    /* 消费端字型设定（推荐范式）：逐 lang 设 font-family，置于 .juzhen 或带 lang 之
       元素；字型须含 OpenType halt（Noto CJK 具备），否则用 jiya.halfWidth:"margin"。 */
    .juzhen:lang(zh-Hans), .juzhen [lang]:lang(zh-Hans) { font-family: "Noto Serif SC", "Noto Serif CJK SC", serif; }
    .juzhen:lang(zh-Hant), .juzhen [lang]:lang(zh-Hant) { font-family: "Noto Serif TC", "Noto Serif CJK TC", serif; }
    body { margin: 0; padding: 2rem; font-size: 18px; line-height: 2; background: #fafafa; color: #1a1a1a; }
    h1 { font-size: 1.4rem; }
    .toolbar { position: sticky; top: 0; background: #fff; border: 1px solid #ddd; padding: .75rem 1rem; margin-bottom: 1.5rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; z-index: 10; }
    .toolbar button, .toolbar label { font-size: .85rem; }
    .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .panel { border: 1px solid #ddd; padding: 1rem 1.25rem; background: #fff; }
    .panel h2 { font-size: .95rem; color: #666; margin: 0 0 .5rem; font-weight: 600; }
    .ruler { border-left: 1px dashed #c00; border-right: 1px dashed #c00; }
    .narrow { max-width: 20em; }
    .primary { border-color: #06c; border-width: 2px; }
    code { background: #eee; padding: 0 .25em; border-radius: 3px; font-family: ui-monospace, monospace; }
    .note { font-size: .8rem; color: #888; margin-top: 1.5rem; }
    .selbox { background: #fffbe6; }
    body.justify .juzhen p { text-align: justify; }
    .cases p { margin: .4rem 0; }
    .label { font-size: .72rem; color: #999; }
</style>
</head>
<body>
<h1>聚珍（Juzhen）切片 1 — 目视验证页</h1>

<div class="toolbar">
    <button id="render">render</button>
    <button id="revert">revert</button>
    <label><input type="checkbox" id="justify"> text-align: justify</label>
    <label><input type="checkbox" id="wide"> 放宽栏（看行内擠壓）</label>
    <label><input type="checkbox" id="force-kaiming"> 强制繁体开明式（兼容性检查）</label>
    <button id="measure">测量标点宽度</button>
    <span id="status" style="font-size:.8rem;color:#888;"></span>
</div>

<div class="cols">
    <!-- 主：简体开明式。窄栏强制换行，以观察行端擠壓（机制 B）。 -->
    <div class="panel juzhen narrow ruler primary cases" lang="zh-Hans">
        <h2>主 · 简体（开明式）— 句内点号＋括号引号半形</h2>
        <p><span class="label">中西混排：</span>我用 Neovim 写 TypeScript，配合 ripgrep 与 fzf 做模糊搜索，效率提升了 200%，达到约 3.5 倍。</p>
        <p><span class="label">句末＋引号：</span>他问：“真的吗？”我说：“当然！”这是 GPT-4 与 state-of-the-art 工具的时代。</p>
        <p><span class="label">连续标点：</span>完了……怎么办？！真是的——他竟然走了。</p>
        <p><span class="label">括号嵌套：</span>（含括号）与【方括号】以及《标题》，还有“她讲过‘小心’二字”。</p>
        <p><span class="label">间隔号：</span>卡尔·马克思与弗里德里希·恩格斯合著。</p>
        <p><span class="label">列举：</span>第一、第二、第三；以及其他（杂项）的内容。</p>
    </div>

    <!-- 对比：繁体全角式。同样内容，用以发现政策分支差异。 -->
    <div class="panel juzhen narrow ruler cases" lang="zh-Hant">
        <h2>对比 · 繁體（全角式）— 句內標點不擠，僅鄰接／行端收縮</h2>
        <p><span class="label">中西混排：</span>我用 Neovim 寫 TypeScript，配合 ripgrep 與 fzf 做模糊搜尋，效率提升了 200%，達到約 3.5 倍。</p>
        <p><span class="label">句末＋引號：</span>他問：「真的嗎？」我說：「當然！」這是 GPT-4 與 state-of-the-art 工具的時代。</p>
        <p><span class="label">連續標點：</span>完了……怎麼辦？！真是的——他竟然走了。</p>
        <p><span class="label">括號嵌套：</span>（含括號）與【方括號】以及《標題》，還有「她講過『小心』二字」。</p>
        <p><span class="label">間隔號：</span>卡爾·馬克思與弗里德里希·恩格斯合著。</p>
        <p><span class="label">列舉：</span>第一、第二、第三；以及其他（雜項）的內容。</p>
    </div>
</div>

<div class="panel juzhen selbox" lang="zh-Hans" style="margin-top:1.5rem;">
    <h2>copy-clean 测试 — 框选整段并复制到纯文本编辑器，中西间隙的空格不应被带入</h2>
    <p>请选取此句：我用 Neovim 编辑配置文件，搭配 fzf 与 ripgrep 做模糊搜索。复制后粘到纯文本，应为“我用Neovim编辑配置文件，搭配fzf与ripgrep做模糊搜索。”般紧凑（标点原样保留，中西间隙不入剪贴板）。</p>
</div>

<p class="note">
    验证重点（jsdom 无法覆盖之版面层）：①justify 下句末标点只占一份间距（不被拉成两份）；
    ②开明式句内点号与括号引号视觉半形、繁体全角式不擠（仅相邻／行端收缩）；
    ③句末标点后接闭引号（如 。 接 ”）行内应约 1.5em、行尾应约 1em；
    ④长英文词在窄栏可原生连字断行（需字体支持）；⑤复制粘贴中西间隙不污染原文。
    请于 Chrome / Safari / Firefox 三引擎各核对一次。
    <br><b>字型注意</b>：擠壓（开明式半形）依赖字型的 OpenType <code>halt</code> 特性。
    本页已用 webfont 载入 Noto Serif SC/TC（含 halt）作参考；若改用无 halt 的字型
    （含部分系统字型如 PingFang），Safari 等浏览器下开明式擠壓会不生效——这是字型限制，非逻辑错误。
</p>

<details open style="margin-top:1rem;">
    <summary style="font-size:.85rem;color:#666;cursor:pointer;">标点实测宽度（诊断用——点「测量标点宽度」后把下表复制给我）</summary>
    <pre id="measure-out" style="font-size:.75rem;background:#f4f4f4;padding:1rem;overflow:auto;white-space:pre-wrap;">（点上方「测量标点宽度」）</pre>
</details>

<script src="../dist/juzhen.iife.js"></script>
<script>
    var forceKaiming = false;
    function makeJz()
    {
        // 強制繁體開明式：policy 將 zh-Hant（含 zh-HK／zh-TW，皆歸 zh-Hant）覆寫為
        // 開明式，用以檢查開明政策套到繁體之相容性。
        return Juzhen.createJuzhen({
            scope: { include: ".juzhen" },
            lang: forceKaiming ? { policy: { "zh-Hant": "kaiming" } } : {}
        });
    }
    var jz = makeJz();
    var rendered = false;
    var statusEl = document.getElementById("status");
    function render()
    {
        jz.revert(document.body);   // 先還原（重套政策時清除上次產物；首次為 no-op）
        jz = makeJz();
        jz.render(document.body);
        rendered = true;
        statusEl.textContent = "已 render（" + document.querySelectorAll("jz-hws").length + " 间隙、" + document.querySelectorAll("jz-char").length + " 标点原子；繁体政策："
            + (forceKaiming ? "开明式" : "全角式") + "）";
    }
    function revert()
    {
        jz.revert(document.body);
        rendered = false;
        statusEl.textContent = "已 revert（DOM 还原）";
    }
    function refreshLayout()
    {
        // 對齊／寬度改變不一定改變 body 尺寸，須顯式重算；revert 後保持停用。
        if (rendered) { jz.rerender(document.body); }
    }
    document.getElementById("force-kaiming").addEventListener("change", function (e)
    {
        forceKaiming = e.target.checked;
        if (rendered) { render(); }
    });
    // 量測每個 jz-char 之實際渲染寬度（em）。輸出純 ASCII（碼位＋class＋數值），
    // 並按 lang／codepoint／class 去重，便於回報診斷 halt 是否生效、收哪側。
    function measure()
    {
        var out = [];
        var byPanel = {};
        document.querySelectorAll(".juzhen").forEach(function (panel)
        {
            var lang = panel.getAttribute("lang") || "?";
            var key = lang + " | " + (panel.querySelector("h2") ? panel.querySelector("h2").textContent.slice(0, 10) : "");
            panel.querySelectorAll("jz-char").forEach(function (c)
            {
                var fs = parseFloat(getComputedStyle(c).fontSize) || 16;
                var w = c.getBoundingClientRect().width / fs;
                var cp = "U+" + c.textContent.codePointAt(0).toString(16).toUpperCase();
                while (cp.length < 6) { cp = cp.slice(0, 2) + "0" + cp.slice(2); }
                var cls = Array.prototype.slice.call(c.classList).join(",") || "-";
                var line = key + "  " + cp + "  " + w.toFixed(3) + "em  [" + cls + "]";
                if (!byPanel[line]) { byPanel[line] = true; out.push(line); }
            });
        });
        // 參考：一個漢字寬度（應 ≈ 1.000em）。
        var ref = document.querySelector(".juzhen p");
        if (ref)
        {
            var span = document.createElement("span");
            span.textContent = "字";
            ref.appendChild(span);
            var fs2 = parseFloat(getComputedStyle(span).fontSize) || 16;
            out.unshift("参考 漢字「字」  " + (span.getBoundingClientRect().width / fs2).toFixed(3) + "em（应 ≈ 1.000）");
            ref.removeChild(span);
        }
        document.getElementById("measure-out").textContent = out.join("\n");
    }
    document.getElementById("measure").addEventListener("click", measure);
    document.getElementById("render").addEventListener("click", render);
    document.getElementById("revert").addEventListener("click", revert);
    document.getElementById("justify").addEventListener("change", function (e)
    {
        document.body.classList.toggle("justify", e.target.checked);
        refreshLayout();
    });
    document.getElementById("wide").addEventListener("change", function (e)
    {
        document.querySelectorAll(".narrow").forEach(function (el)
        {
            el.style.maxWidth = e.target.checked ? "none" : "";
        });
        refreshLayout();
    });
    render();
</script>
</body>
</html>