cjk-autospace/demo/resize-check.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; }
    /* 消費端字型（推薦範式：逐 lang 設，須含 halt）——聚珍不再內建字體堆疊。 */
    .juzhen:lang(zh-Hant), .juzhen [lang]:lang(zh-Hant) { font-family: "Noto Serif TC", "Noto Serif CJK TC", "Source Han Serif TC", serif; }
    .juzhen:lang(zh-Hans), .juzhen [lang]:lang(zh-Hans) { font-family: "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; }
    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; }

    /* 顯示垂懸字綁定範圍（jz-orphan：段末不可斷之尾段）。 */
    body.show-orphan jz-orphan { outline: 1px dashed rgba(180,30,180,.6); background: rgba(180,30,180,.07); }
</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>
    <label><input type="checkbox" id="t-orphan"> 顯示垂懸字綁定（紫＝jz-orphan 尾段）</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>

<h2>垂懸字避免（重點：拖窄時，段末行 CJK 實義字恒 ≥ 2，標點不計）</h2>
<p class="hint">慢慢拖窄方框，使最後一行將塌為單字；垂懸字（方案 C）會把段末末二實義字＋尾隨標點綁為不可斷之 <code>jz-orphan</code>（勾選上方「顯示垂懸字綁定」描出紫框），故末行恒含 ≥2 字。對照組關閉 orphan，可能出現孤字末行。</p>
<div class="box juzhen" lang="zh-Hant" style="width:14em"><p>這是一段用於檢查垂懸字避免的測試文字，拖窄後觀察段末行是否恒保留至少兩個實義字而不孤零。</p></div>
<p class="hint">對照（orphan 關閉，<code>data-juzhen-off="orphan"</code>）：</p>
<div class="box juzhen" lang="zh-Hant" style="width:14em" data-juzhen-off="orphan"><p>這是一段用於檢查垂懸字避免的測試文字，拖窄後觀察段末行是否恒保留至少兩個實義字而不孤零。</p></div>

<script src="../dist/juzhen.iife.js"></script>
<script>
    // 各獨立拖曳框作為 render 根，讓 ResizeObserver 直接觀察其寬度。
    // quanjiao 全角式；各框由 lang 驅動簡／繁字形。
    var jz = Juzhen.createJuzhen({ scope: { include: ".juzhen" }, lang: { style: "quanjiao" } });
    var boxes = Array.from(document.querySelectorAll(".box.juzhen"));
    boxes.forEach(function (box) { jz.render(box); });

    document.getElementById("t-justify").addEventListener("change", function (e)
    {
        document.body.classList.toggle("justify", e.target.checked);
        // 對齊改變未必產生 resize，不能只等 observer。
        boxes.forEach(function (box) { jz.rerender(box); });
    });
    document.getElementById("t-gaps").addEventListener("change", function (e)
    {
        document.body.classList.toggle("show-gaps", e.target.checked);
    });
    document.getElementById("t-orphan").addEventListener("change", function (e)
    {
        document.body.classList.toggle("show-orphan", e.target.checked);
    });
</script>
</body>
</html>