diff --git a/demo/resize-check.html b/demo/resize-check.html index 895ba7f..2f5fc93 100644 --- a/demo/resize-check.html +++ b/demo/resize-check.html @@ -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); } @@ -42,6 +45,7 @@
+

E 中西混排(重點:拖動時「最後一個間隙」不應消失、標點不應緊貼)

@@ -64,10 +68,16 @@

對照:簡體內容(zh-Hans 字形與標點)

这是简体测试,包含 Python 与 €99;引号“示例”和标点,;:。混排间隙与标点均应正确。

+

垂懸字避免(重點:拖窄時,段末行 CJK 實義字恒 ≥ 2,標點不計)

+

慢慢拖窄方框,使最後一行將塌為單字;垂懸字(方案 C)會把段末末二實義字+尾隨標點綁為不可斷之 jz-orphan(勾選上方「顯示垂懸字綁定」描出紫框),故末行恒含 ≥2 字。對照組關閉 orphan,可能出現孤字末行。

+

這是一段用於檢查垂懸字避免的測試文字,拖窄後觀察段末行是否恒保留至少兩個實義字而不孤零。

+

對照(orphan 關閉,data-juzhen-off="orphan"):

+

這是一段用於檢查垂懸字避免的測試文字,拖窄後觀察段末行是否恒保留至少兩個實義字而不孤零。

+ diff --git a/demo/showcase.html b/demo/showcase.html new file mode 100644 index 0000000..4cad249 --- /dev/null +++ b/demo/showcase.html @@ -0,0 +1,148 @@ + + + + + +聚珍(Juzhen)— 新功能效果演示(定寬對照) + + + + + +

聚珍 — 新功能效果演示(定寬對照)

+

本頁以定寬文本框(不可拖動)並排對照,逐場景展示兩項新功能:功能分級(文本級/段落級)、垂懸字避免orphan)。各框寬度經 headless 校準,配 Noto Sans CJK 可穩定重現所述效果。勾選下方開關可描出聚珍注入之結構(紫=垂懸字綁定、紅=中西間隙、藍=半形標點)。第三項曾規劃之「標點懸掛」經實測停用,說明見文末。

+ +
+ + + +
+ + +

一、功能分級:文本級 vs 段落級

+

功能分兩級——文本級(中西間隙 spacing、標點擠壓 jiya)僅依字符鄰接,任意文本片段(標題、按鈕、單行)皆適用;段落級(禁則 jinze、垂懸字 orphan、長詞 longWord)依賴行/段布局。塊級元素預設全功能;標 data-jz-level="text" 之子樹(或選項 level:{text:"選擇器"})僅跑文本級。

+ +
+

標題標為文本級(仍有間隙與半形,但不參與禁則/垂懸字)

+
+
data-jz-level="text"(標題典型) +

用 Neovim 寫程式(v0.10)真的很順手。

+

中西間隙(Neovimv0.10 兩側)與標點半形照常;但此子樹跑垂懸字/禁則(無 jz-orphanjz-jinze)。

+
+
預設段落級(同內容,作正文) +

用 Neovim 寫程式(v0.10)真的很順手。

+

同樣有間隙與半形,但另含禁則綁定與垂懸字(開啟「顯示垂懸字綁定」可見紫框)。

+
+
+

即:把標題/按鈕標為文本級——要中西間隙與標點半形、不要避孤字/避頭尾(那些對單行無意義)。

+
+ + +

二、垂懸字避免(orphan,方案 C)

+

保證段末行 CJK 實義字數 ≥ N(預設 2;標點/符號不計)。機制:把段末「第 N 個實義字起至段末」(含尾隨標點)包入 jz-orphanwhite-space:nowrap)成不可斷整體 → 末行恒含之 ⇒ 末行實義字 ≥ N,無需量測版面、任意寬度成立。預設開

+ +
+

關閉 vs 開啟(同寬同文:末行從「孤字」變為保留兩字)

+
+
orphan 關閉(data-juzhen-off="orphan" +

春天來了萬物復甦大地生機盎然處處鳥語花香令人神往心曠神怡。

+

末行僅剩孤字「怡。」——單字垂懸,版面失衡。

+
+
orphan 開啟(預設 chars=2) +

春天來了萬物復甦大地生機盎然處處鳥語花香令人神往心曠神怡。

+

末行保留「神怡。」兩個實義字(開「顯示垂懸字綁定」見紫框=被綁之尾段)。

+
+
+ +

調整保留字數(orphan:{ chars: 3 }

+
+
chars = 3(同前文、同寬 14em) +

春天來了萬物復甦大地生機盎然處處鳥語花香令人神往心曠神怡。

+

末行保留「曠神怡。」三個實義字(較預設 chars=2 之「神怡。」多拉一字下來)。

+
+
+ +

標點/符號不計入字數(句末多個標點不佔 N)

+
+
orphan 關閉 +

他想了好久最後終於對著大家堅定地說出了那三個字「我願意」。

+

末行=「意」。」——僅 1 個實義字(意),其後 」。 兩個標點不計入字數。

+
+
orphan 開啟(chars=2) +

他想了好久最後終於對著大家堅定地說出了那三個字「我願意」。

+

末行=「願意」。」——保 2 個實義字(願意);尾隨 」。 隨尾段綁入但不佔 N(開紫框見綁定範圍含標點,且整個 「我願意」 禁則群組跨 jz-jinze 不被切割)。

+
+
+

邊界:段落實義字 < N(或單行段)→ 不綁、無副作用。極窄容器(<N 字寬)→ 該尾段可能溢出(罕見)。

+
+ + +

三、標點懸掛(hanging)— 已評估停用

+

原計劃之標點懸掛(行端標點凸出版心)經 headless + 真實瀏覽器實測確認不可行,已全面停用hanging 選項仍被接受但無任何效果)。原因:純負 margin 機制下,句號墨色偏字框左下角,安全凸出量(< 1em)只把空白半框推出版心、墨色仍在內(視覺不懸掛);凸出滿 1em 又釋放一整字寬、把下一字拉上本行致重疊;且 ResizeObserver 重排時標記錯亂。真正的解是原生 CSS hanging-punctuation,惟 Chrome 至今不支援、且與本庫 inline-block 對齊原子結構衝突。程式碼與 CSS 保留休眠,俟原生支援成熟再議。詳見 ARCHITECTURE.md §6.5.6

+ + + + + + +