demo: 功能分級＋垂懸字效果演示（showcase 定寬對照＋ resize-check）

新增 demo/showcase.html：定寬文本框並排對照，逐場景演示功能分級（標題標 data-jz-level=text 僅文本級）與垂懸字（關閉/開啟孤字對照、chars=3、標點不計入 N），工具列描出 jz-orphan／中西間隙／半形標點；附「標點懸掛已停用」說明節。逐框 render(該框) 隔離屬性。 resize-check.html：增垂懸字（orphan）拖曳檢查＋關閉對照。標點懸掛已停用，兩頁均不含懸掛。
2026-06-09 23:29:20 +08:00
parent 89d1008755
commit f3fe2399a7
2 changed files with 163 additions and 1 deletions
@@ -33,6 +33,9 @@
    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>
@@ -42,6 +45,7 @@
 <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>
@@ -64,10 +68,16 @@
 <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>
    // 全頁一次渲染（quanjiao 全角式，與下游回饋之政策一致）；各框由其 lang 屬性
-    // 驅動簡／繁字形。
+    // 驅動簡／繁字形。（標點懸掛已停用，見 ARCHITECTURE §6.5.6。）
    Juzhen.createJuzhen({ scope: { include: ".juzhen" }, lang: { style: "quanjiao" } })
          .render(document.body);

@@ -79,6 +89,10 @@
    {
        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>