Compare commits
5 Commits
docs
..
v1-autospace
| Author | SHA1 | Date | |
|---|---|---|---|
 admin
|
82c2d22535
|
||
|
admin
|
a5faec5abf
|
||
|
admin
|
a0c66ecadc
|
||
|
admin
|
1b12a8549d
|
||
|
admin
|
c3defc4054
|
@@ -0,0 +1,109 @@
|
|||||||
|
# cjk-autospace
|
||||||
|
|
||||||
|
CJK ↔ Latin / 數字 / 標點 / 引號 / 括號 / 運算子等邊界之自動間距 shim。Pangu.js v7.2.1 規則之 ES5 端口，加上「跨樣式標籤透明 + 行內塊邊界」兩 pass 架構，再加 Pass C 長英文段 `<span lang>` 包裝（讓瀏覽器原生連字斷詞）、Pass D 開明式標點擠壓（句內點號半形）。工廠模式，由消費端注入配置。
|
||||||
|
|
||||||
|
> **詳細文檔 + Changelog 位於 `docs` 分支**：架構解析、雙 pass 流程、整合範例見 [`index.html`](https://git.commilitia.net/admin/cjk-autospace/src/branch/docs/index.html)；變更記錄見 [`CHANGELOG.html`](https://git.commilitia.net/admin/cjk-autospace/src/branch/docs/CHANGELOG.html)。本機並列檢出：`git worktree add ../cjk-autospace-docs docs`。
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
```js
|
||||||
|
const autospace = createCjkAutospace({
|
||||||
|
pillSelector: "code, kbd, .your-pill-class",
|
||||||
|
});
|
||||||
|
autospace.apply(document.body);
|
||||||
|
```
|
||||||
|
|
||||||
|
回傳 `{ apply(root?) }`。冪等：在已注入 marker 之 DOM 上重跑會跳過既有 `.cjk-autospace`。完整選項見 `cjk-autospace.d.ts`。
|
||||||
|
|
||||||
|
## CSS 需求
|
||||||
|
|
||||||
|
```css
|
||||||
|
.cjk-autospace {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
/* 視覺寬度由消費端決定，例如 0.25em via inline-block + width */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
`user-select: none` 讓選取與剪貼板跳過 marker；marker 內含真實 ASCII space（layout 視為 whitespace：行末 collapse、容許換行、justify 可拉伸）。
|
||||||
|
|
||||||
|
開明式標點擠壓（Pass D）另需：
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* 句內點號半形——CSS 表達不了「只擠句內、不擠句末」，故由 lib 逐字包裝，
|
||||||
|
此處只負責把被包裝者擠成半形。需字型具 halt（Noto Sans/Serif CJK 皆有）。 */
|
||||||
|
.cjk-squeeze {
|
||||||
|
font-feature-settings: "halt" 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 連續標點擠壓 + 行端壓縮（clreq）——原生 layout-aware，套在正文容器上。
|
||||||
|
Chrome 123+ 預設即 normal，明確標注以防被 reset；同樣要求字型具 halt/chws。 */
|
||||||
|
.article {
|
||||||
|
text-spacing-trim: normal;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
不加 `.cjk-squeeze` 規則則 span 惰性（DOM 變更但無視覺效果）。`text-spacing-trim` 於 Chromium 不支援時優雅降級（句內半角仍由 `halt` 生效）。
|
||||||
|
|
||||||
|
## 標籤三分類
|
||||||
|
|
||||||
|
- **STYLE_INLINES**（`<strong>` / `<em>` / `<a>` / `<b>` / `<i>` / `<u>` / `<s>` / `<mark>` / `<ins>` / `<del>` / `<sub>` / `<sup>` / `<small>` / `<abbr>` / `<cite>` / `<dfn>` / `<q>` / `<span>` / `<var>` / `<samp>` / `<time>` / `<bdo>` / `<bdi>` / `<ruby>` / `<rb>` / `<rt>` / `<rp>` / `<wbr>`）— shim 透明走過。跨樣式之 Pangu 邊界（如 `<strong>是</strong> Neovim`）由 Pass A 在剝離後識別。
|
||||||
|
- **PILL**（由 `pillSelector` 指定，預設 `code, kbd`）— 行內塊。邊界由 Pass B 處理，與內容鄰接（CJK / 字母數字）即插 marker。
|
||||||
|
- **BLOCK**（`<p>` / `<div>` / `<h1>`–`<h6>` / `<li>` / `<pre>` / `<table>` / `<br>` / `<hr>` / …）— 段落級。Pass A 把它們當作 run 邊界，子 block 各自一次。
|
||||||
|
|
||||||
|
## 四 pass
|
||||||
|
|
||||||
|
- **Pass A — per-block Pangu on tag-stripped text**：對每個 BLOCK 走 DFS 收集邏輯文本（STYLE 透明、PILL 與子 BLOCK 中斷 run、既有 marker 也中斷），整段套 `panguSpace`，把 MARK 反映射回 textNode/offset。MARK 對應原文若是單 ASCII space 則 strip 後插 marker，否則純插。actions 倒序執行確保前面偏移不被後面動作影響。
|
||||||
|
- **Pass B — pill boundary**：對每個 PILL 透過 STYLE 鏈遞迴找邏輯鄰字（`adjacentLogicalChar`），鄰字若是 CJK / 字母數字直接插 marker；若是 1 個 ASCII space 且另一側為內容字則 strip 後插 marker；其餘（標點 / 多空格 / 換行 / 既有 marker）跳過。
|
||||||
|
- **Pass C — long English word wrap**（**預設啟用**，`longWordWrap: false` 顯式關閉）：將文本節點內所有 `[A-Za-z]{N,}`（預設 `N=6`）之長英文段包進 `<span lang="en">`。冪等：parent 已為 `<span lang>` 直接跳過。**連字符不在 DOM**，由瀏覽器 `hyphens: auto` 在斷行時純視覺渲染 → 選取 / 複製返回原文無污染。需消費端加 CSS：
|
||||||
|
|
||||||
|
```css
|
||||||
|
[lang|="en"] {
|
||||||
|
hyphens: auto;
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
hyphenate-limit-chars: 6 3 3; /* 詞長 / 斷點前 / 斷點後最少字符 */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
不加 CSS 則 span 為惰性（DOM 變更但無視覺效果）。
|
||||||
|
|
||||||
|
- **Pass D — 開明式標點擠壓**（**預設啟用**，`punctuationSqueeze: false` 顯式關閉）：把句內點號（`，、；：`）逐字包進 `<span class="cjk-squeeze">`，配合上節 CSS 之 `font-feature-settings: "halt"` 擠成半形；句末點號（`。？！`）保持全形——此即「開明式」。span 內含**真標點字元本身**（非注入空白），故 Copy / Paste / 序列化返回原文不變，無需 `user-select` 特殊處理。冪等：parent 已為 `.cjk-squeeze` 直接跳過。可傳 `{ squeezeClass, marks, langWhitelist }` 自訂。
|
||||||
|
|
||||||
|
**職責分工（不重複擠壓）**：開明式「只擠句內、不擠句末」CSS 無法表達（`halt` 套整個元素會把句末也擠成半形 → 變半角式），故由 lib 逐字包裝。clreq 之「連續標點擠壓」「行端壓縮」屬 layout-aware（相鄰對之側別、斷行位置只有 layout 時才知），交由原生 `text-spacing-trim`（其 collapse 規則與 clreq 逐條對應）。兩層字符集／職責不相交。
|
||||||
|
|
||||||
|
**`langWhitelist`**：BCP-47 前綴陣列。非空時僅擠壓最近祖先 `lang` 前綴命中之文本（`"zh"` 命中 `"zh-Hant"`；無 `lang` 祖先視為不命中）；空則不限。開明式於簡體字型下字面位於左下角、擠壓最自然，繁體點號居中視覺略異——欲限定簡體可傳 `{ langWhitelist: ["zh-Hans"] }`。
|
||||||
|
|
||||||
|
**`hanging-punctuation`（真·行尾懸掛）不納入配方**：Chromium 至今未實作（無 flag 可開），僅 Safari 支援；且 clreq 言繁體中文橫排不宜行尾懸掛。clreq 的「行尾結束括號縮減末側半形」屬壓縮，已由 `text-spacing-trim` 涵蓋。
|
||||||
|
|
||||||
|
## 配置選項
|
||||||
|
|
||||||
|
| 選項 | 預設 | 說明 |
|
||||||
|
|---|---|---|
|
||||||
|
| `pillSelector` | `"code, kbd"` | 行內塊 CSS 選擇器 |
|
||||||
|
| `styleInlines` | 預設樣式標籤集 | tagName 大寫之陣列 |
|
||||||
|
| `blockTags` | 預設段落標籤集 | tagName 大寫之陣列 |
|
||||||
|
| `skipTags` | mono / form / script / style | tagName 大寫之陣列；整 subtree skip |
|
||||||
|
| `autospaceClass` | `"cjk-autospace"` | marker span class 名 |
|
||||||
|
| `skipAttribute` | `"data-md-key"` | 任一祖先帶此屬性即整 subtree skip |
|
||||||
|
| `isSkipped` | （無） | 自訂 skip callback；先於內建判定檢查 |
|
||||||
|
| `longWordWrap` | `true`（預設啟用） | Pass C 開關。傳 `false` 顯式關閉；`{minLength, lang}` 自訂；`true` / 省略等同 `{minLength: 6, lang: "en"}` |
|
||||||
|
| `punctuationSqueeze` | `true`（預設啟用） | Pass D 開明式擠壓開關。傳 `false` 顯式關閉；`{squeezeClass, marks, langWhitelist}` 自訂；`true` / 省略等同句內點號 `["，","、","；","："]` / class `"cjk-squeeze"` / 不限語言 |
|
||||||
|
|
||||||
|
## 模組形式
|
||||||
|
|
||||||
|
四種消費場景並存：
|
||||||
|
|
||||||
|
- **ES module / TypeScript**：`import { createCjkAutospace } from "./cjk-autospace.js"`（檔尾 `export { createCjkAutospace }`，配 `cjk-autospace.d.ts`）
|
||||||
|
- **CommonJS / Node**：`require("./cjk-autospace.js").createCjkAutospace`（檔尾 `module.exports`）
|
||||||
|
- **Browser global**：載入後可 `globalThis.createCjkAutospace`
|
||||||
|
- **IIFE 串接**：把本檔內容 `cat` 進單一閉包（如 Claude 模板 `build.sh` / Nvim peek build hook）— `export {…}` 為 ESM module-level 語法，串入函式體內會語法錯誤，串接端須剝掉那行：
|
||||||
|
|
||||||
|
```sh
|
||||||
|
sed '/^export[[:space:]]*{/d' cjk-autospace.js
|
||||||
|
```
|
||||||
|
|
||||||
|
其餘 `module.exports` / `globalThis` 兩塊在閉包內安全（`typeof` 檢查不會 throw、globalThis 賦值無副作用）。
|
||||||
|
|
||||||
|
## 授權
|
||||||
|
|
||||||
|
基於 Pangu.js v7.2.1 的規則表 port（[原始項目](https://github.com/vinta/pangu.js) MIT）。
|
||||||
Vendored
+109
@@ -0,0 +1,109 @@
|
|||||||
|
/**
|
||||||
|
* cjk-autospace — CJK ↔ Latin 邊界自動間距 shim（Pangu.js v7.2.1 風格）。
|
||||||
|
*
|
||||||
|
* 用法：
|
||||||
|
* ```ts
|
||||||
|
* import { createCjkAutospace } from "./cjk-autospace.js";
|
||||||
|
*
|
||||||
|
* const autospace = createCjkAutospace({
|
||||||
|
* pillSelector: "code, kbd, .cjk-pill",
|
||||||
|
* });
|
||||||
|
* autospace.apply(document.body);
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
|
||||||
|
export interface CjkAutospaceOptions {
|
||||||
|
/** 行內塊（PILL）選擇器。預設 `"code, kbd"`。 */
|
||||||
|
pillSelector?: string;
|
||||||
|
|
||||||
|
/** 樣式標籤集合（shim 透明走過）。tagName 用大寫。 */
|
||||||
|
styleInlines?: readonly string[];
|
||||||
|
|
||||||
|
/** 段落級標籤集合（Pass A run 邊界）。tagName 用大寫。 */
|
||||||
|
blockTags?: readonly string[];
|
||||||
|
|
||||||
|
/** Skip-ancestor 標籤集合（subtree 整個跳過）。tagName 用大寫。 */
|
||||||
|
skipTags?: readonly string[];
|
||||||
|
|
||||||
|
/** Marker span 之 class 名。預設 `"cjk-autospace"`。 */
|
||||||
|
autospaceClass?: string;
|
||||||
|
|
||||||
|
/** Skip-ancestor 額外屬性檢查（任一祖先帶此屬性則 skip）。預設 `"data-md-key"`。 */
|
||||||
|
skipAttribute?: string;
|
||||||
|
|
||||||
|
/** 自訂 skip 判定（在內建判定前先檢查）。回傳 true 表示應跳過。 */
|
||||||
|
isSkipped?: (node: Node) => boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pass C（**預設啟用**）：把 `[A-Za-z]{minLength,}` 之長英文段包進
|
||||||
|
* `<span lang="…">`，讓瀏覽器原生 `hyphens: auto` 可斷詞並渲染連字
|
||||||
|
* 符（連字符純由 CSS 渲染，DOM 內不存在 → 複製不污染原文）。需消費
|
||||||
|
* 端 CSS 配：
|
||||||
|
*
|
||||||
|
* ```css
|
||||||
|
* [lang|="en"] {
|
||||||
|
* hyphens: auto;
|
||||||
|
* -webkit-hyphens: auto;
|
||||||
|
* hyphenate-limit-chars: 6 3 3; // 詞長 / 斷點前 / 斷點後最少字符
|
||||||
|
* }
|
||||||
|
* ```
|
||||||
|
*
|
||||||
|
* 傳 `false` 顯式關閉；`true` 或省略等同 `{ minLength: 6, lang: "en" }`。
|
||||||
|
*/
|
||||||
|
longWordWrap?: boolean | {
|
||||||
|
/** 觸發包裝之最短字母串長度。預設 6。 */
|
||||||
|
minLength?: number;
|
||||||
|
/** 包裝 span 之 `lang` 屬性值。預設 `"en"`。 */
|
||||||
|
lang?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pass D（**預設啟用**）：開明式標點擠壓。把句內點號（`，、；：`）包進
|
||||||
|
* `<span class="…">`，配合消費端 CSS `font-feature-settings: "halt"` 擠
|
||||||
|
* 成半形；句末點號（`。？！`）保持全形——此即「開明式」。span 內含真
|
||||||
|
* 標點字元本身，故 Copy / Paste 返回原文不變。
|
||||||
|
*
|
||||||
|
* `font-feature-settings: "halt"` 套整個元素只會把所有標點變半形（半角
|
||||||
|
* 式），故必須逐字選擇性包裝——這是 CSS 表達不了、JS 不可替代的一層。
|
||||||
|
* clreq 之「連續標點擠壓」與「行端壓縮」交由原生 CSS（layout-aware）：
|
||||||
|
*
|
||||||
|
* ```css
|
||||||
|
* .cjk-squeeze { font-feature-settings: "halt" 1; } // 句內點號半形
|
||||||
|
* .article { text-spacing-trim: normal; } // 連續標點 + 行端壓縮
|
||||||
|
* ```
|
||||||
|
*
|
||||||
|
* `text-spacing-trim` 於 Chrome 123+ 預設生效（要求字型有 `halt`/`chws`，
|
||||||
|
* Noto CJK 滿足）；`hanging-punctuation`（真·懸掛）僅 Safari 支援且繁體
|
||||||
|
* 橫排不宜，故不納入配方。
|
||||||
|
*
|
||||||
|
* 傳 `false` 顯式關閉；`true` 或省略等同預設（marks `["，","、","；","："]`、
|
||||||
|
* class `"cjk-squeeze"`、不限語言）。
|
||||||
|
*/
|
||||||
|
punctuationSqueeze?: boolean | {
|
||||||
|
/** 包裝 span 之 class 名。預設 `"cjk-squeeze"`。 */
|
||||||
|
squeezeClass?: string;
|
||||||
|
/** 要擠壓之標點字元（單字元）陣列。預設句內點號 `["，", "、", "；", "："]`。 */
|
||||||
|
marks?: readonly string[];
|
||||||
|
/**
|
||||||
|
* BCP-47 語言前綴白名單。非空時僅擠壓最近祖先 `lang` 前綴命中之文本
|
||||||
|
* （`"zh"` 命中 `"zh-Hant"`；無 `lang` 祖先視為不命中）。空陣列或省略
|
||||||
|
* 則不限語言。例：`["zh-Hans"]` 限定簡體（開明式於簡體字型下字面位
|
||||||
|
* 於左下角，擠壓最自然；繁體點號居中，視覺略異）。
|
||||||
|
*/
|
||||||
|
langWhitelist?: readonly string[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CjkAutospaceInstance {
|
||||||
|
/**
|
||||||
|
* 對指定 root（預設 `document.body`）套用 Pass A + Pass B。
|
||||||
|
* 在已注入 marker 之 DOM 上重跑為冪等（會跳過既有 `.cjk-autospace`）。
|
||||||
|
*/
|
||||||
|
apply(root?: ParentNode | Document): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createCjkAutospace(options?: CjkAutospaceOptions): CjkAutospaceInstance;
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
var createCjkAutospace: typeof createCjkAutospace;
|
||||||
|
}
|
||||||
@@ -0,0 +1,716 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
/* cjk-autospace — Pangu.js v7.2.1 風格 CJK ↔ Latin 邊界自動間距 shim。
|
||||||
|
*
|
||||||
|
* 工廠模式：`createCjkAutospace(options).apply(root)`。配置由消費端注入；
|
||||||
|
* 預設值對應 HTML 模板 runtime 之原狀（pill = code, kbd；標籤三分類；
|
||||||
|
* marker class 為 .cjk-autospace；skip ancestor 為 mono / SVG /
|
||||||
|
* contentEditable / [data-md-key]）。
|
||||||
|
*
|
||||||
|
* 標籤三分類：
|
||||||
|
* - STYLE_INLINES — 樣式標籤，shim 透明走過。跨樣式邊界（如
|
||||||
|
* <strong>是</strong> Neovim）由 Pass A 在剝離樣式後識別。
|
||||||
|
* - PILL — 行內塊（有獨立背景，如 <code>），邊界由 Pass B
|
||||||
|
* 處理。預設 'code, kbd'，可由消費端擴充。
|
||||||
|
* - BLOCK — 段落級標籤，Pass A 把它們當作 run 邊界。
|
||||||
|
*
|
||||||
|
* 四 pass：
|
||||||
|
* Pass A — 對每個 BLOCK 走 DFS 收集邏輯文本（STYLE 透明、PILL 與子
|
||||||
|
* BLOCK 中斷 run），整段套 panguSpace，把 MARK 反映射回 textNode/
|
||||||
|
* offset。MARK 對應原文若是單 ASCII space 則 strip 後插 marker，
|
||||||
|
* 否則純插。actions 倒序執行確保前面偏移不被後面動作影響。
|
||||||
|
* Pass B — 對每個 PILL 透過 STYLE 鏈遞迴找邏輯鄰字（adjacentLogical-
|
||||||
|
* Char），按 0/1/多+特殊規則處理（0 個或 1 個 ASCII space 插
|
||||||
|
* marker；其餘跳過）。
|
||||||
|
* Pass C — 預設啟用（options.longWordWrap）。把 [A-Za-z]{N,} 之長英文
|
||||||
|
* 段包進 <span lang="en">；配合消費端 CSS `[lang|="en"]{hyphens:auto}`
|
||||||
|
* 讓瀏覽器原生連字斷詞。連字符純由 CSS 渲染（DOM 內不存在），複製
|
||||||
|
* 不污染原文。
|
||||||
|
* Pass D — 預設啟用（options.punctuationSqueeze）。開明式標點擠壓：把
|
||||||
|
* 句內點號（，、；：）包進 <span class="cjk-squeeze">，配合消費端 CSS
|
||||||
|
* `font-feature-settings:"halt"` 擠成半形；句末點號（。？！）保持全
|
||||||
|
* 形。span 內含真標點字元本身，複製不污染原文。clreq 之「連續標點擠
|
||||||
|
* 壓」與「行端壓縮」屬 layout-aware 規則，交由原生 CSS
|
||||||
|
* `text-spacing-trim` 處理（見 README），JS 不涉入以免重複擠壓。
|
||||||
|
*
|
||||||
|
* Marker = <span class="cjk-autospace" aria-hidden="true">(空白)</span>。
|
||||||
|
* 內含真實 ASCII 空白：layout 視為 whitespace（行末 collapse / 容許
|
||||||
|
* 換行 / justify 可拉伸）；配 CSS user-select: none 讓選取與剪貼板跳
|
||||||
|
* 過該 span。textContent 不變（無視 span 內容）→ Copy / Paste / 序列
|
||||||
|
* 化都乾淨。
|
||||||
|
*/
|
||||||
|
|
||||||
|
function createCjkAutospace(options)
|
||||||
|
{
|
||||||
|
options = options || {};
|
||||||
|
|
||||||
|
/* ----- 預設配置 ----- */
|
||||||
|
const DEFAULT_STYLE_INLINES = [
|
||||||
|
"STRONG", "EM", "A", "B", "I", "U", "S", "MARK", "INS", "DEL",
|
||||||
|
"SUB", "SUP", "SMALL", "ABBR", "CITE", "DFN", "Q", "SPAN",
|
||||||
|
"VAR", "SAMP", "TIME", "BDO", "BDI", "RUBY", "RB", "RT", "RP", "WBR",
|
||||||
|
];
|
||||||
|
const DEFAULT_BLOCK_TAGS = [
|
||||||
|
"BODY", "P", "DIV", "H1", "H2", "H3", "H4", "H5", "H6", "LI",
|
||||||
|
"DT", "DD", "BLOCKQUOTE", "FIGURE", "FIGCAPTION", "TD", "TH",
|
||||||
|
"CAPTION", "SUMMARY", "DETAILS", "HEADER", "FOOTER", "SECTION",
|
||||||
|
"ARTICLE", "ASIDE", "NAV", "MAIN", "ADDRESS", "PRE", "UL", "OL",
|
||||||
|
"DL", "TABLE", "TR", "THEAD", "TBODY", "TFOOT", "FORM",
|
||||||
|
"FIELDSET", "LEGEND", "LABEL", "BR", "HR",
|
||||||
|
];
|
||||||
|
const DEFAULT_SKIP_TAGS = [
|
||||||
|
"CODE", "KBD", "PRE", "SAMP", "TT", "VAR",
|
||||||
|
"SCRIPT", "STYLE", "TEXTAREA", "INPUT",
|
||||||
|
];
|
||||||
|
|
||||||
|
const STYLE_SET = new Set(options.styleInlines || DEFAULT_STYLE_INLINES);
|
||||||
|
const BLOCK_SET = new Set(options.blockTags || DEFAULT_BLOCK_TAGS);
|
||||||
|
const SKIP_SET = new Set(options.skipTags || DEFAULT_SKIP_TAGS);
|
||||||
|
const pillSelector = options.pillSelector || "code, kbd";
|
||||||
|
const autospaceCls = options.autospaceClass || "cjk-autospace";
|
||||||
|
const skipAttr = options.skipAttribute || "data-md-key";
|
||||||
|
const userIsSkipped = typeof options.isSkipped === "function" ? options.isSkipped : null;
|
||||||
|
|
||||||
|
/* Pass C 設定。預設啟用（minLength=6 / lang="en"）；顯式傳 false 才
|
||||||
|
關閉。可給 { minLength, lang } 局部自訂。
|
||||||
|
注意：斷點前後最少字符數由消費端 CSS `hyphenate-limit-chars` 控
|
||||||
|
制（建議 `6 3 3`），lib 不涉入。 */
|
||||||
|
const longWordCfg = (function ()
|
||||||
|
{
|
||||||
|
const v = options.longWordWrap;
|
||||||
|
if (v === false) { return null; }
|
||||||
|
if (v === undefined || v === true || v === null) { return { minLength: 6, lang: "en" }; }
|
||||||
|
return {
|
||||||
|
minLength: typeof v.minLength === "number" && v.minLength >= 2 ? v.minLength : 6,
|
||||||
|
lang: typeof v.lang === "string" && v.lang ? v.lang : "en",
|
||||||
|
};
|
||||||
|
}());
|
||||||
|
|
||||||
|
/* Pass D 設定——開明式標點擠壓。預設啟用。
|
||||||
|
開明式之定義：句內點號（，、；：）擠成半形，句末點號（。？！）保持
|
||||||
|
全形。`font-feature-settings: "halt"` 套在整個元素只會把所有標點變半
|
||||||
|
形（即半角式），故必須逐字選擇性包裝——這正是 JS 不可替代、CSS 無從
|
||||||
|
表達的那一層。包裝 span 內含真標點字元本身（非注入空白），故 Copy /
|
||||||
|
Paste 返回原文不變，無需 user-select 特殊處理。
|
||||||
|
clreq 之「連續標點擠壓」與「行端壓縮」屬 layout-aware 規則（相鄰對之
|
||||||
|
側別選擇、行端位置只有 layout 時才知），交由原生 CSS
|
||||||
|
`text-spacing-trim` 處理（Chrome 123+ 預設生效，要求字型有 halt/chws；
|
||||||
|
見 README）——JS 不涉入，避免與 CSS 重複擠壓。真·行尾懸掛
|
||||||
|
（hanging-punctuation）僅 Safari 支援，且 clreq 言繁體橫排不宜，故不納
|
||||||
|
入配方。
|
||||||
|
langWhitelist：BCP-47 前綴陣列。非空時僅擠壓最近祖先 lang 前綴命中之
|
||||||
|
文本；空陣列或省略則不限語言。 */
|
||||||
|
const squeezeCfg = (function ()
|
||||||
|
{
|
||||||
|
const v = options.punctuationSqueeze;
|
||||||
|
if (v === false) { return null; }
|
||||||
|
const DEFAULT_MARKS = ["，", "、", "；", "："]; // ，、；：
|
||||||
|
if (v === undefined || v === true || v === null)
|
||||||
|
{
|
||||||
|
return { cls: "cjk-squeeze", marks: DEFAULT_MARKS, langWhitelist: [] };
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
cls: typeof v.squeezeClass === "string" && v.squeezeClass ? v.squeezeClass : "cjk-squeeze",
|
||||||
|
marks: Array.isArray(v.marks) && v.marks.length ? v.marks.slice() : DEFAULT_MARKS,
|
||||||
|
langWhitelist: Array.isArray(v.langWhitelist) ? v.langWhitelist.slice() : [],
|
||||||
|
};
|
||||||
|
}());
|
||||||
|
|
||||||
|
/* ----- Pangu 字符類與規則表 ----- */
|
||||||
|
const PANGU_CJK = "⺀-⼀-"
|
||||||
|
+ "-ゟ゠-ヺー-ヿ"
|
||||||
|
+ "-ㄯ㈀-㋿"
|
||||||
|
+ "㐀-䶿一-鿿豈-";
|
||||||
|
const AN_CHARS = "A-Za-z0-9";
|
||||||
|
const A_CHARS = "A-Za-z";
|
||||||
|
const OPS_HYPHEN = "\\+\\*=&\\-";
|
||||||
|
const OPS_GRADE = "\\+\\-\\*";
|
||||||
|
const QUOTES_CLS = "`\"״";
|
||||||
|
const LBR_BASIC = "\\(\\[\\{";
|
||||||
|
const RBR_BASIC = "\\)\\]\\}";
|
||||||
|
const LBR_EXT = "\\(\\[\\{<>";
|
||||||
|
const RBR_EXT = "\\)\\]\\}<>";
|
||||||
|
const ANS_CJK_AFTER = A_CHARS + "Ͱ-Ͽ0-9@\\$%\\^&\\*\\-\\+\\\\=¡-ÿ⅐-✀-➿";
|
||||||
|
const ANS_BEFORE_CJK = A_CHARS + "Ͱ-Ͽ0-9\\$%\\^&\\*\\-\\+\\\\=¡-ÿ⅐-✀-➿";
|
||||||
|
|
||||||
|
const ANY_CJK = new RegExp("[" + PANGU_CJK + "]");
|
||||||
|
|
||||||
|
/* PUA marker chars. 不會撞到正常 prose 中之 glyph。 */
|
||||||
|
const MARK = "";
|
||||||
|
const PH_OPEN = "";
|
||||||
|
const PH_CLOSE = "";
|
||||||
|
|
||||||
|
const STRIP_CJK_SPACE_ANS = new RegExp("([" + PANGU_CJK + "]) ([" + ANS_CJK_AFTER + "])", "g");
|
||||||
|
const STRIP_ANS_SPACE_CJK = new RegExp("([" + ANS_BEFORE_CJK + "]) ([" + PANGU_CJK + "])", "g");
|
||||||
|
|
||||||
|
const DOTS_CJK = new RegExp("([\\.]{2,}|…)([" + PANGU_CJK + "])", "g");
|
||||||
|
const CJK_PUNCTUATION = new RegExp("([" + PANGU_CJK + "])([!;,\\?:]+)(?=[" + PANGU_CJK + AN_CHARS + "])", "g");
|
||||||
|
const AN_PUNCTUATION_CJK = new RegExp("([" + AN_CHARS + "])([!;,\\?]+)([" + PANGU_CJK + "])", "g");
|
||||||
|
const CJK_TILDE = new RegExp("([" + PANGU_CJK + "])(~+)(?!=)(?=[" + PANGU_CJK + AN_CHARS + "])", "g");
|
||||||
|
const CJK_TILDE_EQUALS = new RegExp("([" + PANGU_CJK + "])(~=)", "g");
|
||||||
|
const CJK_PERIOD = new RegExp("([" + PANGU_CJK + "])(\\.)(?![" + AN_CHARS + "\\./])(?=[" + PANGU_CJK + AN_CHARS + "])", "g");
|
||||||
|
const AN_PERIOD_CJK = new RegExp("([" + AN_CHARS + "])(\\.)([" + PANGU_CJK + "])", "g");
|
||||||
|
const AN_COLON_CJK = new RegExp("([" + AN_CHARS + "])(:)([" + PANGU_CJK + "])", "g");
|
||||||
|
const CJK_QUOTE = new RegExp("([" + PANGU_CJK + "])([" + QUOTES_CLS + "])", "g");
|
||||||
|
const QUOTE_CJK = new RegExp("([" + QUOTES_CLS + "])([" + PANGU_CJK + "])", "g");
|
||||||
|
const QUOTE_AN = new RegExp("([”])([" + AN_CHARS + "])", "g");
|
||||||
|
const CJK_QUOTE_AN = new RegExp("([" + PANGU_CJK + "])(\")([" + AN_CHARS + "])", "g");
|
||||||
|
const CJK_HASH = new RegExp("([" + PANGU_CJK + "])(#([^ ]))", "g");
|
||||||
|
const HASH_CJK = new RegExp("(([^ ])#)([" + PANGU_CJK + "])", "g");
|
||||||
|
const SINGLE_LETTER_GRADE = new RegExp("\\b([" + A_CHARS + "])([" + OPS_GRADE + "])([" + PANGU_CJK + "])", "g");
|
||||||
|
const CJK_OPERATOR_ANS = new RegExp("([" + PANGU_CJK + "])([" + OPS_HYPHEN + "])([" + AN_CHARS + "])", "g");
|
||||||
|
const ANS_OPERATOR_CJK = new RegExp("([" + AN_CHARS + "])([" + OPS_HYPHEN + "])([" + PANGU_CJK + "])", "g");
|
||||||
|
const CJK_LESS_THAN = new RegExp("([" + PANGU_CJK + "])(<)([" + AN_CHARS + "])", "g");
|
||||||
|
const LESS_THAN_CJK = new RegExp("([" + AN_CHARS + "])(<)([" + PANGU_CJK + "])", "g");
|
||||||
|
const CJK_GREATER_THAN = new RegExp("([" + PANGU_CJK + "])(>)([" + AN_CHARS + "])", "g");
|
||||||
|
const GREATER_THAN_CJK = new RegExp("([" + AN_CHARS + "])(>)([" + PANGU_CJK + "])", "g");
|
||||||
|
const CJK_LEFT_BRACKET = new RegExp("([" + PANGU_CJK + "])([" + LBR_EXT + "])", "g");
|
||||||
|
const RIGHT_BRACKET_CJK = new RegExp("([" + RBR_EXT + "])([" + PANGU_CJK + "])", "g");
|
||||||
|
const AN_LEFT_BRACKET = new RegExp("([" + AN_CHARS + "])(?<!\\.[" + AN_CHARS + "]*)([" + LBR_BASIC + "])", "g");
|
||||||
|
const RIGHT_BRACKET_AN = new RegExp("([" + RBR_BASIC + "])([" + AN_CHARS + "])", "g");
|
||||||
|
const CJK_ANS = new RegExp("([" + PANGU_CJK + "])([" + ANS_CJK_AFTER + "])", "g");
|
||||||
|
const ANS_CJK = new RegExp("([" + ANS_BEFORE_CJK + "])([" + PANGU_CJK + "])", "g");
|
||||||
|
const S_A = new RegExp("(%)([" + A_CHARS + "])", "g");
|
||||||
|
|
||||||
|
/* Compound words like GPT-4 / state-of-the-art mustn't get operator
|
||||||
|
spaces wedged into them. Mask before operator passes, restore
|
||||||
|
before bracket / CJK_ANS / ANS_CJK passes (so the boundary
|
||||||
|
between 是 and GPT-4 still gets spaced). */
|
||||||
|
const COMPOUND_WORD = /\b(?:[A-Za-z0-9]*[a-z][A-Za-z0-9]*-[A-Za-z0-9]+|[A-Za-z0-9]+-[A-Za-z0-9]*[a-z][A-Za-z0-9]*|[A-Za-z]+-[0-9]+|[A-Za-z]+[0-9]+-[A-Za-z0-9]+)(?:-[A-Za-z0-9]+)*\b/g;
|
||||||
|
const PH_PATTERN = new RegExp(PH_OPEN + "(\\d+)" + PH_CLOSE, "g");
|
||||||
|
|
||||||
|
function panguSpace(text)
|
||||||
|
{
|
||||||
|
if (text.length <= 1 || !ANY_CJK.test(text)) { return text; }
|
||||||
|
|
||||||
|
let s = text;
|
||||||
|
|
||||||
|
/* Pre-pass：strip authored single spaces at CJK↔ANS boundaries so
|
||||||
|
the rest of the pipeline can treat the text as if it had been
|
||||||
|
written flush. */
|
||||||
|
s = s.replace(STRIP_CJK_SPACE_ANS, "$1$2");
|
||||||
|
s = s.replace(STRIP_ANS_SPACE_CJK, "$1$2");
|
||||||
|
|
||||||
|
s = s.replace(DOTS_CJK, "$1" + MARK + "$2");
|
||||||
|
s = s.replace(CJK_PUNCTUATION, "$1$2" + MARK);
|
||||||
|
s = s.replace(AN_PUNCTUATION_CJK, "$1$2" + MARK + "$3");
|
||||||
|
s = s.replace(CJK_TILDE, "$1$2" + MARK);
|
||||||
|
s = s.replace(CJK_TILDE_EQUALS, "$1" + MARK + "$2" + MARK);
|
||||||
|
s = s.replace(CJK_PERIOD, "$1$2" + MARK);
|
||||||
|
s = s.replace(AN_PERIOD_CJK, "$1$2" + MARK + "$3");
|
||||||
|
s = s.replace(AN_COLON_CJK, "$1$2" + MARK + "$3");
|
||||||
|
|
||||||
|
s = s.replace(CJK_QUOTE, "$1" + MARK + "$2");
|
||||||
|
s = s.replace(QUOTE_CJK, "$1" + MARK + "$2");
|
||||||
|
s = s.replace(QUOTE_AN, "$1" + MARK + "$2");
|
||||||
|
s = s.replace(CJK_QUOTE_AN, "$1$2" + MARK + "$3");
|
||||||
|
|
||||||
|
s = s.replace(CJK_HASH, "$1" + MARK + "$2");
|
||||||
|
s = s.replace(HASH_CJK, "$1" + MARK + "$3");
|
||||||
|
|
||||||
|
const compounds = [];
|
||||||
|
s = s.replace(COMPOUND_WORD, function (m)
|
||||||
|
{
|
||||||
|
compounds.push(m);
|
||||||
|
return PH_OPEN + (compounds.length - 1) + PH_CLOSE;
|
||||||
|
});
|
||||||
|
|
||||||
|
s = s.replace(SINGLE_LETTER_GRADE, "$1$2" + MARK + "$3");
|
||||||
|
s = s.replace(CJK_OPERATOR_ANS, "$1" + MARK + "$2" + MARK + "$3");
|
||||||
|
s = s.replace(ANS_OPERATOR_CJK, "$1" + MARK + "$2" + MARK + "$3");
|
||||||
|
|
||||||
|
s = s.replace(CJK_LESS_THAN, "$1" + MARK + "$2" + MARK + "$3");
|
||||||
|
s = s.replace(LESS_THAN_CJK, "$1" + MARK + "$2" + MARK + "$3");
|
||||||
|
s = s.replace(CJK_GREATER_THAN, "$1" + MARK + "$2" + MARK + "$3");
|
||||||
|
s = s.replace(GREATER_THAN_CJK, "$1" + MARK + "$2" + MARK + "$3");
|
||||||
|
|
||||||
|
/* Restore compound words BEFORE bracket / CJK_ANS / ANS_CJK
|
||||||
|
passes — otherwise their PUA placeholders look like neither
|
||||||
|
CJK nor AN and the boundaries silently skip. */
|
||||||
|
s = s.replace(PH_PATTERN, function (_m, idx) { return compounds[+idx] || ""; });
|
||||||
|
|
||||||
|
s = s.replace(CJK_LEFT_BRACKET, "$1" + MARK + "$2");
|
||||||
|
s = s.replace(RIGHT_BRACKET_CJK, "$1" + MARK + "$2");
|
||||||
|
s = s.replace(AN_LEFT_BRACKET, "$1" + MARK + "$2");
|
||||||
|
s = s.replace(RIGHT_BRACKET_AN, "$1" + MARK + "$2");
|
||||||
|
|
||||||
|
s = s.replace(CJK_ANS, "$1" + MARK + "$2");
|
||||||
|
s = s.replace(ANS_CJK, "$1" + MARK + "$2");
|
||||||
|
s = s.replace(S_A, "$1" + MARK + "$2");
|
||||||
|
|
||||||
|
return s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- skip ancestor 判定 ----- */
|
||||||
|
function isSkipped(node)
|
||||||
|
{
|
||||||
|
if (userIsSkipped && userIsSkipped(node)) { return true; }
|
||||||
|
let p = node.parentNode;
|
||||||
|
while (p && p.nodeType === 1)
|
||||||
|
{
|
||||||
|
if (SKIP_SET.has(p.nodeName)) { return true; }
|
||||||
|
if (p.namespaceURI === "http://www.w3.org/2000/svg") { return true; }
|
||||||
|
if (p.isContentEditable) { return true; }
|
||||||
|
if (skipAttr && p.hasAttribute && p.hasAttribute(skipAttr)) { return true; }
|
||||||
|
p = p.parentNode;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- helpers ----- */
|
||||||
|
function insertSpanAt(parent, refNode)
|
||||||
|
{
|
||||||
|
const span = document.createElement("span");
|
||||||
|
span.className = autospaceCls;
|
||||||
|
span.setAttribute("aria-hidden", "true");
|
||||||
|
span.textContent = " ";
|
||||||
|
parent.insertBefore(span, refNode);
|
||||||
|
}
|
||||||
|
function insertMarkerAfterPosition(pos)
|
||||||
|
{
|
||||||
|
const tn = pos.textNode;
|
||||||
|
const afterIdx = pos.offset + 1;
|
||||||
|
if (afterIdx >= tn.data.length)
|
||||||
|
{
|
||||||
|
insertSpanAt(tn.parentNode, tn.nextSibling);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
const split = tn.splitText(afterIdx);
|
||||||
|
insertSpanAt(split.parentNode, split);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function isAutospaceSpan(node)
|
||||||
|
{
|
||||||
|
return node && node.nodeType === 1
|
||||||
|
&& node.classList && node.classList.contains(autospaceCls);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- Pass A: per-block Pangu on tag-stripped text ----- */
|
||||||
|
function processBlockText(block)
|
||||||
|
{
|
||||||
|
const runs = [];
|
||||||
|
let curText = "";
|
||||||
|
let curMap = [];
|
||||||
|
|
||||||
|
function flushRun()
|
||||||
|
{
|
||||||
|
if (curText.length >= 2) { runs.push({ text: curText, map: curMap }); }
|
||||||
|
curText = "";
|
||||||
|
curMap = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function visit(node)
|
||||||
|
{
|
||||||
|
if (!node) { return; }
|
||||||
|
if (node.nodeType === 3)
|
||||||
|
{
|
||||||
|
if (isSkipped(node)) { return; }
|
||||||
|
const data = node.data;
|
||||||
|
for (let i = 0; i < data.length; i += 1)
|
||||||
|
{
|
||||||
|
curText += data.charAt(i);
|
||||||
|
curMap.push({ textNode: node, offset: i });
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (node.nodeType !== 1) { return; }
|
||||||
|
if (isSkipped(node)) { return; }
|
||||||
|
if (isAutospaceSpan(node)) { flushRun(); return; }
|
||||||
|
const tag = node.nodeName;
|
||||||
|
/* PILL / BLOCK / SKIP_SET 三類都中斷 run（pill 與 block 邊界
|
||||||
|
另由 Pass B / 各自子 block 處理）。 */
|
||||||
|
if (SKIP_SET.has(tag) || BLOCK_SET.has(tag))
|
||||||
|
{
|
||||||
|
flushRun();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (node.matches && node.matches(pillSelector))
|
||||||
|
{
|
||||||
|
flushRun();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
/* 樣式標籤或未知元素：透明遞迴。 */
|
||||||
|
let c = node.firstChild;
|
||||||
|
while (c) { visit(c); c = c.nextSibling; }
|
||||||
|
}
|
||||||
|
|
||||||
|
let c = block.firstChild;
|
||||||
|
while (c) { visit(c); c = c.nextSibling; }
|
||||||
|
flushRun();
|
||||||
|
|
||||||
|
for (let r = 0; r < runs.length; r += 1)
|
||||||
|
{
|
||||||
|
const text = runs[r].text;
|
||||||
|
const map = runs[r].map;
|
||||||
|
const spaced = panguSpace(text);
|
||||||
|
if (spaced === text) { continue; }
|
||||||
|
|
||||||
|
/* Walk spaced + text in parallel. 每個 MARK 在 spaced 中要麼
|
||||||
|
(a) 取代了原文同位之 single space，要麼 (b) 是純插入。 */
|
||||||
|
const actions = [];
|
||||||
|
let origIdx = 0;
|
||||||
|
let spacedIdx = 0;
|
||||||
|
while (spacedIdx < spaced.length)
|
||||||
|
{
|
||||||
|
const sc = spaced.charAt(spacedIdx);
|
||||||
|
if (sc === MARK)
|
||||||
|
{
|
||||||
|
const oc = origIdx < text.length ? text.charAt(origIdx) : null;
|
||||||
|
if (oc === " ")
|
||||||
|
{
|
||||||
|
actions.push({ before: map[origIdx - 1], space: map[origIdx] });
|
||||||
|
origIdx += 1;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
actions.push({ before: map[origIdx - 1], space: null });
|
||||||
|
}
|
||||||
|
spacedIdx += 1;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
origIdx += 1;
|
||||||
|
spacedIdx += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 倒序執行，避免 text-node 修改影響前面動作之 offset。 */
|
||||||
|
for (let i = actions.length - 1; i >= 0; i -= 1)
|
||||||
|
{
|
||||||
|
const act = actions[i];
|
||||||
|
if (!act.before) { continue; }
|
||||||
|
if (act.space)
|
||||||
|
{
|
||||||
|
const tn = act.space.textNode;
|
||||||
|
tn.data = tn.data.slice(0, act.space.offset) + tn.data.slice(act.space.offset + 1);
|
||||||
|
}
|
||||||
|
insertMarkerAfterPosition(act.before);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- Pass B: pill boundary, style-inline aware ----- */
|
||||||
|
function adjacentLogicalChar(el, direction)
|
||||||
|
{
|
||||||
|
function pickEnd(tn)
|
||||||
|
{
|
||||||
|
if (direction === -1)
|
||||||
|
{
|
||||||
|
return { textNode: tn, offset: tn.data.length - 1, ch: tn.data.charAt(tn.data.length - 1) };
|
||||||
|
}
|
||||||
|
return { textNode: tn, offset: 0, ch: tn.data.charAt(0) };
|
||||||
|
}
|
||||||
|
function descend(into)
|
||||||
|
{
|
||||||
|
let n = direction === -1 ? into.lastChild : into.firstChild;
|
||||||
|
while (n)
|
||||||
|
{
|
||||||
|
if (n.nodeType === 3 && n.data.length > 0) { return pickEnd(n); }
|
||||||
|
if (n.nodeType === 1 && STYLE_SET.has(n.nodeName) && !isAutospaceSpan(n))
|
||||||
|
{
|
||||||
|
const r = descend(n);
|
||||||
|
if (r) { return r; }
|
||||||
|
}
|
||||||
|
n = direction === -1 ? n.previousSibling : n.nextSibling;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
let n = direction === -1 ? el.previousSibling : el.nextSibling;
|
||||||
|
let p = el.parentNode;
|
||||||
|
while (true)
|
||||||
|
{
|
||||||
|
while (n)
|
||||||
|
{
|
||||||
|
if (n.nodeType === 3)
|
||||||
|
{
|
||||||
|
if (n.data.length > 0) { return pickEnd(n); }
|
||||||
|
n = direction === -1 ? n.previousSibling : n.nextSibling;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (n.nodeType === 1)
|
||||||
|
{
|
||||||
|
if (isSkipped(n)) { return null; }
|
||||||
|
if (isAutospaceSpan(n)) { return null; }
|
||||||
|
if (STYLE_SET.has(n.nodeName))
|
||||||
|
{
|
||||||
|
const r = descend(n);
|
||||||
|
if (r) { return r; }
|
||||||
|
n = direction === -1 ? n.previousSibling : n.nextSibling;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
/* Pill 或 block — 停。 */
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
n = direction === -1 ? n.previousSibling : n.nextSibling;
|
||||||
|
}
|
||||||
|
if (!p || !STYLE_SET.has(p.nodeName)) { return null; }
|
||||||
|
n = direction === -1 ? p.previousSibling : p.nextSibling;
|
||||||
|
p = p.parentNode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const PILL_NEIGHBOR = new RegExp("[A-Za-z0-9" + PANGU_CJK + "]");
|
||||||
|
|
||||||
|
function processPills(root)
|
||||||
|
{
|
||||||
|
root.querySelectorAll(pillSelector).forEach(function (pill)
|
||||||
|
{
|
||||||
|
if (isSkipped(pill)) { return; }
|
||||||
|
const parent = pill.parentNode;
|
||||||
|
if (!parent) { return; }
|
||||||
|
|
||||||
|
const prev = adjacentLogicalChar(pill, -1);
|
||||||
|
if (prev)
|
||||||
|
{
|
||||||
|
if (PILL_NEIGHBOR.test(prev.ch))
|
||||||
|
{
|
||||||
|
insertSpanAt(parent, pill);
|
||||||
|
}
|
||||||
|
else if (prev.ch === " " && prev.offset >= 1)
|
||||||
|
{
|
||||||
|
const tn = prev.textNode;
|
||||||
|
const bc = tn.data.charAt(prev.offset - 1);
|
||||||
|
if (bc !== " " && PILL_NEIGHBOR.test(bc))
|
||||||
|
{
|
||||||
|
tn.data = tn.data.slice(0, prev.offset) + tn.data.slice(prev.offset + 1);
|
||||||
|
insertSpanAt(parent, pill);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const next = adjacentLogicalChar(pill, +1);
|
||||||
|
if (next)
|
||||||
|
{
|
||||||
|
if (PILL_NEIGHBOR.test(next.ch))
|
||||||
|
{
|
||||||
|
insertSpanAt(parent, pill.nextSibling);
|
||||||
|
}
|
||||||
|
else if (next.ch === " " && next.textNode.data.length >= 2)
|
||||||
|
{
|
||||||
|
const ac = next.textNode.data.charAt(1);
|
||||||
|
if (ac !== " " && PILL_NEIGHBOR.test(ac))
|
||||||
|
{
|
||||||
|
next.textNode.data = next.textNode.data.slice(1);
|
||||||
|
insertSpanAt(parent, pill.nextSibling);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- Pass C: long English word wrap ----- */
|
||||||
|
/* 冪等性：parent 為 <span lang="…"> 直接跳過。已被本 pass 或作者標
|
||||||
|
語的英文段都會被 catch；e.g. <span lang="en-US">…</span> 雖然 lang
|
||||||
|
不等於 "en"，但 caller 已意圖標語，重複包裝無實益。 */
|
||||||
|
function isInLangSpan(node)
|
||||||
|
{
|
||||||
|
const p = node.parentNode;
|
||||||
|
if (!p || p.nodeType !== 1) { return false; }
|
||||||
|
if (p.nodeName !== "SPAN") { return false; }
|
||||||
|
return p.hasAttribute && p.hasAttribute("lang");
|
||||||
|
}
|
||||||
|
|
||||||
|
function wrapLongWordsIn(textNode, cfg)
|
||||||
|
{
|
||||||
|
const re = new RegExp("[A-Za-z]{" + cfg.minLength + ",}", "g");
|
||||||
|
const data = textNode.data;
|
||||||
|
const matches = [];
|
||||||
|
let m;
|
||||||
|
while ((m = re.exec(data)) !== null)
|
||||||
|
{
|
||||||
|
matches.push({ start: m.index, end: m.index + m[0].length });
|
||||||
|
}
|
||||||
|
if (matches.length === 0) { return; }
|
||||||
|
|
||||||
|
const frag = document.createDocumentFragment();
|
||||||
|
let cursor = 0;
|
||||||
|
for (let i = 0; i < matches.length; i += 1)
|
||||||
|
{
|
||||||
|
const mm = matches[i];
|
||||||
|
if (mm.start > cursor)
|
||||||
|
{
|
||||||
|
frag.appendChild(document.createTextNode(data.slice(cursor, mm.start)));
|
||||||
|
}
|
||||||
|
const span = document.createElement("span");
|
||||||
|
span.setAttribute("lang", cfg.lang);
|
||||||
|
span.textContent = data.slice(mm.start, mm.end);
|
||||||
|
frag.appendChild(span);
|
||||||
|
cursor = mm.end;
|
||||||
|
}
|
||||||
|
if (cursor < data.length)
|
||||||
|
{
|
||||||
|
frag.appendChild(document.createTextNode(data.slice(cursor)));
|
||||||
|
}
|
||||||
|
textNode.parentNode.replaceChild(frag, textNode);
|
||||||
|
}
|
||||||
|
|
||||||
|
function processLongWords(root, cfg)
|
||||||
|
{
|
||||||
|
const reTest = new RegExp("[A-Za-z]{" + cfg.minLength + ",}");
|
||||||
|
const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
|
||||||
|
const targets = [];
|
||||||
|
let n = walker.nextNode();
|
||||||
|
while (n)
|
||||||
|
{
|
||||||
|
if (!isSkipped(n) && !isInLangSpan(n) && reTest.test(n.data))
|
||||||
|
{
|
||||||
|
targets.push(n);
|
||||||
|
}
|
||||||
|
n = walker.nextNode();
|
||||||
|
}
|
||||||
|
for (let i = 0; i < targets.length; i += 1)
|
||||||
|
{
|
||||||
|
wrapLongWordsIn(targets[i], cfg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- Pass D: 開明式標點擠壓（句內點號半形） ----- */
|
||||||
|
/* 冪等性：parent 已是 cfg.cls 之 <span> 直接跳過。 */
|
||||||
|
function isInSqueezeSpan(node, cls)
|
||||||
|
{
|
||||||
|
const p = node.parentNode;
|
||||||
|
return !!(p && p.nodeType === 1 && p.nodeName === "SPAN"
|
||||||
|
&& p.classList && p.classList.contains(cls));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 由 node 向上找最近帶 lang 屬性之祖先，回傳小寫值（無則 null）。 */
|
||||||
|
function nearestLang(node)
|
||||||
|
{
|
||||||
|
let p = node.parentNode;
|
||||||
|
while (p && p.nodeType === 1)
|
||||||
|
{
|
||||||
|
if (p.hasAttribute && p.hasAttribute("lang"))
|
||||||
|
{
|
||||||
|
const v = p.getAttribute("lang");
|
||||||
|
if (v) { return v.toLowerCase(); }
|
||||||
|
}
|
||||||
|
p = p.parentNode;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 空白名單 → 不限；非空 → 僅最近 lang 前綴命中者擠壓（無 lang 祖先視
|
||||||
|
為不命中）。前綴以 BCP-47 子標籤邊界比對：'zh' 命中 'zh-hant'，但不
|
||||||
|
命中 'zhx'。 */
|
||||||
|
function langAllowed(node, whitelist)
|
||||||
|
{
|
||||||
|
if (!whitelist || whitelist.length === 0) { return true; }
|
||||||
|
const lang = nearestLang(node);
|
||||||
|
if (!lang) { return false; }
|
||||||
|
for (let i = 0; i < whitelist.length; i += 1)
|
||||||
|
{
|
||||||
|
const w = whitelist[i].toLowerCase();
|
||||||
|
if (lang === w || lang.indexOf(w + "-") === 0) { return true; }
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function wrapSqueezeMarksIn(textNode, cfg, re)
|
||||||
|
{
|
||||||
|
const data = textNode.data;
|
||||||
|
re.lastIndex = 0;
|
||||||
|
const frag = document.createDocumentFragment();
|
||||||
|
let cursor = 0;
|
||||||
|
let m;
|
||||||
|
while ((m = re.exec(data)) !== null)
|
||||||
|
{
|
||||||
|
const idx = m.index;
|
||||||
|
if (idx > cursor)
|
||||||
|
{
|
||||||
|
frag.appendChild(document.createTextNode(data.slice(cursor, idx)));
|
||||||
|
}
|
||||||
|
const span = document.createElement("span");
|
||||||
|
span.className = cfg.cls;
|
||||||
|
span.textContent = m[0];
|
||||||
|
frag.appendChild(span);
|
||||||
|
cursor = idx + m[0].length;
|
||||||
|
}
|
||||||
|
if (cursor < data.length)
|
||||||
|
{
|
||||||
|
frag.appendChild(document.createTextNode(data.slice(cursor)));
|
||||||
|
}
|
||||||
|
textNode.parentNode.replaceChild(frag, textNode);
|
||||||
|
}
|
||||||
|
|
||||||
|
function processPunctuationSqueeze(root, cfg)
|
||||||
|
{
|
||||||
|
const escaped = cfg.marks.map(function (c)
|
||||||
|
{
|
||||||
|
return c.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
||||||
|
}).join("");
|
||||||
|
if (!escaped) { return; }
|
||||||
|
const reTest = new RegExp("[" + escaped + "]");
|
||||||
|
const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
|
||||||
|
const targets = [];
|
||||||
|
let n = walker.nextNode();
|
||||||
|
while (n)
|
||||||
|
{
|
||||||
|
if (!isSkipped(n) && !isInSqueezeSpan(n, cfg.cls)
|
||||||
|
&& reTest.test(n.data) && langAllowed(n, cfg.langWhitelist))
|
||||||
|
{
|
||||||
|
targets.push(n);
|
||||||
|
}
|
||||||
|
n = walker.nextNode();
|
||||||
|
}
|
||||||
|
const reAll = new RegExp("[" + escaped + "]", "g");
|
||||||
|
for (let i = 0; i < targets.length; i += 1)
|
||||||
|
{
|
||||||
|
wrapSqueezeMarksIn(targets[i], cfg, reAll);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- 對外 API ----- */
|
||||||
|
function apply(root)
|
||||||
|
{
|
||||||
|
root = root || (typeof document !== "undefined" ? document.body : null);
|
||||||
|
if (!root) { return; }
|
||||||
|
|
||||||
|
/* Pass A：對每個 block 逐個處理。把 BLOCK_TAGS 轉成 selector
|
||||||
|
並對 root 之 descendants 查詢；若 root 本身是 block 也處理。 */
|
||||||
|
const blockSel = Array.from(BLOCK_SET).map(function (t) { return t.toLowerCase(); }).join(",");
|
||||||
|
if (blockSel)
|
||||||
|
{
|
||||||
|
root.querySelectorAll(blockSel).forEach(processBlockText);
|
||||||
|
}
|
||||||
|
if (root.nodeType === 1 && BLOCK_SET.has(root.nodeName))
|
||||||
|
{
|
||||||
|
processBlockText(root);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pass B */
|
||||||
|
processPills(root);
|
||||||
|
|
||||||
|
/* Pass C（預設啟用） */
|
||||||
|
if (longWordCfg) { processLongWords(root, longWordCfg); }
|
||||||
|
|
||||||
|
/* Pass D（開明式標點擠壓，預設啟用） */
|
||||||
|
if (squeezeCfg) { processPunctuationSqueeze(root, squeezeCfg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
return { apply: apply };
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- 多形 export -----
|
||||||
|
*
|
||||||
|
* 四種消費場景並存：
|
||||||
|
* ESM（Vite / Rollup / TypeScript）：使用 `export { createCjkAutospace }`，
|
||||||
|
* 可 `import { createCjkAutospace } from "./cjk-autospace.js"`；
|
||||||
|
* CommonJS（Node `require`）：使用 `module.exports`；
|
||||||
|
* Browser global / `<script>` 標籤：使用 `globalThis` 賦值；
|
||||||
|
* IIFE 串接（build.sh / Nvim peek hook 把本檔內容 cat 進單個閉包）：
|
||||||
|
* `export` 語句屬 ESM 之 module-level 語法，串入函式體內會語法錯誤，
|
||||||
|
* 故串接端須剝掉 `export {` 起始之那行（單行 `sed '/^export {/d'`
|
||||||
|
* 即可）。其餘 module.exports / globalThis 兩塊在閉包內安全（typeof
|
||||||
|
* 檢查不會 throw、globalThis 賦值無副作用）。
|
||||||
|
*
|
||||||
|
* 順序：先 CJS / globalThis（不影響語法解析），最後 ESM `export`，
|
||||||
|
* 讓串接端只需剝最後一塊。
|
||||||
|
*/
|
||||||
|
if (typeof module !== "undefined" && module.exports)
|
||||||
|
{
|
||||||
|
module.exports = { createCjkAutospace: createCjkAutospace };
|
||||||
|
}
|
||||||
|
if (typeof globalThis !== "undefined" && !globalThis.createCjkAutospace)
|
||||||
|
{
|
||||||
|
globalThis.createCjkAutospace = createCjkAutospace;
|
||||||
|
}
|
||||||
|
export { createCjkAutospace };
|
||||||
-7086
File diff suppressed because one or more lines are too long
@@ -1,463 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-Hant">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>變更紀錄（Changelog）</title>
|
|
||||||
<meta name="generated-at" content="2026-07-11">
|
|
||||||
<meta name="source" content="cjk-autospace · 變更紀錄">
|
|
||||||
<!-- RUNTIME_CSS -->
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<header class="page">
|
|
||||||
<div class="meta">
|
|
||||||
<h1>變更紀錄（Changelog）</h1>
|
|
||||||
<p class="subtitle">聚珍（Juzhen）／cjk-autospace 之版本變更紀錄。</p>
|
|
||||||
<p class="timestamp"><time>2026-07-11</time> · <span>cjk-autospace · 變更紀錄</span></p>
|
|
||||||
</div>
|
|
||||||
<div class="actions">
|
|
||||||
<!-- ACTIONS -->
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<!-- BODY -->
|
|
||||||
<p class="lede">聚珍（Juzhen）／cjk-autospace 變更紀錄。<a href="./index.html">← 回文檔</a></p>
|
|
||||||
|
|
||||||
<h2>效能第二／三層：掃描/佈局提速 ＋ 增量恢復（Tier3） <span class="badge accent">2026-07-12</span></h2>
|
|
||||||
<p>承第一層（S2+S3）。本批含掃描/佈局提速與**增量恢復**（動態頁面局部變化免全樹重掃），全程獨立複驗＋4 份真人撰寫真實文檔驗收。單元測試 130→140 全綠。</p>
|
|
||||||
<h3>掃描 / 佈局提速</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>祖先游走記憶化（中間發現＋S4）</strong>：<code>insidePill</code>／<code>isAvoided</code> 之「逐文本節點沿祖先鏈」以迭代回填記憶化（每元素恰算一次、兄弟共用），O(文本×depth)→O(元素)。掃描層 <code>el.matches()</code> 累計約降五成；深嵌套 render 進程隔離墻鐘 pre-Tier1 707ms→254ms（<strong>2.8×</strong>）。</li>
|
|
||||||
<li><strong>S1 gapTrim 對齊門</strong>：尾隨 margin 僅在右緣 flush 之對齊可見，唯 <code>left</code>／<code>start</code>(ltr) 之 ragged 右緣可整批跳過，省其 O(gaps) 次同步重排。非兩端對齊內容 gapTrim 由數千 ms 降至數十 ms；justify／center／right／RTL 保留完整算法、行為不變（真瀏覽器差分：trim 集指紋逐位相同）。</li>
|
|
||||||
</ul>
|
|
||||||
<h3>增量恢復（第三層，向下兼容 API）</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>C1 持久化 Finder</strong>：跨 render 復用元素鍵快取。正確性靠失效——新增 <code>invalidate(el)</code> 清整棵子樹快取（祖先屬性變則後代快取變脏），<code>revert</code> 自動失效其子樹。</li>
|
|
||||||
<li><strong>C3 <code>rerender(root)</code></strong>＝revert+render（局部恢復，實測編輯 400 段中一段 <strong>766×</strong>、matches 1441×）。</li>
|
|
||||||
<li><strong>C2 <code>observe</code>／<code>disconnect</code></strong>：MutationObserver 自動增量——內容/分類屬性變化重處理最近塊、新增之塊直接 render；render/revert 期間暫停觀察，自身注入絕不自觸發。</li>
|
|
||||||
<li><strong>append 修復</strong>（獨立差分複驗 IV-3 發現、單測漏掉）：向葉塊（帶 <code>jz-orphan</code>）追加子塊使其轉非葉，須撤容器陳舊 orphan。</li>
|
|
||||||
</ul>
|
|
||||||
<h3>獨立複驗 ＋ 真實文檔驗收</h3>
|
|
||||||
<ul>
|
|
||||||
<li>5 種獨立方法（差分/往返/增量≡全量/進程隔離測速/真瀏覽器 S1），皆與既有單測/基準不同源——<strong>抓到並修復 append 真 bug</strong>。</li>
|
|
||||||
<li>4 份真人撰寫真實文檔（繁體技術/簡體評論/文學對話/混排）：非空白字元多重集守恆、無字元改/增/漏/亂序，<code>revert</code> 淨移除結構、真瀏覽器整條管線零報錯。</li>
|
|
||||||
</ul>
|
|
||||||
<h3>文檔（I1/I6 收緊）</h3>
|
|
||||||
<ul>
|
|
||||||
<li>驗收浮現：<code>render→revert</code> 不還原 <code>spacing</code> 依契約規範化之贅餘作者空格（<code>在 Neovim 中</code>→<code>在Neovim中</code>）——固有、非本批引入。<strong>I1</strong> 明示此為刻意常態例外（語義不變、確刪空格且不還原）；<strong>I6</strong> 明示「邏輯等價≠逐字節」之唯一差異即被規範化之空格。README 補「<code>revert</code> 之範圍」注。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>效能第一層：掃描提速（category 記憶化 ＋ orphan 葉塊預計算） <span class="badge accent">2026-07-11</span></h2>
|
|
||||||
<p>下游效能訴求（掃描疑 O(n²)）之第一層——無狀態、保行為、無公開 API 變更之確定收益。單元測試 129→130 全綠、輸出不變。</p>
|
|
||||||
<h3>優化</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>S3 category 記憶化</strong>：<code>finder.category</code> 以 <code>WeakMap<Element, InlineCategory></code> 記憶化，砍除 <code>collectRuns</code>／<code>jiyaAdjacency</code>／<code>jinze</code>／<code>split</code> 跨 pass 對同一元素之重複 <code>el.matches()</code>（pill／isolate／avoid 選擇器）。實測 pill／isolate 密集頁面 <code>el.matches()</code> 8204→5842（約降三成，命中率 55%）。安全：單次 render 內一元素之分類恆定、且 Finder 隨 <code>makeCtx</code> 每次 render 重建 → 快取僅存活單次 render、無跨 render 失效（持久化屬另議）。</li>
|
|
||||||
<li><strong>S2 orphan 葉塊預計算</strong>：以一趟上攀預計算「非葉塊」Set 取代逐塊 <code>block.querySelector(sel)</code> 掃整棵子樹之 O(Σ塊子樹)（深塊嵌套下 O(n²)）；某塊為另一塊之最近塊祖先 ⟺ 含塊級後代，與原 querySelector 同口徑、行為等價。</li>
|
|
||||||
</ul>
|
|
||||||
<h3>亲驗與待議</h3>
|
|
||||||
<ul>
|
|
||||||
<li>亲驗：暫禁 category 快取則 <code>computeCategory</code> 由 1041 增至 2322、<code>el.matches()</code> 由 5842 增至 8204——證快取真減負而非空操作（初次插桩誤打 <code>HTMLBodyElement.prototype</code> 而漏計，改補 <code>Element.prototype.matches</code> 後為準）。</li>
|
|
||||||
<li>新發現（下一機會）：剩餘 <code>el.matches()</code> 之最大來源為 <code>insidePill</code> 之「逐文本節點沿祖先鏈 <code>pillMatches</code>」（<code>eachTextNode</code> 每文本節點一趟、未記憶化）。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>splitTreeAfter 攀升對稱守衛（opaque 中間祖先不再被克隆肢解） <span class="badge accent">2026-07-11</span></h2>
|
|
||||||
<p>下游 <code>.selection-bar-message</code> 病例：垂懸字（orphan）之段末實義字落於 opaque <code><button></code>（巢於可切 <code><span></code>）時，<code>splitElementAt</code> 僅驗頂層 span 可切；<code>splitTreeAfter</code> 逐層克隆「文本節點→top」祖先鏈時，中間 opaque button 從未複查即被克隆肢解（複製出 <code>splitoff</code> button、破壞互動元素）。<code>firstText</code>／<code>lastText</code> 守下潛（遇非可切回 <code>null</code>），攀升卻無對稱守衛——此即真正病根，下游 per-instance 迴避僅治標。</p>
|
|
||||||
<h3>修復</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>攀升守衛</strong>：<code>splitTreeAfter</code> 切分前先驗「<code>textNode.parentNode</code>…top（含 top）」整條祖先鏈皆 <code>canSplit</code>，任一層 opaque／pill／isolate／帶 id 即放棄、回退整綁（退化但安全，與下潛守衛對稱）。純新增守衛、無新克隆邏輯；jinze 之 <code>isolateBoundaryToken</code> 因下潛已守，行為不變。附帶亦杜絕中間祖先帶 <code>id</code> 之克隆重複 id。</li>
|
|
||||||
<li><strong>不變量</strong>：<code>canSplit</code> 須對「切點 textNode 至 top 之<strong>整條</strong>祖先鏈」成立、非僅 top——下潛（<code>firstText</code>／<code>lastText</code>）＋攀升（<code>splitTreeAfter</code> 守衛）雙向守。</li>
|
|
||||||
<li>單元測試 127→129 全綠（＋2）：末實義字在 opaque button（巢於可切 span）→ 綁整 span、無 <code>splitoff</code>、button 完整；退化路徑 render→revert 還原一致。亲驗——暫禁守衛則該測試於「無 splitoff」斷言失敗（證明非空通過、病根屬實）。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>逐元素標點樣式覆寫（data-jz-style／stylePolicy） <span class="badge accent">2026-07-11</span></h2>
|
|
||||||
<p>下游需求：非段落／特定範圍元素用半角式（banjiao），段落用全角／開明。原標點樣式僅由 <code>lang</code> 決定（<code>lang.policy</code>／<code>lang.style</code>），無逐元素覆寫。新增與 <code>data-jz-level</code>／<code>level.text</code> 同構之逐元素樣式機制（<code>banjiao</code> 渲染早已就緒、此為純路由，無新壓縮邏輯／CSS）。單元測試 121→127 全綠。</p>
|
|
||||||
<h3>設置格式</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>HTML 屬性</strong>：<code>data-jz-style="banjiao|kaiming|quanjiao"</code>——標於元素或任一祖先，該子樹用此樣式。</li>
|
|
||||||
<li><strong>選項</strong>：<code>lang: { stylePolicy: [{ selector, style }] }</code>——如 <code>[{ selector: "h1, h2, button, .ui", style: "banjiao" }]</code>。</li>
|
|
||||||
<li><strong>優先序</strong>：逐元素覆寫（近祖先勝、同層屬性優先於選擇器）＞ <code>lang.policy</code> ＞ <code>lang.style</code> ＞ 內建逐語言預設。屬性值非法（拼錯）則忽略、回退 lang。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>專案整理：架構一致性 ＋ 確認缺陷修復 ＋ 文檔重整 <span class="badge accent">2026-07-07</span></h2>
|
|
||||||
<p>四路並行審計（core／typeset＋CSS／設置 API／文檔）後之兩階段整理。核心：消除「透明穿越」判定之兩套口徑分裂，並修四個審計缺陷中之確認項（另一證偽、一延後）。單元測試 116→121 全綠。</p>
|
|
||||||
<h3>階段一 · 確認缺陷修復 ＋ 清理</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>jinze 冪等</strong>：二次 render（未 revert）曾產生巢狀 <code>jz-jinze</code>（違反 I6，實測 3→6）——守衛改判 <code>isJz(parent, PASS)</code>。</li>
|
|
||||||
<li><strong>pill 自身 avoid 漏檢</strong>：<code>processPills</code> 補 <code>avoidsSelf</code>——自身命中 avoid（如 <code><code data-jz-skip></code>）之 pill 曾仍被補間隙。連帶：<strong><code>CODE</code>／<code>KBD</code> 自 <code>skipTags</code> 預設移除</strong>（已由 <code>pillSelector</code> 以 pill 涵蓋；再列 skipTags 違反三分類互斥、且會抹掉普通 <code>code</code> 之 pill 兩端間隙）。若把 <code>code</code> 移出 <code>pillSelector</code>，須自行加入 <code>skipTags</code>／<code>scope.avoid</code>。</li>
|
|
||||||
<li>刪零引用死代碼（<code>createMarker</code>／<code>ANY_CJK</code>／<code>BD_ALL</code>／<code>BD_CLASS_NAMES</code>／<code>CreateOptions.attrs</code>）；死旗標 <code>biaodian</code>／<code>emphasis</code>／<code>ruby</code> 補 <code>@reserved</code> 註記。</li>
|
|
||||||
</ul>
|
|
||||||
<h3>階段二 · 架構一致性</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>透明判定單一真相源</strong>：<code>transparentInline</code> 提升為公開 <code>isTransparent</code>，邏輯文本流之遍歷原語（<code>collectRuns</code>／<code>adjacentLogicalChar</code>／<code>jiyaAdjacency</code>）共用之。<strong>未在 <code>styleInlines</code> 之未知行內標籤（如 <code><button></code>）採嚴格白名單、一律當邊界</strong>（用戶抉擇；透明須顯式登記）。分層澄清：結構切分安全 <code>canSplit</code>、行端物理版面 <code>lineedge</code> 各有正當之不同邊界、刻意不併入。</li>
|
|
||||||
<li><strong>跨透明元素邊界避頭尾</strong>（修 #3）：避頭類標點落於 <code><strong></code> 邊緣（<code>你好<strong>。世界</strong></code> 之句末點號位於 strong 首位）時，<code>forbiddenBreak</code> 經 <code>edgeCharEl</code> 穿越透明元素下探定位、render 沿透明邊緣上攀處理外層 parent，不再漏綁、誤置行首。</li>
|
|
||||||
<li><strong>avoid 排除歸一</strong>：<code>isAvoided</code> 改單一組合入口（自身或祖先），免除「<code>avoidsSelf ‖ isAvoided</code>」易漏一半之誤用（階段一 pill 漏檢即此類）。</li>
|
|
||||||
<li>小項：<code>scope.include</code> 型別去多餘 <code>| null</code>；<code>gapTrim</code> 補逐節點功能閘；<code>PASSES</code> 陣列補註執行序。</li>
|
|
||||||
<li><strong>元素分類單一入口 <code>finder.category</code></strong>（收尾）：散落各遍歷原語各自短路之分類優先序，收斂為單一分類器——一元素恰屬 avoid／pill／isolate／block／transparent／opaque 之一，優先序 <code>avoid ＞ pill ＞ isolate ＞ block ＞ transparent ＞ opaque</code>（帶 <code>data-jz-skip</code> 之 pill → avoid；同命中 pill 與 isolate → pill）。<code>isTransparent</code> ＝ <code>category==="transparent"</code>；<code>collectRuns</code>／<code>jiyaAdjacency</code> 改 <code>switch(category)</code>；<code>canSplit</code> ＝ <code>SPLITTABLE ∩ transparent</code>。行為等價（121 全綠）。</li>
|
|
||||||
</ul>
|
|
||||||
<h3>復驗後重新定性（不照單全收）</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>lineedge 攀穿 isolate——非缺陷</strong>：<code>edgeRect</code> 為物理版面測量（<code>getClientRects</code>），isolate 斷的是邏輯 run／相鄰，物理行首行尾判定須跨 <code><mark></code> 找真實相鄰內容；初評誤判、已還原。</li>
|
|
||||||
<li><strong>lineEdge／gapTrim 雙 ResizeObserver 派發序——確認非缺陷</strong>：Chrome headless 實測回調按 observer <strong>創建順序</strong>派發（ResizeObserver 規範遍歷 observers 插入序，非 observe 序；實測 seq=12）；<code>lineEdge</code>（order 90）之 observer 先於 <code>gapTrim</code>（order 92）建、故 resize 時恆先派發，<code>gapTrim</code> 之行末去隙恆基於已套用之半形版面（非陳舊態）。以註解鎖為不變量、不需改碼。</li>
|
|
||||||
<li><strong>五處幂等收斂——評估後不做</strong>：各檢查不同位置關係（祖先／父／子），無單一 <code>isJz</code> 形狀可全覆蓋，強行歸一徒增風險。</li>
|
|
||||||
</ul>
|
|
||||||
<h3>文檔（本次）</h3>
|
|
||||||
<ul>
|
|
||||||
<li>README 新增「全部選項速查」表——突出被埋沒之 <code>lang.style</code>／<code>styleInlines</code>／<code>blockTags</code>／<code>skipTags</code>（標籤名陣列）／<code>skipAttribute</code>／<code>isSkipped</code>；三分類改分層表述、avoid 改七源＋組合入口。</li>
|
|
||||||
<li>ARCHITECTURE §3.1 <code>scope.avoid</code> 過時示例、§4.1 透明分層與 avoid 七源、§4.2 標點六子類（舊列 <code>bd-cop</code>／<code>bd-sep</code>／<code>quote</code> 與實作不符）修正。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>標點擠壓句界例外（句末點號接開類保留右空白） <span class="badge accent">2026-06-13</span></h2>
|
|
||||||
<p>行內連續擠壓（機制 A）新增<strong>句界例外</strong>：句末點號（<code>。．！？</code>）後接開類引號／括號（<code>。「</code>／<code>？「</code>）時保留句末點號右側空白、僅收開類左側，全角式與開明式皆合占 <strong>1.5em</strong>（對稱於 <code>。」</code>）——下游回饋之語感修正。單元測試 113→116 全綠。</p>
|
|
||||||
<h3>變更</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>句界例外</strong>：原機制 A 對相鄰標點對 <code>(L, R)</code> 兩側獨立收——<code>L</code> 有右側空白即收、<strong>不看 R 為何類</strong>，致句末點號接開類兩側皆收、合占 1em，丟失句界視覺（句末點號收尾後緊接開類起新引文，本應保留句界間距）。修為：<code>L</code> 為句末點號（<code>bd-stop</code>）且 <code>R</code> 為開類（<code>bd-open</code>）時不收 <code>L</code>、僅收 <code>R</code> 左側 → 1.5em。</li>
|
|
||||||
<li><strong>例外僅限句末點號＋開類</strong>：句內點號 <code>，「</code>（屬同句）與雙括號 <code>」「</code>／<code>》《</code>（貼合相連）<strong>不</strong>屬句界，仍兩側皆收 1em；<code>。」</code>（句末接閉類，閉類左為墨無左空白）本就只收句末點號、合占 1.5em，未變。</li>
|
|
||||||
<li><strong>半角式不回歸</strong>：半角式句末點號由 baseline（機制 C）已收半形，句界守衛僅跳過 adjacency 之重複追加、<strong>不移除</strong> baseline 之 <code>jz-half</code>；32 個可壓縮標點於半角式仍全半形（實測 0 回歸）。非可壓縮 <code>·・‧</code>／<code>…—</code> 各式皆全寬，屬設計。</li>
|
|
||||||
</ul>
|
|
||||||
<h3>範圍</h3>
|
|
||||||
<ul>
|
|
||||||
<li>唯一改動點 <code>jiyaAdjacencyPass.squeeze()</code>（<code>src/typeset/jiya.ts</code>）加 <code>stopBeforeOpen</code> 守衛；行端擠壓 <code>lineedge</code>、baseline 政策、<code>jinze</code>／<code>orphan</code>／<code>spacing</code> 皆不波及（純視覺寬度、無結構變更）。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>行內元素三分類（KaTeX 肢解修復）＋ v1 相容層移除 <span class="badge accent">2026-06-12</span></h2>
|
|
||||||
<p>下游問題六（KaTeX 公式被禁則綁定肢解）修復：確立行內元素<strong>三分類</strong>口徑（透明／隔離／整體），所有遍歷原語共用同一判定。v1 相容層隨最後一批消費端遷移完成而移除。單元測試 101→112 全綠。</p>
|
|
||||||
<h3>修復（下游問題六）</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>Bug：jinze 透明下潛肢解 pill</strong>。行內公式緊鄰禁則標點（<code>…$x$，</code>）時，jinze 為綁鄰字下潛 <code>.katex</code>——KaTeX 全樹皆 <code><span></code>，舊版<strong>僅憑標籤名判透明</strong>，把公式內側末字連同完整殼層逐層克隆切出（<code>splitoff</code>），上標漂移錯位；<code>pillSelector</code>／<code>skipAttribute</code>／<code>scope.avoid</code> 三層防護全被刺穿。復現另揭兩向量：相鄰兩 pill 時 <code>descend</code> 刺穿致 <code>jz-hws</code> 插入公式內部；pill 內部標點被 jiya charify。</li>
|
|
||||||
<li><strong>根因一：判透明以標籤名而非元素</strong>。<code>transparentInline(el)</code> 改以元素判定——先排除 pill／isolate／avoid 再查標籤集；<code>core/split</code> 之 <code>canSplit</code> 諮詢 finder（pill／isolate／avoid 一律不可切 → 退化<strong>整元素綁定</strong>——pill 即「作為原子鄰字單位整體綁入 <code>jz-jinze</code>」之期望行為）。</li>
|
|
||||||
<li><strong>根因二：avoid 僅查祖先</strong>。新增 <code>avoidsSelf(el)</code> 自身判定——元素自身命中 <code>scope.avoid</code>／<code>skipAttribute</code>／<code>data-jz-skip</code> 時即為邊界（舊版被當透明穿越，防護形同虛設）。</li>
|
|
||||||
<li><strong>根因三：descend 越界跳找</strong>。<code>adjacentLogicalChar</code> 之 <code>descend</code> 改三態（邊界字／無內容續找兄弟／<strong>blocked</strong> 終止）——遇 pill／isolate／avoid 不可跳過續找更遠之字。</li>
|
|
||||||
<li><strong>pill 內部全面不可見</strong>：<code>eachTextNode</code> 過濾 <code>insidePill</code>——pill 內部不 charify、不插間隙、不做長詞包裝（舊版消費端自加之 pill 如 <code>.katex</code> 內部曾被直接變更）。</li>
|
|
||||||
</ul>
|
|
||||||
<h3>新增：行內元素三分類（§4.1）</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>透明</strong>（<code>styleInlines</code> ＋ <code>jz-*</code>）：穿越、run 延續、禁則可克隆切分——<code>strong</code>／<code>em</code> 等純樣式。</li>
|
|
||||||
<li><strong>隔離</strong>（<code>isolateSelector</code>，<strong>新增選項</strong>，預設 <code>"mark"</code>，<code>""</code> 停用）：邊界斷 run／斷相鄰／不可切分、<strong>兩端補隙</strong>（同 pill），<strong>內部照常處理</strong>（自成脈絡）——帶背景色之 <code><mark></code> 等盒樣式行內（切分背景盒有可見接縫，<code>MARK</code> 並自可切白名單移除）。</li>
|
|
||||||
<li><strong>整體</strong>（<code>pillSelector</code>）：內部對一切 pass 不可見，禁則時整體綁入——<code>code</code>／<code>kbd</code>、行內公式 <code>.katex</code>、引用標 <code>.cite-ref</code> 等宜納入。</li>
|
|
||||||
<li>spacing Pass B 邊界選擇器擴為 <strong>pill ∪ isolate</strong>；jiyaAdjacency 對 isolate 斷相鄰而內部自成脈絡；orphan 補 avoid 塊不綁（舊漏判）。</li>
|
|
||||||
</ul>
|
|
||||||
<h3>移除：v1 相容層</h3>
|
|
||||||
<ul>
|
|
||||||
<li>最後一批 v1 消費端遷移 v2 API 完成，<code>src/compat/v1.ts</code>（<code>createCjkAutospace</code>）、IIFE 全域別名、死選項 <code>autospaceClass</code>（經查從未被任何 pass 讀取）一併移除；不變量 I8 退役。v1 原始碼保存於 <code>v1-autospace</code> 分支。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>行內排版透明性修復 ＋ 標點懸掛移除 <span class="badge accent">2026-06-11</span></h2>
|
|
||||||
<p>修復兩個下游 Bug（同源於「行內元素對排版透明」原則在各遍歷原語口徑不一）＋三項同根隱患審計；並把上一輪「停用」之標點懸掛<strong>正式移除</strong>（負 margin 程式碼／CSS／型別一併刪）。單元測試 90→101 全綠。</p>
|
|
||||||
<h3>修復</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>Bug：pill 前標點誤加間隙</strong>（如 <code>漢字。<code></code>）。根因：<code>finder.adjacentLogicalChar</code> 之 <code>descend</code> 遇不透明之 <code>jz-char</code> 既不進入亦不終止、而<strong>跳過</strong>它越過標點取到更前之漢字，誤補 <code>jz-hws</code>。修復＝<code>isTransparentInline</code> 補 <code>JZ-CHAR</code>／<code>JZ-INNER</code>，<code>descend</code> 遂回傳標點（非 pill 鄰字、不補隙），與 <code>collectRuns</code> 之既有透明遞迴一致。</li>
|
|
||||||
<li><strong>Bug：行內樣式元素整體掉行</strong>（<code><strong>很長一串</strong>，</code> 把整串粗體塞進 <code>nowrap</code> inline-block，行末放不下即整體掉行、上行留巨大空隙）。新增 <code>core/split.ts</code> 之克隆切分：沿祖先鏈把邊界詞元剝入淺克隆（保留標籤／class／style／lang、去 id；標 <code>data-jz-kind="splitoff"</code>），禁則／垂懸字只綁該克隆（最小綁定），原元素餘部留原位、渲染無縫。<code>revertPass</code> 增延後階段把 splitoff 併回原元素（先解包 wrap、後併 splitoff），<code>render→revert</code> 還原一致。純樣式標籤白名單可切，<code>a</code>／<code>abbr</code>／<code>ruby</code>／帶 id 退化整綁。</li>
|
|
||||||
<li><strong>審計（同根隱患）</strong>：T4 <code>lineedge</code> 之行端攀爬集改由 <code>options.finder.styleInlines</code> <strong>派生</strong>（棄硬編碼子集，免遺漏 <code>ins</code>／<code>del</code>／<code>sub</code> 等致行端誤判）；T5 <code>jiyaAdjacency</code> 遇 pill 斷相鄰、不穿越；T6 <code>spacing</code> processPills 補 per-node 功能閘（<code>data-juzhen-off="spacing"</code> 區域內不補隙）。</li>
|
|
||||||
</ul>
|
|
||||||
<h3>標點懸掛：實作後停用 → 正式移除</h3>
|
|
||||||
<p>純 CSS 手段（負 margin／相對位移／零寬盒）經實測為<strong>機制級死路</strong>，已移除（負 margin 之 <code>lineedge</code> 程式碼／<code>jz-hang-*</code> CSS／<code>LineEndMode</code>／<code>lineEnd</code>／<code>features.hanging</code> 一併刪）。行端僅餘半形擠壓（<code>jz-half-le</code>）。</p>
|
|
||||||
<ul>
|
|
||||||
<li><strong>寬度守恆論證</strong>：行端標點盒若保持非零寬，則墨色出去多少、版心內就空出多少（行末實義字無法齊版心右緣）；若收為零寬，則釋放一整字寬、斷行器把下一字拉上本行與標點重疊（且 <code>justifyAtoms</code> 預設之 inline-block 下負 margin 被 justify 吸收）。<strong>CSS hack 接觸不到斷行器，此恒等式無解。</strong></li>
|
|
||||||
<li><strong>唯一正解＝原生</strong> <code>hanging-punctuation</code>，惟 Chrome／Firefox 至今不支援（僅 Safari），且 <code>jz-char</code> 為 inline-block 原子非文本、原生懸掛不作用之。未來若做須是繞開 jz-char 的「原生管線」新功能（<code>text-spacing-trim</code> ＋ <code>hanging-punctuation</code>，按能力門控），與已移除碼無共享，故不保留休眠碼。</li>
|
|
||||||
<li><code>hanging</code> 公開選項保留為 <strong>@deprecated no-op</strong>（API 相容；測試覆蓋 option／<code>data-juzhen</code>／<code>blocks</code> 各路徑皆不產生 <code>jz-hang-*</code> 且輸出與不傳一致）。詳見 <code>ARCHITECTURE §6.5.6</code>。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>功能分級 ＋ 垂懸字（標點懸掛停用） <span class="badge accent">2026-06-09</span></h2>
|
|
||||||
<p>ARCHITECTURE §6.5：功能分級、垂懸字（方案 C）落地工作良好；原計劃之標點懸掛經實測<strong>確認不可行、全面停用</strong>。共 90 單元測試全綠（含懸掛防逃逸覆蓋）。</p>
|
|
||||||
<h3>新增</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>功能分級（文本級 vs 段落級）</strong>：把已實作功能切為兩級——<strong>文本級</strong>（中西間隙 <code>spacing</code>、標點擠壓 <code>jiya</code>，任意文本片段適用）與<strong>段落級</strong>（禁則 <code>jinze</code>、垂懸字 <code>orphan</code>、長詞 <code>longWord</code>，需行／段布局）。塊級元素預設全功能；<code>data-jz-level="text"</code> 子樹（最近祖先勝）或選項 <code>level:{text:"選擇器"}</code> 標記之元素（標題／按鈕／UI）僅跑文本級。實作為 <code>Finder.levelFor</code>／<code>levelAllows</code> ＋ 各 pass <code>level</code> 元數據；段落級 pass（含 charify 之 longWord）逐元素受閘。<code>spacing</code> 補單元素 root 支援（行內／非塊 root 亦處理）。</li>
|
|
||||||
<li><strong>垂懸字避免 <code>orphan</code>（方案 C，斷行層無測量，order 70）</strong>：段末行 CJK 實義字 ≥ N（預設 2；標點／符號不計）。把段末「第 N 個實義字起至段末」（含尾隨標點）包入 <code>jz-orphan</code>（<code>white-space:nowrap</code>），整體不可斷 → 末行恒含之 ⇒ 末行實義字 ≥ N，任意寬度／字型成立、無需量測。邊界字落於行內元素內時綁定整個塊級直接子（跨 <code>jz-jinze</code> 攀爬、不切割）。<strong>預設開 chars=2</strong>（<code>orphan:false</code> 關）；段落級，<code>data-jz-level="text"</code> 跳過。</li>
|
|
||||||
<li><strong>行端模式重構 ＋ 行歸屬判定 bug 修正</strong>：lineedge 行端處理抽象為可配模式（<code>squeeze</code>／hang／none），現有行端半形＝<code>squeeze</code>、保留並改善。修「行歸屬判定」bug：<code>jz-char</code> 為 inline-block，其行盒 <code>top</code> 與相鄰純文本字形 <code>top</code> 因基線差約 5px、遠小於行高卻超舊容差（EPS=4px），致同行誤判為下一行；改判「垂直區間」（下一行＝<code>b.top ≥ a.bottom</code>、上一行＝<code>b.bottom ≤ a.top</code>，容 2px）。</li>
|
|
||||||
</ul>
|
|
||||||
<h3>標點懸掛：實作後全面停用</h3>
|
|
||||||
<p>原計劃之標點懸掛（行端標點凸出版心）經 headless ＋ 真實瀏覽器實測<strong>確認純負 <code>margin</code> 機制不可行</strong>，已全面停用（<code>hanging</code> 選項仍被接受但無任何效果）。</p>
|
|
||||||
<ul>
|
|
||||||
<li><strong>不可行原因</strong>：① 句號墨色偏字框左下角，安全凸出量（< 1 個 CJK 字寬 1em）只把空白半框推出版心、墨色仍在內（視覺不懸掛）；② 凸出滿 1em 釋放一整字寬、把下一字拉上本行致<strong>重疊</strong>；③ 與 <code>inline-block</code> 對齊原子互斥（<code>justifyAtoms:true</code> 下負 margin 被 justify 吸收）；④ <code>ResizeObserver</code> 重排時兩階段標記錯亂。</li>
|
|
||||||
<li><strong>三重防逃逸</strong>：① <code>index</code> 鎖 <code>lineEnd:"squeeze"</code>（忽略 <code>hanging</code> 選項）；② <code>modeForChar</code> 無條件降 squeeze；③ <code>applyEdge</code> 之 <code>HANG_ENABLED=false</code> 總開關。縱使下游以 <code>hanging</code>／<code>data-juzhen</code>／<code>blocks</code> 任何方式要求亦不啟用（單元測試覆蓋各路徑皆不產生 <code>jz-hang-*</code>）。</li>
|
|
||||||
<li><strong>未來路徑</strong>：原生 CSS <code>hanging-punctuation</code> 為正解，待 Chrome 支援（現僅 Safari）並解決與 inline-block 原子衝突。hang 之程式碼、CSS、型別保留休眠。詳見 <code>ARCHITECTURE §6.5.6</code>。</li>
|
|
||||||
</ul>
|
|
||||||
<h3>工具</h3>
|
|
||||||
<ul>
|
|
||||||
<li><code>demo/showcase.html</code>（新增）：定寬文本框並排對照，逐場景演示功能分級與垂懸字（關閉/開啟孤字、chars=3、標點不計入 N）。</li>
|
|
||||||
<li><code>demo/resize-check.html</code>：增垂懸字（<code>jz-orphan</code> 描框 ＋ 關閉對照）拖曳檢查區。兩頁均不含懸掛（已停用）。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>標點挤压一致性 <span class="badge accent">2026-06-04</span></h2>
|
|
||||||
<h3>新增／修復</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>全角句點 <code>．</code> 納入句末標點</strong>：<code>BD_STOP</code> 由 <code>。！？</code> 擴為 <code>。．！？</code>——納入全角句點 <code>．</code>（U+FF0E，異於表意句號 <code>。</code> U+3002）。實測 Noto CJK SC／TC 之 <code>halt</code> 皆覆蓋、挤压收半形 advance 0.5em，與 <code>。</code> 一致；<code>inkBias</code> 同步補（簡 left／繁 center）。政策行為同 <code>。！？</code>：<strong>全角式與開明式句末保持全角 1em</strong>，banjiao（或鄰接被收）挤半。設計原則：<code>halt</code> 即字型之「挤压意願」，字型不提供某標點 <code>halt</code>（字形占滿、不宜挤）則信任字型、保持全角不強挤。</li>
|
|
||||||
<li><strong>連續標點挤压規則：雙側獨立 ＋ 透明穿越</strong>（修正既有不一致）。規則：相鄰兩標點，<strong>對每一標點</strong>獨立判斷——若其「有空白之側」緊鄰另一標點即收半。原為「二選一只收一側」，致 <code>，「</code> 全角式誤為 1.5em；修後 <code>，「</code> <strong>全角式與開明式皆 1em</strong>、<code>。」</code> <strong>全角式 1.5em／開明式 1em</strong>、<code>·—</code> 兩式皆 2em（不宜挤）。並改「同 parent 直接兄弟」掃描為<strong>從 root 之透明遍歷</strong>（穿越 <code>strong</code>／<code>em</code> 等行內邊界、block／avoid 斷相鄰），使跨 inline 邊界之連續標點亦正確配對（原漏致達 2em）。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>字符分類規則集 <span class="badge accent">2026-06-04</span></h2>
|
|
||||||
<h3>新增</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>可配置字符分類（<code>charClass</code>）</strong>：把散落各 pass 之硬編碼分類（中文 CJK／西文 ANS／全寬標點 BD_* 子類）統一抽象為<strong>規則集</strong>，內置默認即現狀值，消費端經 <code>options.charClass</code>（<code>{ cjk?, western?, biaodian?:{stop,pause,open,close,middle,liga} }</code>）<strong>追加擴充</strong>，覆寫 <code>spacing</code>／<code>jiya</code>／<code>jinze</code> 之分類判定。動機：未分類符號（如二點省略 <code>‥</code> U+2025）——不 charify／不挤；以 <code>charClass:{biaodian:{stop:"‥"}}</code> 即可歸入對應類。<strong>向下兼容</strong>：不傳則行為與內置完全一致、各實例隔離（覆寫不污染默認）。v1 為追加語義（不重分類／移除內置）；結構性 ASCII 不開放。<code>spacing</code> 之間隙正則改由規則集 per-instance 編譯。測試 66 通過（含 9 條 charClass）。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>下游回饋修復批次 <span class="badge accent">2026-06-03</span></h2>
|
|
||||||
<p>聚焦 Peek.nvim 等下游回饋之原子透明與中西間隙正確性，皆以真實 Chromium 量測驗證（jsdom 之 TreeWalker／offset 失真，不可信）。</p>
|
|
||||||
|
|
||||||
<h3>修復</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>原子透明（段落繼承屬性漏溢）</strong>：<code>jz-*</code> inline-block 原子對消費端段落樣式透明——歸零會被原子重複套用之 <code>text-indent</code>／<code>hanging-punctuation</code>（過套用），並令原子 <code>text-decoration: inherit</code> 以接續段落下劃線（欠套用）。段落首行縮排正常、下劃線連續不斷，消費端無需配置。</li>
|
|
||||||
<li><strong>中西間隙 · <code>gapTrim</code> 自我應驗</strong>：行末去隙原依「後字是否在更低行」判定，而後字落點受間隙自身（及下游間隙）之 <code>margin</code> 推擠，致行中間隙被誤 trim——表現為容器寬相關之「最後一個間隙消失」、行內 <code>code</code> pill 跨行時右側間隙消失。改為「起始全部 trim、由左至右逐一定案」，量測不受任何 <code>margin</code> 污染。</li>
|
|
||||||
<li><strong>中西間隙 · 西文字集完整化</strong>：補入貨幣符號（<code>€</code> 等 U+20A0–20BF）、拉丁擴充 A/B（拼音聲調 ā ǎ ē）、西里爾、數學運算符，並把希臘補全至含 α-ω。鄰接 CJK 之手工空格遂正規化、邊界補隙。列舉法以 <code>\uXXXX</code> 表示、無需 regex flag，相容 2016／Windows 10 時代瀏覽器。</li>
|
|
||||||
<li><strong>標點誤隙</strong>：全角省略號 …… 後接 CJK 不再誤補隙（<code>DOTS_CJK</code> 移除 <code>|…</code>）；收尾彎引號 ” 後接拉丁／數字不再補隙（移除 pangu <code>QUOTE_AN</code> 偏例，與 」』）》】〕 等所有收尾標點一致）。全部常用中文標點 × 簡繁共 104 例稽核，CJK 間皆 0 誤隙。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3>變更</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>字型移出聚珍管理</strong>：字型屬消費端領域，聚珍不再內建任何 <code>font-family</code>／字型堆疊（移除 <code>_lang.css</code>，<code>dist/juzhen.css</code> 零字型規則）。逐語言字型完全由消費端 CSS 設定（範式見文檔「字型與 locl」）。聚珍僅守三項非管理性本分：<code>jz-* { font: inherit }</code> 使原子繼承消費端字型、不強加；半形 <code>font-feature-settings</code> 顯式併入 <code>"locl" 1</code>（連同 <code>halt</code>）確保泛 CJK 字型之地域標點字形不因設 halt 而失；render 只讀不改 <code>lang</code>。halt／margin 兩模式皆已驗證字型繼承與 locl 正常。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3>工具</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong><code>demo/resize-check.html</code></strong>：可拖曳容器檢查頁——拖動方框寬度，驗證中西間隙在各寬度下恆穩、標點無誤隙；可切 <code>justify</code> 與「顯示間隙」描邊。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>v2 切片 1 · 增補 <span class="badge accent">2026-06</span></h2>
|
|
||||||
<p>切片 1 之上的修補與強化，聚焦標點半形對缺 <code>halt</code> 字型之支援，及下游回饋之邊界／分頁器修復。</p>
|
|
||||||
|
|
||||||
<h3>新增</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>標點半形 <code>margin</code> 後備模式</strong>（缺 OpenType <code>halt</code> 之字型）：<code>jiya.halfWidth: "halt"</code>（預設）｜<code>"margin"</code>。<code>margin</code> 以 <code>width:0.5em</code> ＋字身依墨色偏側溢出定位，於 CSS 盒模型重現 <code>halt</code> 之半形 advance（真 0.5em；相鄰標點各 0.5em、合佔 1em，無負 margin 之鄰接疊加／單側重疊）。模式由 <code>data-jz-halfwidth</code> 子樹屬性決定，可逐區塊／逐 <code>lang</code>（含 halt-island 反置）。</li>
|
|
||||||
<li><strong>字形偏側表 <code>inkBias</code></strong>：依字身墨色中心給 <code>left／center／right／full</code>；彎引號／角括號／尖括號偏一側、圓方括號近中。參考表據方正書宋 GBK 實測，可經 <code>jiya.bias</code> 逐 <code>lang</code> 逐字覆寫。</li>
|
|
||||||
<li><strong>字型適配工具與工作流</strong>：<code>tools/measure-bias.py</code>（量 glyph ink 中心、產偏側建議表）＋文檔之「字型適配工作流」。<code>demo/fallback.html</code>：方正書宋 GBK 對照 halt 失效 vs margin 生效。</li>
|
|
||||||
<li><strong><code>justifyAtoms</code> 選項</strong>：預設 <code>true</code>；設 <code>false</code> 時 <code>jz-char</code>／<code>jz-jinze</code> 改 <code>display:inline</code>，相容分頁器（Paged.js）之對齊引擎（<code>halt</code> 半形與禁則 <code>nowrap</code> 保留）。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3>修復</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>字型不覆寫消費端</strong>：<code>_lang.css</code> 之 Noto 字型堆疊改為純後備——全包 <code>:where()</code> 零特異度、只命中帶 <code>lang</code> 屬性之元素、不直接覆寫標點字面容器 <code>jz-inner</code>。消費端 <code>font-family</code> 恆優先，標點隨之以消費端字型渲染（修正先前標點被強制換成 Noto 之缺陷）。</li>
|
|
||||||
<li><strong>pill 緊鄰標點之左緣間隙</strong>：<code>adjacentLogicalChar</code> 透明穿越 <code>jz-jinze</code>（同 <code>jz-hws</code>／樣式行內）→ pill 後接 CJK 標點時，左緣 <code>jz-hws</code> 與作者空格剝除復原。</li>
|
|
||||||
<li><strong>CJK↔CJK 贅餘作者空格</strong>：含跨 inline 標籤者一律剝除、不留隙，與 CJK↔西文之邊界正規化一致（全形空格 U+3000 不動）。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3>已知限制</h3>
|
|
||||||
<ul>
|
|
||||||
<li><code>margin</code> 後備半形依賴 <code>inline-block</code>（<code>width:0.5em</code>），與 <code>justifyAtoms:false</code> 不可兼得——分頁器場景請用含 <code>halt</code> 之字型。</li>
|
|
||||||
<li><code>margin</code> 偏側為三檔量化（0／0.25／0.5em）之近似；字形極端者須以 <code>jiya.bias</code> 逐字微調。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>v2.0.0 <span class="badge accent">切片 1</span> · 從零重寫</h2>
|
|
||||||
<p>依 <code>ARCHITECTURE.md</code> 契約，從零重寫為「現代簡／繁中文網頁排版套件」。倉庫名 <code>cjk-autospace</code> 不變；公開 API 為 <code>createJuzhen</code> ／全域 <code>Juzhen</code>；自訂元素前綴 <code>jz-</code>。v1 完整保留於 <code>v1-autospace</code> 分支。</p>
|
|
||||||
|
|
||||||
<h3>新增</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>核心引擎</strong>：<code>finder</code>（遍歷／avoid／<code>scope.include</code>／邏輯 run／pill 鄰字／分塊閘 <code>featureEnabledFor</code>）、<code>unicode</code>（字元表＋標點子類＋字形側位）、<code>locale</code>（語言分類＋全角／開明政策）、<code>dom</code>（<code>jz-*</code> 工廠＋可還原標記）、<code>pass</code> 聚合管線。</li>
|
|
||||||
<li><strong>中西間隙</strong>（margin 模型）：包裹邊界左側字、以 <code>margin-right</code> 留隙，<strong>不注入空白字元</strong> → <code>textContent</code> 完全不變、複製緊湊、<code>justify</code> 不暴增、不撐框、行首乾淨。<code>gapTrim</code> layout pass 行末去隙以齊右。</li>
|
|
||||||
<li><strong>標點擠壓</strong>：全角式／開明式／半角式，三機制（baseline 政策＋行內連續擠壓＋行端擠壓）。半形以字型 OpenType <code>halt</code> 渲染。全域 <code>lang.style</code> ＋逐 <code>lang</code> <code>policy</code>。</li>
|
|
||||||
<li><strong>禁則（避頭尾）</strong>：閉類／點號綁前一字、開類綁後一字，以詞元為邊界、長引文中段可斷；兼作 <code>justify</code> 綁定。</li>
|
|
||||||
<li><strong>長英文詞</strong>：<code><span lang></code> ＋ <code>hyphens</code> 原生斷詞。</li>
|
|
||||||
<li><strong>justify 句末單份間距</strong>：<code>jz-char</code> inline-block 原子化。</li>
|
|
||||||
<li><strong>v1 相容層</strong>：<code>createCjkAutospace().apply()</code> 映射；IIFE 全域別名。</li>
|
|
||||||
<li><strong>構建／測試</strong>：esbuild（ESM／IIFE／CSS）＋ tsc（d.ts）；jsdom 測試；<code>demo/</code> 簡繁並列＋justify＋標點寬度量測。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3>相對 v1 之改進</h3>
|
|
||||||
<ul>
|
|
||||||
<li>中西間隙複製乾淨（<code>textContent</code> 不變；v1 之 <code><span></code> 真實空格會被選取）。</li>
|
|
||||||
<li>擠壓由「<code>halt</code> 套整段＝半角式」進化為依 <code>lang</code> 之全角／開明／半角，且加入行內連續與行端擠壓。</li>
|
|
||||||
<li>新增禁則避頭尾、justify 句末單份間距、跨瀏覽器一致策略與顯式禁用層。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>v1（cjk-autospace） · v1-autospace 分支</h2>
|
|
||||||
<p>Pangu.js v7.2.1 風格之 CJK↔Latin 邊界自動間距 shim，工廠 <code>createCjkAutospace(options).apply(root)</code>。</p>
|
|
||||||
<ul>
|
|
||||||
<li>Pass A：跨樣式邊界中西間隙（marker span 含真實空格 ＋ <code>user-select:none</code>）。</li>
|
|
||||||
<li>Pass B：pill（<code>code</code>／<code>kbd</code>）邊界間隙。</li>
|
|
||||||
<li>Pass C：長英文詞 <code><span lang></code> ＋ <code>hyphens</code>。</li>
|
|
||||||
<li>Pass D：開明式標點擠壓（句內點號 <code>font-feature-settings:"halt"</code> 半形）。</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="page">
|
|
||||||
<p>本頁由聚珍排版工程記錄。所有文檔操作均於 docs 分支進行；main 僅存一份未追蹤之本地鏡像。</p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- RUNTIME_SPRITE -->
|
|
||||||
|
|
||||||
<script type="text/markdown" id="md-source">
|
|
||||||
# 變更紀錄（Changelog）— 聚珍（Juzhen）／cjk-autospace
|
|
||||||
|
|
||||||
## 效能第二／三層：掃描/佈局提速 ＋ 增量恢復（Tier3）（2026-07-12）
|
|
||||||
|
|
||||||
承第一層（S2+S3）。含掃描/佈局提速與增量恢復（動態頁面局部變化免全樹重掃），全程獨立複驗＋4 份真人撰寫真實文檔驗收。測試 130→140 全綠。
|
|
||||||
|
|
||||||
### 掃描 / 佈局提速
|
|
||||||
- 祖先游走記憶化（中間發現＋S4）：insidePill／isAvoided 之「逐文本節點沿祖先鏈」迭代回填記憶化，O(文本×depth)→O(元素)。el.matches() 約降五成；深嵌套 render 進程隔離墻鐘 707ms→254ms（2.8×）。
|
|
||||||
- S1 gapTrim 對齊門：尾隨 margin 僅右緣 flush 之對齊可見，唯 left／start(ltr) 可整批跳過、省 O(gaps) 次重排。非兩端對齊 gapTrim 數千 ms→數十 ms；justify/center/right/RTL 行為不變（真瀏覽器差分 trim 集逐位相同）。
|
|
||||||
|
|
||||||
### 增量恢復（第三層，向下兼容 API）
|
|
||||||
- C1 持久化 Finder：跨 render 復用元素鍵快取；正確性靠失效——invalidate(el) 清整棵子樹快取，revert 自動失效其子樹。
|
|
||||||
- C3 rerender(root)＝revert+render（編輯 400 段中一段 766×、matches 1441×）。
|
|
||||||
- C2 observe/disconnect：MutationObserver 自動增量，內容/分類屬性變化重處理最近塊、新增之塊直接 render；render/revert 期間暫停觀察、不自觸發。
|
|
||||||
- append 修復（IV-3 差分複驗發現、單測漏掉）：向葉塊（帶 jz-orphan）追加子塊使其轉非葉，須撤容器陳舊 orphan。
|
|
||||||
|
|
||||||
### 獨立複驗 ＋ 真實文檔驗收
|
|
||||||
- 5 種獨立方法（差分/往返/增量≡全量/進程隔離測速/真瀏覽器 S1），與既有單測/基準不同源——抓到並修復 append 真 bug。
|
|
||||||
- 4 份真人撰寫真實文檔：多重集守恆、無字元改/增/漏/亂序，revert 淨移除結構、真瀏覽器整條管線零報錯。
|
|
||||||
|
|
||||||
### 文檔（I1/I6 收緊）
|
|
||||||
- 驗收浮現 render→revert 不還原 spacing 規範化之贅餘作者空格（在 Neovim 中→在Neovim中）——固有、非本批引入。I1 明示此為刻意常態例外；I6 明示「邏輯等價≠逐字節」之唯一差異即被規範化之空格。README 補「revert 之範圍」注。
|
|
||||||
|
|
||||||
## 效能第一層：掃描提速（category 記憶化 ＋ orphan 葉塊預計算）（2026-07-11）
|
|
||||||
|
|
||||||
下游效能訴求（掃描疑 O(n²)）之第一層——無狀態、保行為、無公開 API 變更。測試 129→130 全綠、輸出不變。
|
|
||||||
|
|
||||||
### 優化
|
|
||||||
- S3 category 記憶化：finder.category 以 WeakMap<Element,InlineCategory> 記憶化，砍除各遍歷原語跨 pass
|
|
||||||
對同一元素之重複 el.matches()。實測 pill/isolate 密集頁 el.matches() 8204→5842（約降三成、命中率 55%）。
|
|
||||||
安全：單次 render 內分類恆定、Finder 每次 render 重建 → 快取僅存活單次 render、無跨 render 失效。
|
|
||||||
- S2 orphan 葉塊預計算：以一趟上攀預計算「非葉塊」Set 取代逐塊 block.querySelector(sel) 掃子樹之
|
|
||||||
O(Σ塊子樹)（深塊嵌套 O(n²)）；某塊為另一塊之最近塊祖先 ⟺ 含塊級後代，與原 querySelector 同口徑、等價。
|
|
||||||
|
|
||||||
### 亲驗與待議
|
|
||||||
- 亲驗：暫禁 category 快取則 computeCategory 1041→2322、el.matches() 5842→8204（初次插桩誤打
|
|
||||||
HTMLBodyElement.prototype 漏計，改補 Element.prototype.matches 後為準）。
|
|
||||||
- 新發現（下一機會）：剩餘 el.matches() 最大來源為 insidePill 之逐文本節點沿祖先鏈 pillMatches（未記憶化）。
|
|
||||||
|
|
||||||
## splitTreeAfter 攀升對稱守衛（opaque 中間祖先不再被克隆肢解）（2026-07-11）
|
|
||||||
|
|
||||||
下游 .selection-bar-message 病例：垂懸字段末實義字落於 opaque `<button>`（巢於可切 `<span>`）時，splitElementAt 僅驗頂層 span，splitTreeAfter 逐層克隆「文本節點→top」祖先鏈時中間 opaque button 從未複查即被克隆肢解（複製出 splitoff button）。firstText／lastText 守下潛，攀升卻無對稱守衛——真正病根，下游 per-instance 迴避僅治標。
|
|
||||||
|
|
||||||
### 修復
|
|
||||||
- 攀升守衛：splitTreeAfter 切分前先驗「textNode.parentNode…top（含 top）」整條祖先鏈皆 canSplit，任一層 opaque／pill／isolate／帶 id 即放棄、回退整綁（與下潛守衛對稱）。純新增守衛、無新克隆邏輯；jinze 之 isolateBoundaryToken 因下潛已守、行為不變。附帶杜絕中間祖先帶 id 之克隆重複 id。
|
|
||||||
- 不變量：canSplit 須對「切點 textNode 至 top 之整條祖先鏈」成立、非僅 top——下潛（firstText／lastText）＋攀升（splitTreeAfter 守衛）雙向守。
|
|
||||||
- 測試 127→129 全綠（＋2）：末實義字在 opaque button（巢於可切 span）→ 綁整 span、無 splitoff、button 完整；退化路徑 render→revert 還原一致。亲驗暫禁守衛則該測試於「無 splitoff」斷言失敗。
|
|
||||||
|
|
||||||
## 逐元素標點樣式覆寫（data-jz-style／stylePolicy）（2026-07-11）
|
|
||||||
|
|
||||||
下游需求：非段落／特定範圍元素用半角式，段落用全角／開明。原樣式僅由 lang 決定，新增逐元素覆寫（與 data-jz-level 同構、純路由，banjiao 渲染早已就緒）。測試 121→127 全綠。
|
|
||||||
|
|
||||||
### 設置格式
|
|
||||||
- HTML 屬性 data-jz-style="banjiao|kaiming|quanjiao"（標於元素或任一祖先，該子樹生效）。
|
|
||||||
- 選項 lang.stylePolicy: [{ selector, style }]（如 [{selector:"h1,h2,button,.ui", style:"banjiao"}]）。
|
|
||||||
- 優先序：逐元素覆寫（近祖先勝、屬性優先於選擇器）＞ lang.policy ＞ lang.style ＞ 內建；非法屬性值回退 lang。
|
|
||||||
|
|
||||||
## 專案整理：架構一致性 ＋ 確認缺陷修復 ＋ 文檔重整（2026-07-07）
|
|
||||||
|
|
||||||
四路並行審計後之兩階段整理。核心：消除「透明穿越」判定之兩套口徑分裂。測試 116→121 全綠。
|
|
||||||
|
|
||||||
### 階段一 · 確認缺陷 ＋ 清理
|
|
||||||
- jinze 冪等：二次 render 曾巢狀 jz-jinze（違反 I6，3→6）——守衛改判 isJz(parent, PASS)。
|
|
||||||
- pill 自身 avoid 漏檢：processPills 補 avoidsSelf。連帶 CODE/KBD 自 skipTags 預設移除（已由 pillSelector 以 pill 涵蓋；再列 skipTags 違反三分類互斥、會抹掉普通 code 之 pill 間隙）。若把 code 移出 pillSelector 須自行加入 skipTags/scope.avoid。
|
|
||||||
- 刪死代碼 createMarker/ANY_CJK/BD_ALL/BD_CLASS_NAMES/CreateOptions.attrs；死旗標 biaodian/emphasis/ruby 補 @reserved。
|
|
||||||
|
|
||||||
### 階段二 · 架構一致性
|
|
||||||
- 透明判定單一真相源：transparentInline 提升為公開 isTransparent，邏輯文本流三原語（collectRuns/adjacentLogicalChar/jiyaAdjacency）共用之。未在 styleInlines 之未知行內標籤採嚴格白名單、一律當邊界（用戶抉擇）。分層：canSplit（切分安全）、lineedge（物理版面）各有正當之不同邊界、不併入。
|
|
||||||
- 跨透明元素邊界避頭尾（修 #3）：句末點號落於 <strong> 首位（你好<strong>。世界</strong>）時 forbiddenBreak 經 edgeCharEl 下探、render 沿透明邊緣上攀處理外層 parent，不再漏綁。
|
|
||||||
- avoid 排除歸一：isAvoided 改組合入口（自身或祖先），免「avoidsSelf ‖ isAvoided」漏一半。
|
|
||||||
- 小項：scope.include 去多餘 |null；gapTrim 補功能閘；PASSES 補註執行序。
|
|
||||||
- 元素分類單一入口 finder.category（收尾）：分類優先序收斂為單一分類器（avoid＞pill＞isolate＞block＞transparent＞opaque）；isTransparent=category==="transparent"、collectRuns/jiyaAdjacency switch(category)、canSplit=SPLITTABLE∩transparent。行為等價。
|
|
||||||
|
|
||||||
### 復驗後重新定性（不照單全收）
|
|
||||||
- lineedge 攀穿 isolate——非缺陷：edgeRect 為物理測量，須跨 mark 找真實相鄰；初評誤判、已還原。
|
|
||||||
- lineEdge/gapTrim 雙 ResizeObserver 派發序——確認非缺陷：Chrome 實測按 observer 創建序派發（規範插入序，非 observe 序）；lineEdge（order 90）先於 gapTrim（order 92）建、resize 恆先派發、不會用陳舊半形態；註解鎖不變量、不改碼。
|
|
||||||
- 五處幂等收斂——不做：各檢查不同位置關係，無單一 isJz 形狀可全覆蓋，強行歸一徒增風險。
|
|
||||||
|
|
||||||
### 文檔
|
|
||||||
- README 新增「全部選項速查」表（突出 lang.style/styleInlines/skipTags/skipAttribute/isSkipped）；三分類改分層、avoid 改七源。
|
|
||||||
- ARCHITECTURE §3.1 scope.avoid 過時示例、§4.1 透明分層、§4.2 標點六子類修正。
|
|
||||||
|
|
||||||
## 標點擠壓句界例外（句末點號接開類保留右空白）（2026-06-13）
|
|
||||||
|
|
||||||
### 變更
|
|
||||||
- 句界例外：機制 A 原對相鄰標點對 (L, R) 兩側獨立收——L 有右空白即收、不看 R 為何類，致句末點號接開類（。「／？「）兩側皆收、合占 1em、丟失句界視覺。修為：L 為句末點號（bd-stop）且 R 為開類（bd-open）時不收 L、僅收 R 左側 → 全角式與開明式皆 1.5em（對稱於 。」）。
|
|
||||||
- 例外僅限句末點號＋開類：句內點號 ，「 與雙括號 」「／》《 仍兩側皆收 1em；。」（句末接閉類）本就只收句末點號、合占 1.5em，未變。
|
|
||||||
- 半角式不回歸：句末點號於半角式由 baseline 已收半形，守衛僅跳過 adjacency 之重複追加、不移除 baseline 之 jz-half（實測 32 可壓縮標點全半形、0 回歸）。·・‧／…— 各式皆全寬屬設計。
|
|
||||||
|
|
||||||
### 範圍
|
|
||||||
- 唯一改動點 jiyaAdjacencyPass.squeeze() 加 stopBeforeOpen 守衛；lineedge／baseline／jinze／orphan／spacing 不波及。測試 113→116 全綠。
|
|
||||||
|
|
||||||
## 行內元素三分類（KaTeX 肢解修復）＋ v1 相容層移除（2026-06-12）
|
|
||||||
|
|
||||||
### 修復（下游問題六）
|
|
||||||
- jinze 透明下潛肢解 pill：行內公式緊鄰禁則標點時，KaTeX 全樹皆 span、舊版僅憑標籤名判透明，公式內側末字連殼層被克隆切出（splitoff）、上標漂移；pillSelector／skipAttribute／scope.avoid 三層防護全被刺穿。另修：相鄰 pill 時 descend 刺穿致 jz-hws 插入公式內部；pill 內部標點被 jiya charify。
|
|
||||||
- 根因修復：transparentInline 以元素判定（先排除 pill／isolate／avoid）；canSplit 諮詢 finder（不可切→整元素綁定，pill 即整體綁入 jz-jinze）；avoidsSelf 自身判定（舊僅查祖先）；descend 三態（blocked 終止、不越界跳找）；eachTextNode 過濾 pill 內部。
|
|
||||||
|
|
||||||
### 新增：行內元素三分類（§4.1）
|
|
||||||
- 透明（styleInlines＋jz-*）：穿越、run 延續、可克隆切分。
|
|
||||||
- 隔離（isolateSelector 新增選項，預設 "mark"，"" 停用）：邊界斷 run／斷相鄰／不可切分、兩端補隙，內部照常處理。MARK 自可切白名單移除（背景盒切分有可見接縫）。
|
|
||||||
- 整體（pillSelector）：內部對一切 pass 不可見，禁則時整體綁入。spacing Pass B 邊界選擇器擴為 pill ∪ isolate。
|
|
||||||
|
|
||||||
### 移除：v1 相容層
|
|
||||||
- createCjkAutospace／IIFE 全域別名／死選項 autospaceClass 一併刪（消費端已全數遷移 v2 API）；I8 退役。測試 101→112 全綠。
|
|
||||||
|
|
||||||
## 行內排版透明性修復 ＋ 標點懸掛移除（2026-06-11）
|
|
||||||
|
|
||||||
### 修復
|
|
||||||
- pill 前標點誤加間隙（漢字。\<code\>）：descend 越過 jz-char 取更前字誤補 jz-hws；isTransparentInline 補 JZ-CHAR／JZ-INNER。
|
|
||||||
- 行內樣式元素整體掉行：core/split 克隆切分（splitoff），禁則／垂懸字只綁邊界詞元、revert 延後階段併回。
|
|
||||||
- 審計 T4 lineedge 攀爬集由 styleInlines 派生；T5 jiyaAdjacency 遇 pill 斷相鄰；T6 spacing processPills 補 per-node 功能閘。
|
|
||||||
|
|
||||||
### 移除
|
|
||||||
- 標點懸掛由停用轉正式移除（寬度守恆矛盾，CSS 接觸不到斷行器；負 margin 程式碼／CSS／型別一併刪；hanging 選項保留為 no-op）。
|
|
||||||
|
|
||||||
## 功能分級 ＋ 垂懸字（2026-06-09）
|
|
||||||
|
|
||||||
- 功能分級：文本級（spacing／jiya）vs 段落級（jinze／orphan／longWord）；data-jz-level／level:{text} 標記。
|
|
||||||
- 垂懸字避免 orphan（方案 C，斷行層無測量，預設開 chars=2）。
|
|
||||||
- lineedge 行端半形（squeeze）＋行歸屬判定改垂直區間比較；標點懸掛實作後確認不可行、全面停用。
|
|
||||||
|
|
||||||
## 標點挤压一致性（2026-06-04）
|
|
||||||
|
|
||||||
### 新增／修復
|
|
||||||
- 全角句點 ． 納入句末標點：BD_STOP 由 。！？ 擴為 。．！？（． U+FF0E 異於 。 U+3002）。Noto CJK 有 halt、挤压收 0.5em，與 。一致；inkBias 補（簡 left／繁 center）。政策同 。！？：全角式與開明式句末保持全角 1em，banjiao 挤半。原則：halt 即字型挤压意願，字型不給某標點 halt（不宜挤）則信任字型不強挤。
|
|
||||||
- 連續標點挤压：雙側獨立 ＋ 透明穿越。規則：相鄰兩標點，對每一標點獨立判斷，若其有空白之側緊鄰另一標點即收半。修後 ，「 全角式與開明式皆 1em、。」 全角式 1.5em／開明式 1em、·— 兩式皆 2em。並改同 parent 掃描為從 root 透明遍歷，跨 strong/em 邊界之連續標點亦正確挤（原漏致 2em）。
|
|
||||||
|
|
||||||
## 字符分類規則集（2026-06-04）
|
|
||||||
|
|
||||||
### 新增
|
|
||||||
- 可配置字符分類 charClass：硬編碼分類（中文／西文／全寬標點子類）統一抽象為規則集，內置默認，消費端經 options.charClass（cjk／western／biaodian{stop,pause,open,close,middle,liga}）追加擴充，覆寫 spacing／jiya／jinze 判定。例：未分類符號（如 ‥ U+2025）可經 biaodian.stop 歸全寬句末標點。向下兼容（不傳則行為不變、實例隔離）；v1 追加語義、不重分類內置；結構性 ASCII 不開放。spacing 間隙正則改由規則集 per-instance 編譯。測試 66 通過。
|
|
||||||
|
|
||||||
## 下游回饋修復批次（2026-06-03）
|
|
||||||
|
|
||||||
皆以真實 Chromium 量測驗證（jsdom 不可信）。
|
|
||||||
|
|
||||||
### 修復
|
|
||||||
- 原子透明（段落繼承屬性漏溢）：jz-* inline-block 原子對段落樣式透明——歸零 text-indent／hanging-punctuation（過套用），令原子 text-decoration:inherit 接續下劃線（欠套用）。
|
|
||||||
- 中西間隙 gapTrim 自我應驗：行末去隙原依「後字是否在更低行」判定，後字落點受間隙自身及下游間隙 margin 推擠致行中間隙誤 trim（容器寬相關「最後一個間隙消失」、pill 跨行右隙消失）。改「起始全 trim、左→右逐一定案」。
|
|
||||||
- 中西間隙西文集完整化：補貨幣（€ 等）、拉丁擴充 A/B（拼音 ā ǎ ē）、西里爾、數學運算符，希臘補全至 α-ω。列舉法 \uXXXX、無需 flag、相容 2016。
|
|
||||||
- 標點誤隙：…… 後接 CJK 不誤補（DOTS_CJK 去 |…）；收尾彎引號 ” 後接拉丁／數字不補（移除 pangu QUOTE_AN 偏例）。中文標點 × 簡繁 104 例稽核皆 0 誤隙。
|
|
||||||
|
|
||||||
### 變更
|
|
||||||
- 字型移出聚珍管理：不再內建 font-family／字型堆疊（移除 _lang.css）；逐語言字型交消費端 CSS（範式見文檔「字型與 locl」）。聚珍僅守：jz-* font:inherit 繼承消費端字型、半形 font-feature 顯式併 locl（連同 halt）、render 不改 lang。halt／margin 兩模式字型繼承與 locl 皆驗證正常。
|
|
||||||
|
|
||||||
### 工具
|
|
||||||
- demo/resize-check.html：可拖曳容器檢查頁（各寬度間隙穩定性、標點無誤隙）。
|
|
||||||
|
|
||||||
## v2 切片 1 · 增補（2026-06）
|
|
||||||
|
|
||||||
### 新增
|
|
||||||
- 標點半形 margin 後備模式（缺 halt 字型）：jiya.halfWidth "halt"|"margin"；margin 以 width:0.5em＋字身偏側溢出定位重現 halt。模式由 data-jz-halfwidth 子樹屬性決定。
|
|
||||||
- 字形偏側表 inkBias（left/center/right/full），jiya.bias 逐 lang 逐字覆寫。
|
|
||||||
- tools/measure-bias.py 字型偏側量測＋字型適配工作流；demo/fallback.html。
|
|
||||||
- justifyAtoms 選項（false → jz-char/jz-jinze 改 inline，相容 Paged.js）。
|
|
||||||
|
|
||||||
### 修復
|
|
||||||
- _lang.css 字型堆疊改純後備（:where 零特異度、只命中 [lang] 元素、不覆寫 jz-inner）→ 消費端字型恆優先。
|
|
||||||
- adjacentLogicalChar 透明穿越 jz-jinze → pill 緊鄰標點之左緣間隙與作者空格剝除復原。
|
|
||||||
- CJK↔CJK 贅餘作者空格（含跨 inline 標籤）剝除不留隙。
|
|
||||||
|
|
||||||
### 已知限制
|
|
||||||
- margin 後備與 justifyAtoms:false 不可兼得（分頁器場景用 halt 字型）。
|
|
||||||
|
|
||||||
## v2.0.0 切片 1 · 從零重寫
|
|
||||||
|
|
||||||
依 ARCHITECTURE.md 從零重寫。公開 API createJuzhen／全域 Juzhen，前綴 jz-。
|
|
||||||
|
|
||||||
- 核心引擎 finder／unicode／locale／dom／pass。
|
|
||||||
- 中西間隙（margin 模型，copy-clean）＋gapTrim 行末去隙。
|
|
||||||
- 標點擠壓 全角／開明／半角，三機制，半形 halt。
|
|
||||||
- 禁則避頭尾＋justify 綁定；長英文詞；justify 句末單份間距；v1 相容層。
|
|
||||||
|
|
||||||
## v1（cjk-autospace，v1-autospace 分支）
|
|
||||||
|
|
||||||
Pangu 風格 CJK↔Latin 間距 shim。Pass A 中西間隙／B pill／C 長詞／D 開明擠壓。
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- RUNTIME_JS -->
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
-6736
File diff suppressed because one or more lines are too long
@@ -1,271 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-Hant">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>聚珍（Juzhen）</title>
|
|
||||||
<meta name="generated-at" content="2026-06-02">
|
|
||||||
<meta name="source" content="cjk-autospace · 使用文檔">
|
|
||||||
<!-- RUNTIME_CSS -->
|
|
||||||
</head>
|
|
||||||
<body data-toc="1">
|
|
||||||
|
|
||||||
<header class="page">
|
|
||||||
<div class="meta">
|
|
||||||
<h1>聚珍（Juzhen）</h1>
|
|
||||||
<p class="subtitle">現代簡／繁中文網頁排版套件——Han.css 之現代化重寫，複製乾淨、依 lang 全角／開明切換、justify 句末標點單份間距、跨瀏覽器一致。</p>
|
|
||||||
<p class="timestamp"><time>2026-06-02</time> · <span>cjk-autospace · 使用文檔</span></p>
|
|
||||||
</div>
|
|
||||||
<div class="actions">
|
|
||||||
<!-- ACTIONS -->
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<!-- BODY -->
|
|
||||||
<p class="lede">聚珍（Juzhen）是現代簡／繁中文網頁排版套件，Han.css 之現代化重寫，沿其功能版圖，並針對四點作調整：複製乾淨（中西間隙不入剪貼板）、依 <code>lang</code> 全角／開明自動切換、<code>justify</code> 下句末標點只佔一份間距、跨瀏覽器一致。倉庫名仍為 <code>cjk-autospace</code>；公開 API 為 <code>createJuzhen</code> ／全域 <code>Juzhen</code>；注入之自訂元素前綴 <code>jz-</code>。</p>
|
|
||||||
|
|
||||||
<p>本版（2.x）為從零重寫。v1 之 <code>createCjkAutospace</code> 相容層<strong>已移除</strong>（最後一批 v1 消費端已遷移 v2 API）；v1 原始碼保存於 <code>v1-autospace</code> 分支。設計契約見 <code>ARCHITECTURE.md</code>。</p>
|
|
||||||
|
|
||||||
<h2>安裝與構建</h2>
|
|
||||||
<pre><code>npm install
|
|
||||||
npm run build # esbuild → dist/juzhen.{mjs,iife.js,css}；tsc → dist/index.d.ts
|
|
||||||
npm test # jsdom DOM 正確性測試</code></pre>
|
|
||||||
<p>產物（<code>dist/</code>，已入庫）：<code>juzhen.mjs</code>（ESM，供打包器／TypeScript）、<code>juzhen.iife.js</code>（IIFE，全域 <code>Juzhen</code>，原生 <code><script></code> 直跑）、<code>juzhen.css</code>（合併樣式，<strong>必須引入</strong>）、<code>index.d.ts</code>（型別宣告）。</p>
|
|
||||||
|
|
||||||
<h2>用法</h2>
|
|
||||||
<h3>原生 <code><script></code></h3>
|
|
||||||
<pre><code><link rel="stylesheet" href="dist/juzhen.css">
|
|
||||||
<script src="dist/juzhen.iife.js"></script>
|
|
||||||
<script>
|
|
||||||
const jz = Juzhen.createJuzhen({ scope: { include: ".prose" } });
|
|
||||||
jz.render(); // 對 document.body 套用（僅命中 .prose 子樹）
|
|
||||||
// jz.revert(); // 還原
|
|
||||||
</script></code></pre>
|
|
||||||
<h3>ESM／TypeScript</h3>
|
|
||||||
<pre><code>import { createJuzhen } from "cjk-autospace";
|
|
||||||
import "cjk-autospace/css";
|
|
||||||
|
|
||||||
createJuzhen({ lang: { default: "zh-Hant" } }).render(document.querySelector("main"));</code></pre>
|
|
||||||
<div class="callout info"><span class="label">JS 與 CSS 缺一不可</span> JS 只注入 <code>jz-*</code> 結構，所有視覺尺寸（間隙寬度、擠壓量、<code>justify</code> 原子化、字體堆疊）都在 <code>juzhen.css</code>。缺 CSS 則全部失效。</div>
|
|
||||||
|
|
||||||
<h2>已實作功能</h2>
|
|
||||||
<table>
|
|
||||||
<thead><tr><th>功能</th><th>說明</th></tr></thead>
|
|
||||||
<tbody>
|
|
||||||
<tr><td>中西間隙 <code>spacing</code></td><td>CJK↔西文邊界，<strong>margin 模型</strong>：包裹左側字、以 <code>margin-right</code> 留隙，不注入空白字元 → <code>textContent</code> 完全不變、複製緊湊、<code>justify</code> 不暴增、行首乾淨；行末由 <code>gapTrim</code> layout pass 去隙以齊右。含跨樣式邊界與 pill／隔離元素邊界（<code>code</code>／<code>kbd</code>／<code>.katex</code> 與 <code>mark</code>，兩端補隙口徑一致；pill 緊鄰標點時穿越 <code>jz-jinze</code> 仍補間隙）。贅餘作者空格一律正規化：CJK↔西文吸收為受管間隙、CJK↔CJK（含跨 inline 標籤）剝除不留隙。</td></tr>
|
|
||||||
<tr><td>長英文詞 <code>longWord</code></td><td><code>[A-Za-z]{6,}</code> 包入 <code><span lang="en"></code>，配合消費端 CSS <code>hyphens:auto</code> 原生斷詞（DOM 無連字符 → 複製不污染）。</td></tr>
|
|
||||||
<tr><td>標點擠壓 <code>jiya</code></td><td>標點 charify 為 <code>jz-char</code> ＋ <code>bd-*</code> class。三機制：baseline 政策（全角式不擠／開明式擠句內點號＋括號引號／半角式全擠）＋行內連續擠壓＋行端擠壓。半形預設以字型 OpenType <code>halt</code> 渲染；缺 <code>halt</code> 字型可切 <code>margin</code> 後備模式（見下）。</td></tr>
|
|
||||||
<tr><td>禁則 <code>jinze</code></td><td>行首行末避頭尾：閉類／點號綁前一字（不置行首）、開類綁後一字（不置行末）；只隔離邊界詞元，長引文中段仍可斷。邊界字落於<strong>透明</strong>行內樣式元素（<code>strong</code>／<code>em</code> 等）內時<strong>克隆切分</strong>只綁邊界詞元（避免整串入 <code>nowrap</code> 致行末整體掉行），克隆標 <code>data-jz-kind="splitoff"</code>、<code>revert</code> 時併回；pill／隔離／avoid 不可切、<strong>整元素綁定</strong>——pill（如行內公式 <code>.katex</code>）作為原子鄰字單位整體綁入 <code>jz-jinze</code>，絕不下潛肢解（見「行內元素三分類」）。亦為 <code>justify</code> 綁定載體。</td></tr>
|
|
||||||
<tr><td>垂懸字避免 <code>orphan</code></td><td>段末行 CJK 實義字 ≥ N（預設 2；標點不計）。方案 C（斷行層無測量）：段末末 N 實義字＋尾隨標點包入 <code>jz-orphan</code>（<code>white-space:nowrap</code>），整體不可斷 → 末行恒含之 ⇒ 末行 ≥ N。邊界字落於行內元素內時同樣<strong>克隆切分</strong>（避免長元素溢出容器）。<strong>預設開</strong>；段落級。</td></tr>
|
|
||||||
<tr><td><s>標點懸掛 <code>hanging</code></s></td><td><strong>已移除</strong>：純 CSS 機制為機制級死路（寬度守恆矛盾——墨色出去多少版心內就空多少，CSS 接觸不到斷行器）。原生 <code>hanging-punctuation</code> 為唯一正解但僅 Safari 支援、且與 inline-block 原子互斥。<code>hanging</code> 選項保留為 no-op（無效果）。詳見 ARCHITECTURE §6.5.6。</td></tr>
|
|
||||||
<tr><td>功能分級 <code>level</code></td><td>文本級（間隙、擠壓——任意文本適用）vs 段落級（禁則、垂懸字、長詞——需行／段布局）。塊級預設全功能；<code>data-jz-level="text"</code> 子樹或 <code>level:{text:"選擇器"}</code>（標題／按鈕）僅跑文本級。</td></tr>
|
|
||||||
<tr><td>justify 單份間距</td><td>每個 <code>jz-char</code> 為 <code>inline-block</code> 原子，句末標點只貢獻一份對齊伸縮量。</td></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<p>後續（架構已預留，不返工）：標點修正（簡↔繁）、著重號、注音／Ruby。</p>
|
|
||||||
|
|
||||||
<h2>選項</h2>
|
|
||||||
<pre><code>createJuzhen({
|
|
||||||
lang: {
|
|
||||||
default: "zh-Hant", // 無 lang 祖先時之預設語言標籤
|
|
||||||
style: "kaiming", // 全域擠壓預設：quanjiao｜kaiming｜banjiao
|
|
||||||
policy: { "zh-Hant": "quanjiao" }, // 逐 lang 覆寫
|
|
||||||
stylePolicy: [ { selector: "h1,button,.ui", style: "banjiao" } ], // 逐元素樣式（優先於 lang）
|
|
||||||
},
|
|
||||||
scope: { root: document.body, include: ".prose", avoid: "blockquote.raw" },
|
|
||||||
spacing: true,
|
|
||||||
longWord: { minLength: 6, lang: "en" },
|
|
||||||
jiya: true, // 或物件：{ halfWidth: "halt"|"margin", bias }
|
|
||||||
jinze: true,
|
|
||||||
orphan: true, // 垂懸字避免（預設開）；或 { chars: 2 }；false 關
|
|
||||||
// hanging：已移除、無效果（純 CSS 機制級死路，詳見 §6.5.6）
|
|
||||||
level: { text: "h1,h2,h3,button,.ui" }, // 此選擇器子樹僅跑文本級功能
|
|
||||||
justifyAtoms: true, // 分頁器下設 false 改 inline（見下）
|
|
||||||
blocks: [ { selector: ".code-comment", features: [ "spacing" ] } ],
|
|
||||||
});</code></pre>
|
|
||||||
<p>擠壓政策優先序：<strong>逐元素 <code>data-jz-style</code>／<code>stylePolicy</code> ＞ 逐 lang <code>policy</code> ＞ 全域 <code>style</code> ＞ 內建預設</strong>（繁→全角、簡→開明）。<strong>逐元素覆寫</strong>供「非段落／UI 元素用半角式、段落用全角／開明」等：屬性 <code>data-jz-style="banjiao|kaiming|quanjiao"</code>（標於元素或祖先）或選擇器 <code>stylePolicy</code>，近祖先勝、屬性優先於選擇器、非法值回退 lang。</p>
|
|
||||||
<h3>分塊功能選擇（HTML 屬性，就近繼承）</h3>
|
|
||||||
<pre><code><p data-juzhen="spacing jiya">…</p> <!-- 白名單：僅此二功能 -->
|
|
||||||
<p data-juzhen-off="jiya">…</p> <!-- 黑名單：停用 jiya，其餘繼承 -->
|
|
||||||
<div lang="zh-Hans">…</div> <!-- lang 驅動全角／開明 --></code></pre>
|
|
||||||
|
|
||||||
<h2>標點半形：<code>halt</code> 預設與 <code>margin</code> 後備</h2>
|
|
||||||
<p>開明／半角式把標點收成「半形」，有兩種渲染機制：</p>
|
|
||||||
<table>
|
|
||||||
<thead><tr><th>機制</th><th>設定</th><th>原理</th><th>適用</th></tr></thead>
|
|
||||||
<tbody>
|
|
||||||
<tr><td><code>halt</code>（預設）</td><td><code>jiya: true</code></td><td>字型 OpenType <code>halt</code>，由字型按字形正確定位、不重疊</td><td>字型含 <code>halt</code>（Noto CJK／思源系列）</td></tr>
|
|
||||||
<tr><td><code>margin</code>（後備）</td><td><code>jiya: { halfWidth: "margin" }</code></td><td><code>width:0.5em</code> ＋字身依墨色偏側溢出定位（以 CSS 重現 halt）</td><td>字型<strong>缺</strong> <code>halt</code>（多數系統字型、GBK 老字型如方正書宋 GBK、PingFang）</td></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div class="callout warn"><span class="label">為何需要後備</span> <code>halt</code> 缺席時開明式擠壓「完全無效」（標點仍佔全形）。實測<strong>方正書宋 GBK 僅含 <code>vert</code>、無 <code>halt</code></strong> → halt 模式不擠；切 <code>margin</code> 後備後（開明式 zh-Hans），同句行寬 <code>24.0em → 19.7em</code>、單一句內點號 <code>1.0em → 0.5em</code>，半形生效。</div>
|
|
||||||
<div class="callout"><span class="label">句末標點與連續挤压</span> 句末點號為 <code>。．！？</code>——含<strong>全角句點 <code>．</code></strong>（U+FF0E，異於表意句號 <code>。</code> U+3002，Noto CJK 有 <code>halt</code>）；全角式與開明式句末皆<strong>保持全角 1em</strong>，banjiao 挤半。<strong>連續標點</strong>對每一標點獨立判斷——若其有空白之側緊鄰另一標點即收半形：故 <code>，「</code> <strong>全角式與開明式皆 1em</strong>、<code>。」</code> <strong>全角式 1.5em／開明式 1em</strong>；並透明穿越 <code>strong</code>／<code>em</code> 等行內邊界。<strong>句界例外</strong>：句末點號接開類（<code>。「</code>／<code>？「</code>）為句界，保留句末點號右側空白、僅收開類左側 → 全角式與開明式皆 <strong>1.5em</strong>（對稱於 <code>。」</code>）；例外僅限句末點號＋開類，句內點號 <code>，「</code> 與雙括號 <code>」「</code>／<code>》《</code> 仍兩側皆收 1em。半角式句末點號由 baseline 已半形，故仍 1em（不回歸全寬）。</div>
|
|
||||||
|
|
||||||
<h3>激活與粒度</h3>
|
|
||||||
<p>模式由 <strong><code>data-jz-halfwidth</code> 屬性所在子樹</strong>決定（CSS 後代選擇器），故粒度極靈活：</p>
|
|
||||||
<ul>
|
|
||||||
<li><strong>全域</strong>：<code>jiya: { halfWidth: "margin" }</code> → <code>render()</code> 於處理 root 自動掛屬性。</li>
|
|
||||||
<li><strong>逐區塊／逐語言</strong>：在 HTML 任一祖先手寫 <code>data-jz-halfwidth="margin"</code>（或 <code>"halt"</code>），即令該子樹用對應機制，無需另建實例。常見如「全頁 <code>halt</code>，某用無 <code>halt</code> 字型之區塊掛 <code>margin</code>」，或反之（<code>margin</code> 頁中嵌一塊 <code>halt</code> 島）。</li>
|
|
||||||
</ul>
|
|
||||||
<pre><code><!-- 全頁 halt（預設），此塊改用無 halt 字型 → 局部 margin 後備 -->
|
|
||||||
<section data-jz-halfwidth="margin" style="font-family: '方正书宋_GBK'">…</section></code></pre>
|
|
||||||
|
|
||||||
<h3>機制與字形偏側表（<code>margin</code> 模式專用，可覆寫）</h3>
|
|
||||||
<p><code>margin</code> 模式把標點 <code>jz-char</code> 之 inline-block 寬收為 <strong>0.5em（真半形 advance）</strong>，字身（<code>jz-inner</code>）以 <code>overflow</code> 溢出該盒，再依<strong>墨色偏側</strong>左移、使墨色落於 0.5em 盒內、空白溢向外側——即以 CSS 盒模型重現 <code>halt</code> 之「收字身寬＋按字形定位」。相鄰兩標點各 0.5em、合佔 1em，無鄰接疊加或單側重疊問題。</p>
|
|
||||||
<p>偏側依每字墨色中心。聚珍內建<strong>參考表</strong>（依方正書宋 GBK 實測之 glyph ink 位）：簡體點號 <code>，、。；：！？</code> 偏左；繁體點號居中；彎引號 <code>“”‘’</code>、角括號 <code>「」</code>、尖括號 <code>〈〉</code> 墨色強偏一側（開→<code>right</code>、閉→<code>left</code>）；圓／方／書名等括號 <code>（）【】《》…</code> 墨色近中→<code>center</code>。可逐 <code>lang</code> 逐字覆寫：</p>
|
|
||||||
<pre><code>createJuzhen({
|
|
||||||
jiya: {
|
|
||||||
halfWidth: "margin",
|
|
||||||
bias: {
|
|
||||||
"zh-Hans": { "，": "center", "（": "right" }, // 覆寫參考預設
|
|
||||||
"zh-Hant": { "。": "center" },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// 偏側值（決定字身於 0.5em 盒內之左移）：
|
|
||||||
// left 墨偏左 → 不移（字身左對齊）
|
|
||||||
// center 墨居中 → 左移 0.25em
|
|
||||||
// right 墨偏右 → 左移 0.5em（右半入盒）
|
|
||||||
// full 無可壓縮空白 → 不收、維持全形</code></pre>
|
|
||||||
|
|
||||||
<h3>字型適配工作流（margin 模式配字）</h3>
|
|
||||||
<p>換用新字型時，依下列步驟確認半形渲染：</p>
|
|
||||||
<ol>
|
|
||||||
<li><strong>驗 <code>halt</code></strong>：<code>python3 tools/measure-bias.py <font.ttf></code>（需 <code>pip install fonttools</code>）。首行報該字型是否含 OpenType <code>halt</code>。有則直接用預設（halt 模式），到此為止；無則用 <code>margin</code> 後備，續下。</li>
|
|
||||||
<li><strong>取偏側建議</strong>：同一工具量各標點 glyph 之墨色中心、印出建議偏側表與可貼入 <code>jiya.bias</code> 之 JSON。</li>
|
|
||||||
<li><strong>套用</strong>：<code>createJuzhen({ jiya: { halfWidth: "margin", bias: <貼入 JSON> } })</code>；多數宋體系 GBK 字型與內建參考表相符，未必需覆寫。</li>
|
|
||||||
<li><strong>目視微調</strong>：與原文對照逐字檢查——標點與鄰字<strong>重疊</strong>則偏側往「不移」方向調（<code>right→center→left</code>）；標點與內容<strong>仍有空隙</strong>則往「多移」方向調（<code>left→center→right</code>）；某標點無可壓空白則設 <code>full</code>。</li>
|
|
||||||
<li><strong>記錄</strong>：把該字型之 <code>bias</code> 覆寫存入專案設定，作為該字型之適配結果。</li>
|
|
||||||
</ol>
|
|
||||||
<p>偏側是「字身於 0.5em 盒內左移多少」的三檔量化（0／0.25／0.5em）；量測值近門檻時以目視為準。<code>halt</code> 字型由字型精確定位，無此配字需求——<code>margin</code> 配字僅為缺 <code>halt</code> 字型之務實近似。</p>
|
|
||||||
|
|
||||||
<h2>CSS 基礎設定（消費端須知）</h2>
|
|
||||||
<p>JS 只注入 <code>jz-*</code> 結構，<strong>所有視覺尺寸在 <code>juzhen.css</code></strong>。消費端須備妥：</p>
|
|
||||||
<ol>
|
|
||||||
<li><strong>引入樣式（必須）</strong>：<code><link rel="stylesheet" href="dist/juzhen.css"></code>（或 ESM <code>import "cjk-autospace/css"</code>）。</li>
|
|
||||||
<li><strong>設定 <code>lang</code>（強烈建議）</strong>：內容容器標 <code>lang="zh-Hans"</code>／<code>"zh-Hant"</code>／<code>"ja"</code>，驅動全角／開明政策與字形 <code>locl</code>。</li>
|
|
||||||
<li><strong>作用域類</strong>：若設 <code>scope.include: ".juzhen"</code>，須給內容容器加對應 class；<code>juzhen.css</code> 之 normalize 亦收斂於此域。</li>
|
|
||||||
<li><strong>長英文詞斷字</strong>：須由消費端 CSS 提供 <code>hyphens: auto</code>（含 <code>-webkit-hyphens</code>）。</li>
|
|
||||||
<li><strong><code>justify</code>（選用）</strong>：欲兩端對齊則自設 <code>text-align: justify</code>；句末標點單份間距與行末去隙由聚珍處理。</li>
|
|
||||||
<li><strong>字型由消費端負責</strong>：聚珍<strong>不</strong>內建任何 <code>font-family</code>／字型堆疊——逐語言字型完全由消費端 CSS 決定（推薦範式：逐 <code>lang</code> 設於 <code>.juzhen</code> 或帶 <code>lang</code> 之容器，<strong>勿</strong>直接設 <code>jz-inner</code>）。聚珍僅以 <code>jz-* { font: inherit }</code> 使原子繼承消費端字型、不強加，並顯式保留 <code>locl</code>（不改寫 <code>lang</code>、不關閉 locl，故正確標 <code>lang</code> ＋ 用支援 locl 之字型即正常）。半形擠壓依字型 OpenType <code>halt</code>；缺 <code>halt</code> 之字型須用 <code>jiya.halfWidth:"margin"</code> ＋按字型以 <code>jiya.bias</code> 微調。</li>
|
|
||||||
<li><strong>自動處理</strong>：<code>juzhen.css</code> 已於 <code>.juzhen</code> 範圍內以 <code>@supports</code> 關閉 Blink 原生 <code>text-spacing-trim</code>／<code>text-autospace</code>，並令注入間隙 <code>user-select: none</code>（複製乾淨）。</li>
|
|
||||||
<li><strong>段落屬性照常設、原子透明</strong>：聚珍把標點拆成 <code>inline-block</code> 原子，但已確保原子對消費端段落樣式透明——段落可正常設 <code>text-indent</code>（首行縮排）、<code>hanging-punctuation</code>、<code>text-decoration</code>（下劃線）等。庫內已歸零會被原子重複套用之繼承屬性、並令原子承接段落裝飾，故首行縮排正常、下劃線連續不斷，<strong>無需任何額外配置</strong>。</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<h2>行內元素三分類：透明／隔離／整體</h2>
|
|
||||||
<p>行內元素對排版有且僅有三種口徑。<strong>邏輯文本流之遍歷原語共用單一判定</strong> <code>isTransparent</code>（中西間隙、擠壓相鄰、禁則綁定、垂懸字）；<strong>未在 <code>styleInlines</code> 之未知行內標籤（自訂元素等）採嚴格白名單、一律當邊界</strong>，透明須顯式登記。多選擇器同命中時依單一分類器 <code>finder.category</code> 之<strong>優先序</strong> <code>avoid ＞ pill ＞ isolate ＞ block ＞ transparent ＞ opaque</code> 定案（如 <code>data-jz-skip</code> 之 pill → avoid；pill＋isolate → pill）。判定<strong>以元素為準、非標籤名</strong>——KaTeX 全樹皆 <code><span></code>，但 <code>.katex</code> 命中 <code>pillSelector</code> 即為整體邊界。結構克隆切分 <code>canSplit</code>、行端物理版面 <code>lineedge</code> 為正當之獨立層（邊界各異，見架構）。</p>
|
|
||||||
<table>
|
|
||||||
<thead><tr><th>分類</th><th>選擇器</th><th>邊界</th><th>內部</th><th>典型</th></tr></thead>
|
|
||||||
<tbody>
|
|
||||||
<tr><td><strong>透明</strong></td><td><code>styleInlines</code>（<strong>未列之行內標籤＝邊界</strong>）</td><td>穿越——間隙／相鄰／run 皆延續</td><td>照常處理；禁則可<strong>克隆切分</strong>（最小綁定）</td><td><code>strong</code>／<code>em</code>／<code>a</code>／<code>span</code></td></tr>
|
|
||||||
<tr><td><strong>隔離</strong></td><td><code>isolateSelector</code>（預設 <code>"mark"</code>；<code>""</code> 停用）</td><td>斷 run／斷相鄰／不可切分；<strong>兩端</strong>補 <code>jz-hws</code> 間隙</td><td><strong>照常處理</strong>（自成脈絡）</td><td>帶背景色之 <code><mark></code>、badge 類</td></tr>
|
|
||||||
<tr><td><strong>整體</strong></td><td><code>pillSelector</code>（預設 <code>"code, kbd"</code>）</td><td>同隔離</td><td><strong>完全不可見</strong>——不 charify、不插間隙、不切分、不下潛</td><td><code>code</code>／<code>kbd</code>、行內公式 <code>.katex</code>、引用標 <code>.cite-ref</code></td></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<p>禁則遇 pill（<code>…$公式$，</code>）：整個 pill 作為原子鄰字單位<strong>整體綁入</strong> <code>jz-jinze</code>（公式本不可斷，無額外代價）；隔離元素同樣整綁（切分背景盒有可見接縫）。<strong>avoid 七源</strong>（<code>isSkipped</code>／<code>skipTags</code>／SVG／<code>contentEditable</code>／<code>data-jz-skip</code>／<code>skipAttribute</code>／<code>scope.avoid</code>）以<strong>自身</strong>判定、命中即邊界；一次性檢查用組合入口 <code>isAvoided</code>（自身或祖先）。<strong><code>skipTags</code> 預設不含 <code>code</code>／<code>kbd</code></strong>——二者由 <code>pillSelector</code> 以 pill 涵蓋（三分類互斥）。</p>
|
|
||||||
<div class="callout"><span class="label">建議</span> 行內公式／夾注引用等獨立行內單位宜列為 pill：<code>pillSelector: "code, kbd, .katex, .cite-ref"</code>——兩側補隙、吸收作者空格、整體綁定，統一處理。</div>
|
|
||||||
|
|
||||||
<h2>分頁器（Paged.js 等）相容：<code>justifyAtoms</code></h2>
|
|
||||||
<p>預設 <code>jz-char</code>／<code>jz-jinze</code> 為 <code>inline-block</code>，作 <code>justify</code> 之單一對齊原子。但<strong>分頁器</strong>（如 Paged.js）之對齊引擎會把每個 inline-block 邊界當伸縮點、與 CJK inter-ideograph 疊加，於窄欄混排時字距失控、整段散架。此時設 <code>justifyAtoms: false</code>——<code>jz-char</code>／<code>jz-jinze</code> 改 <code>display:inline</code>（半形 <code>halt</code> 與禁則 <code>nowrap</code> 綁定均保留）。常規流式版面無需設定。</p>
|
|
||||||
<div class="callout warn"><span class="label">注意</span> <code>margin</code> 後備半形依賴 <code>inline-block</code>（<code>width:0.5em</code>），故 <code>justifyAtoms:false</code> 與 <code>margin</code> 模式不可兼得——分頁器場景請用含 <code>halt</code> 之字型。</div>
|
|
||||||
|
|
||||||
<h2>自定義字符分類：<code>charClass</code></h2>
|
|
||||||
<p>每個字符之分類（中文／西文、全寬標點各子類）抽象為<strong>規則集</strong>：內置默認即聚珍分類表，消費端經 <code>options.charClass</code> <strong>擴充</strong>，以覆寫 <code>spacing</code>／<code>jiya</code>／<code>jinze</code> 對特定字符之判定。語義為<strong>追加</strong>——把當前未分類字符或新符號歸入對應類。</p>
|
|
||||||
<pre><code>createJuzhen({
|
|
||||||
charClass: {
|
|
||||||
cjk: "〇", // 追加為中文：與西文邊界補間隙、禁則／justify 視為單字
|
|
||||||
western: "★☆", // 追加為西文（半寬標點亦歸此）：與 CJK 邊界補間隙
|
|
||||||
biaodian: { // 追加為全寬標點，按子類：jiya charify／擠壓、禁則避頭尾
|
|
||||||
stop: "．", // 句末（。！？類） pause 句內（，、；：類）
|
|
||||||
open: "", close: "", middle: "", liga: "",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});</code></pre>
|
|
||||||
<p><strong>典型用例</strong>：英文全角句號 <code>．</code>（U+FF0E，異於中文句號 <code>。</code> U+3002）預設<strong>未分類</strong>——不 charify、不挤壓、與 CJK 間不補隙。以 <code>charClass:{ biaodian:{ stop:"．" } }</code> 歸為全寬句末標點，即比照 <code>。</code> 處理（開明式挤半形、全角式佔全形、行首避頭尾）。</p>
|
|
||||||
<div class="callout"><span class="label">要點</span> <strong>向下兼容</strong>：不傳 <code>charClass</code> 時分類與行為與內置完全一致、且各實例隔離（覆寫不污染默認）。<strong>追加語義（v1）</strong>：擴充內置類，不支援重分類／移除內置字符。結構性 ASCII（字母數字／運算符）為固定集、不開放。<code>margin</code> 模式下新增開／閉括號之墨色偏側可一併以 <code>jiya.bias</code> 指定。</div>
|
|
||||||
|
|
||||||
<h2>v1 向下相容 — 已移除</h2>
|
|
||||||
<p>v1 相容層（<code>createCjkAutospace</code> 導出、IIFE 之全域別名、<code>autospaceClass</code> 選項）<strong>已隨最後一批 v1 消費端遷移完成而移除</strong>。請改用 <code>createJuzhen(options).render(root)</code> v2 API；v1 原始碼保存於 <code>v1-autospace</code> 分支。</p>
|
|
||||||
|
|
||||||
<h2>目視驗證</h2>
|
|
||||||
<p><code>demo/index.html</code> 載入 <code>dist/</code> 產物，簡繁並列、可切 <code>justify</code>、附 copy-clean 測試區。<code>demo/fallback.html</code> 以方正書宋 GBK（無 <code>halt</code>）對照 <code>halt</code> 失效 vs <code>margin</code> 後備生效。<code>demo/resize-check.html</code> 為可拖曳容器檢查頁（驗中西間隙在各寬度恆穩、行末去隙、pill 跨行右隙）。<code>demo/showcase.html</code> 以定寬文本框並列，逐場景演示功能分級與垂懸字。版面相關結論（justify 單份間距、擠壓視覺量、行端、<code>inline-block</code> 基線、間隙隨寬度之穩定性）須於 Chrome／Safari／Firefox 三引擎目視核對——jsdom 僅驗證 DOM 結構正確性。</p>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="page">
|
|
||||||
<p>本頁為聚珍（Juzhen）使用文檔。所有文檔操作均於 docs 分支進行；main 僅存一份未追蹤之本地鏡像。MIT 授權；借鑑 Han.css／Heti 之思路與分類表，成品自含。</p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- RUNTIME_SPRITE -->
|
|
||||||
|
|
||||||
<script type="text/markdown" id="md-source">
|
|
||||||
# 聚珍（Juzhen）
|
|
||||||
|
|
||||||
現代簡／繁中文網頁排版套件。Han.css 之現代化重寫：複製乾淨、依 `lang` 全角／開明切換、`justify` 句末標點單份間距、跨瀏覽器一致。公開 API `createJuzhen` ／全域 `Juzhen`，自訂元素前綴 `jz-`。
|
|
||||||
|
|
||||||
## 用法
|
|
||||||
|
|
||||||
```html
|
|
||||||
<link rel="stylesheet" href="dist/juzhen.css">
|
|
||||||
<script src="dist/juzhen.iife.js"></script>
|
|
||||||
<script>
|
|
||||||
Juzhen.createJuzhen({ scope: { include: ".prose" } }).render();
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
JS 只注入 `jz-*` 結構，所有視覺尺寸在 juzhen.css，缺一不可。
|
|
||||||
|
|
||||||
## 已實作功能
|
|
||||||
|
|
||||||
- spacing 中西間隙（margin 模型，copy-clean；含 pill／隔離元素邊界與作者空格正規化）【文本級】
|
|
||||||
- longWord 長英文詞包裝（`<span lang>` + hyphens:auto）【段落級】
|
|
||||||
- jiya 標點擠壓（全角／開明／半角；半形 halt 預設、margin 後備）【文本級】
|
|
||||||
- jinze 禁則（避頭尾、justify 綁定；透明元素克隆切分最小綁定，pill／隔離／avoid 整元素綁定）【段落級】
|
|
||||||
- orphan 垂懸字避免（方案 C，末行 CJK 實義字 ≥ N；預設開 chars=2）【段落級】
|
|
||||||
- hanging 標點懸掛：已移除（純 CSS 機制級死路：寬度守恆矛盾，CSS 接觸不到斷行器；原生 hanging-punctuation 為唯一正解但僅 Safari 支援、且與 inline-block 原子互斥；選項保留為 no-op；詳見 §6.5.6）
|
|
||||||
- level 功能分級（文本級 vs 段落級；data-jz-level="text"／level:{text:選擇器} 標記標題等僅跑文本級）
|
|
||||||
- justify 句末標點單份間距（jz-char inline-block 原子）
|
|
||||||
|
|
||||||
## 標點半形：halt 預設與 margin 後備
|
|
||||||
|
|
||||||
- halt（預設，`jiya: true`）：字型 OpenType halt 定位，需字型支援。
|
|
||||||
- margin（`jiya: { halfWidth: "margin" }`）：width:0.5em＋字身依墨色偏側溢出定位，以 CSS 重現 halt；供缺 halt 字型（如方正書宋 GBK，僅含 vert）。
|
|
||||||
- 模式由 `data-jz-halfwidth` 子樹屬性決定，可逐區塊／lang。
|
|
||||||
- 偏側 inkBias 給 left/center/right/full，可 `jiya.bias` 逐 lang 逐字覆寫。
|
|
||||||
- 句末點號 。．！？（含全角句點 ． U+FF0E，異於 。 U+3002）：全角式與開明式句末皆保持全角 1em，banjiao 挤半。
|
|
||||||
- 連續標點：對每一標點獨立判斷，若其有空白之側緊鄰另一標點即收半。，「 全角式與開明式皆 1em；。」 全角式 1.5em／開明式 1em；透明穿越 strong/em 等行內邊界。句界例外：句末點號接開類（。「／？「）保留句末點號右空白、僅收開類 → 全角式與開明式皆 1.5em（對稱於 。」）；僅限句末點號＋開類，，「 與 」「／》《 仍 1em。半角式句末點號 baseline 已半、仍 1em（不回歸）。
|
|
||||||
|
|
||||||
### 字型適配工作流
|
|
||||||
|
|
||||||
1. `python3 tools/measure-bias.py <font.ttf>` 驗 halt、量偏側。
|
|
||||||
2. 有 halt → 用預設；無 halt → margin 後備＋偏側表。
|
|
||||||
3. 套用 jiya.bias，瀏覽器目視微調（重疊→往不移；有隙→往多移）。
|
|
||||||
|
|
||||||
## CSS 基礎設定
|
|
||||||
|
|
||||||
引入 juzhen.css（必須）；設 lang；scope class；hyphens:auto；text-align:justify（選用）。字型由消費端負責：聚珍不內建 font-family，逐語言字型自設於 .juzhen 或帶 lang 之容器（含 halt 字型，缺則 margin 後備＋bias）；聚珍以 font:inherit 繼承消費端字型、顯式保留 locl（正確標 lang ＋ 支援 locl 之字型即正常）。段落屬性照常設、原子透明：text-indent／hanging-punctuation／text-decoration 等已由庫內統一處理（歸零過套用、令原子承接段落裝飾），首行縮排正常、下劃線連續，無需額外配置。
|
|
||||||
|
|
||||||
## 行內元素三分類
|
|
||||||
|
|
||||||
行內元素對排版三種口徑，邏輯文本流之遍歷原語共用單一判定 isTransparent（以元素為準、非標籤名）；未在 styleInlines 之未知行內標籤採嚴格白名單、一律當邊界（透明須顯式登記）：透明（styleInlines——穿越、run 延續、可克隆切分）；隔離（isolateSelector，預設 "mark"——邊界斷 run／斷相鄰／不可切分、兩端補隙，內部照常處理）；整體（pillSelector——內部對一切 pass 不可見，禁則時作為原子鄰字單位整體綁入 jz-jinze）。結構克隆切分 canSplit、行端物理版面 lineedge 為正當之獨立層。多命中依單一分類器 finder.category 之優先序 avoid＞pill＞isolate＞block＞transparent＞opaque 定案（data-jz-skip 之 pill→avoid；pill＋isolate→pill）。avoid 七源（isSkipped／skipTags／SVG／contentEditable／data-jz-skip／skipAttribute／scope.avoid）以自身判定、命中即邊界（一次性用組合 isAvoided）；skipTags 預設不含 code/kbd（由 pill 涵蓋、三分類互斥）。行內公式／夾注引用宜列為 pill：`pillSelector: "code, kbd, .katex, .cite-ref"`。
|
|
||||||
|
|
||||||
## 分頁器相容
|
|
||||||
|
|
||||||
`justifyAtoms: false` → jz-char/jz-jinze 改 display:inline，相容 Paged.js。margin 後備與 justifyAtoms:false 不可兼得。
|
|
||||||
|
|
||||||
## 自定義字符分類 charClass
|
|
||||||
|
|
||||||
字符分類（中／西文、全寬標點各子類）抽象為規則集，內置默認，消費端經 options.charClass 追加擴充，覆寫 spacing／jiya／jinze 之判定。`charClass: { cjk?, western?, biaodian?:{stop,pause,open,close,middle,liga} }`。例：英文全角句號 ．（U+FF0E）預設未分類，以 biaodian.stop:"．" 歸為全寬句末標點即比照 。處理。向下兼容（不傳則行為不變、實例隔離）；v1 為追加語義，不重分類內置；結構性 ASCII 不開放。
|
|
||||||
|
|
||||||
## v1 相容 — 已移除
|
|
||||||
|
|
||||||
v1 相容層（createCjkAutospace／IIFE 全域別名／autospaceClass）已隨最後一批 v1 消費端遷移完成而移除；請改用 createJuzhen(options).render(root)。v1 原始碼保存於 v1-autospace 分支。
|
|
||||||
|
|
||||||
MIT。借鑑 Han.css／Heti 思路與分類表，成品自含。
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- RUNTIME_JS -->
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user