Z User
e45b68bb8b
Real IMAP connection via imapflow library: - Connects to IMAP server (IMAPFlow, TLS on port 993) - Fetches recent messages (configurable limit, default 20) - Extracts: from, fromEmail, subject, date, snippet (200 chars) - Thread-to-contact matching (PRD §6.1): 1. Match sender email against persons table 2. If no person match, extract domain and match against company.website 3. Returns matchedCompany + matchedPerson for each email - Audit-logged (action: crm.mailsync:imap) - Zod validated (host, port, user, password, folder, limit) - 502 on IMAP connection failure with detail - 400 on validation failure Tested: invalid creds → 502 'IMAP connection failed', missing host → 400
345 lines
13 KiB
Markdown
Executable File
345 lines
13 KiB
Markdown
Executable File
# 文本排印细节 Text Typesetting Details
|
||
|
||
「最基础的美学，易忽略的细节与阅读」——很多看似高级的版面，其实只是把这些"小事"全做对了。
|
||
|
||
> **本文专注**：字号 / 字重 / 字距 / 行距 / 段落 / 灰度 / 中英混排 / 孤行孤字 / Ruby 注音。
|
||
> **标点专题**（避头尾 / 破折号 / 4 种风格 / 加法减法模式 / 挤压拉伸优先级）见 `punctuation.md`。
|
||
> **断行专题**（标题断句 / 不可分离禁则）见 `title-and-breaking.md`。
|
||
|
||
## 一、版心（Type area）：决定阅读心理压力
|
||
|
||
版心位置和页边距对比强烈到能"潜移默化影响读者审美"。
|
||
|
||
- **太满**（每行 48 字、每页 30 行、四周边距小）→ 文字"扑面而来"，回行困难，疲劳
|
||
- **舒展**（每行 17–25 字、页边距按比例递增）→ 优美、轻松、愉悦
|
||
|
||
每行字数太多的版面，会让读者阅读时心理压力较大，回行时不易找到下一行的起头，增加视觉疲劳。
|
||
|
||
### 横排页边距三大法则
|
||
1. **内紧外松**：订口（书脊）< 切口（外）。视觉重心向外。
|
||
2. **上紧下松**：天头 < 地脚。视觉重心略往上。
|
||
3. **比例递增**：常用 **2 : 3 : 5 : 8** 或 **3 : 5 : 8 : 13**（费氏数列）
|
||
|
||
最常用配比（横排书籍）：
|
||
```
|
||
订口 : 切口 : 天头 : 地脚 = 3 : 5 : 8 : 13
|
||
即 L3 + R5 + O8 + U13 （字数）
|
||
```
|
||
|
||
### Web/H5 边距换算
|
||
设计稿 375px 宽 H5：
|
||
- 屏宽 375，左右各 20–24px，正文版心 327–335px
|
||
- 上 24–32px，下 32–48px
|
||
- 模块间距用 16/24/32（4 的倍数）
|
||
|
||
## 二、字间距 字距
|
||
|
||
**核心法则：正文密排，不动字距。**
|
||
|
||
### 字面率（Face ratio）
|
||
字符在方框内实际占多少。现代字体：
|
||
- 汉仪玄宋：92%
|
||
- 方正雅宋：94%
|
||
- 汉仪书宋：~96%
|
||
- 方正书宋：96%
|
||
- 思源黑体：~95%
|
||
|
||
字面率 < 100% 意味着**两个字紧贴排版时已经天然有间距**，不需要再额外加字距。
|
||
|
||
### 字距规则
|
||
- **正文**：letter-spacing 0，密排
|
||
- **标题**（≥ 24pt）：可加 0.05–0.1em 增加从容感
|
||
- **超大字号**（≥ 40pt 海报）：可加 0.1–0.2em
|
||
- **Logo / 单字装饰**：字距按设计意图
|
||
|
||
### 4 种字距模式（W3C 术语）
|
||
|
||
| 模式 | 字距 | 用途 |
|
||
|---|---|---|
|
||
| **密排** | 0 | 默认正文 |
|
||
| **疏排** | 1/4 em / 1/3 em / 1/2 em / 1 em | 标题求平衡、图说短文求平衡、短诗词、儿童读物 |
|
||
| **均排** | 由算法均摊 | 禁则处理后凑齐行长；列表中并列项目求体例一致 |
|
||
| **紧排** | 负值 | 杂志标题、广告文案多字时凑一行（**不适用于书籍标题与正文**）|
|
||
|
||
CSS 注意：
|
||
```css
|
||
/* 正文区，不要碰 */
|
||
.body { letter-spacing: 0; }
|
||
|
||
/* 大标题可以稍加 */
|
||
.headline { letter-spacing: 0.05em; }
|
||
|
||
/* 不要这样 */
|
||
.body-bad { letter-spacing: 1px; } /* 破坏字号节奏 */
|
||
```
|
||
|
||
## 三、行间距 行距
|
||
|
||
### 比例区间
|
||
| 比例（字号:行距） | 体感 | 用途 |
|
||
|---|---|---|
|
||
| 1 : 1.0 | 密排、铅字时代标准 | 字典、报纸（每行字少时） |
|
||
| 1 : 1.33 | 紧凑 | 杂志、新闻 |
|
||
| **1 : 1.5** | **现代标准** | **网页正文、商务文档** |
|
||
| 1 : 1.7 | 舒适 | 长文阅读、技术文档 |
|
||
| 1 : 2.0 | 疏朗 | 文学、诗歌、画册说明 |
|
||
| 1 : 2.5+ | 飘散，章节断裂感 | 避免 |
|
||
|
||
W3C 规定：**行距（行间空白）= 字号的 50%–100%**；对应行高（含字本身）= 字号的 1.5–2 倍。超出 100% 不增易读性。
|
||
|
||
铅活字时代的优美版面（如 1918 年前后的期刊正文），字号 : 行距比约在 **1:1 ~ 4:3** 之间，是经典优美范例。
|
||
|
||
### 实操值
|
||
- 印刷正文 9pt → 行距 12–18pt（默认 18pt = 1:2 雍容）
|
||
- 印刷正文 10.5pt → 行距 14–18pt
|
||
- 屏幕 16px → line-height 1.5–1.7（= 24–27px）
|
||
- 屏幕 14px → line-height 1.6–1.8
|
||
|
||
**所有行距必须是模数整数倍。** 否则跨语种/跨字号无法行对齐。
|
||
|
||
### 行间标点行距加成（W3C）
|
||
- 行间有专名号（﹏）、甲式书名号（﹏）、着重号时：
|
||
- **单面装行距 ≥ 1/2 字号**
|
||
- **双面装行距 ≥ 5/8 字号**
|
||
- 直排带注音时：行距 ≥ 1.5 × 基字
|
||
|
||
## 四、字重与字号
|
||
|
||
### 字重与对比度的关系
|
||
- 字重塑造文字与载体（纸/屏）的对比度
|
||
- **小字 + 重字重** > 小字 + 轻字重（小字更需对比度）
|
||
- **大字 + 轻字重** 可显优雅，大字也禁得起轻字重
|
||
|
||
实例：薄而透的纸张上用大字重宋体作正文，文字的黑与纸张的白构成易于阅读的对比关系，大字重还能反向突出纸张的"透"。
|
||
|
||
### 字重选用矩阵
|
||
| 字号 | 屏幕 | 印刷 | 推荐字重 |
|
||
|---|---|---|---|
|
||
| 极小 | < 12px | < 6pt | Medium / Bold（55S–65S） |
|
||
| 小 | 12–14px | 6–7.5pt | Regular / Medium（45S–55S） |
|
||
| 中 | 14–18px | 8–10pt | Regular（45S–55S） |
|
||
| 大 | 18–24px | 10–14pt | Regular / Light（35S–45S） |
|
||
| 极大 | > 24px | > 14pt | Light / Thin 可选（25S–45S） |
|
||
|
||
### 层级用字重不用字体
|
||
不同字号 × 不同字重，常常会形成灰度近似的面，从而拉开与其他元素的空间关系。例如：大字号正文用较细字重，小字号辅文用中等字重，它们灰度接近，但通过字号自然分出层级。
|
||
|
||
层级关系优先级：**字号 > 字重 > 颜色 > 字体**。前两个搞不定再考虑后两个。
|
||
|
||
## 五、段落与体例
|
||
|
||
### 段落组织：不要把 2 字缩进当成通用默认
|
||
- 书籍、古典文本、公文、长篇正式印刷物：可以采用首行缩进，常见为 2 字；短栏可减弱为 1 字
|
||
- 网页、H5、小红书、Dashboard、PPT、卡片：通常不使用首行缩进，优先用段间距、分组、标题层级来组织文本
|
||
- 引文可使用整段缩进或边线/底色/卡片区分；不要机械套 4 字缩进
|
||
- 列表项无需首行缩进
|
||
- 同一作品只选择一种段落组织方式，不要“首行缩进 + 大段间距”同时堆叠
|
||
|
||
### 段落 4 种缩排模式（W3C CLReq §6.2.1）
|
||
|
||
| 模式 | 做法 | 适用 |
|
||
|---|---|---|
|
||
| **1. 全部段落首行缩排** | 所有段落首行空 2 字 | 书籍、古典文本、公文、正式印刷物 |
|
||
| **2. 首段不缩排，其余缩排** | 首段顶格，其余段缩 2 字 | 长篇文章、英译中、跨文化项目 |
|
||
| **3. 所有段落不缩排 + 段间距** | 段首顶格，段间空一定行距 | 现代网页、技术文档、H5、PPT、卡片、Markdown 渲染 |
|
||
| **4. 语气未完段断行不缩排** | 段断而语气未完时，下一段顶格 | 散文、诗、剧本 |
|
||
|
||
### 凸排（Hanging Indent）
|
||
|
||
首行不缩、次行起缩。用于：
|
||
- 剧本对白
|
||
- Q&A 问答
|
||
- 法条
|
||
- 词典词条
|
||
- 人名列表（花名册）
|
||
|
||
```
|
||
李白：床前明月光，
|
||
疑是地上霜。
|
||
杜甫：好雨知时节，
|
||
当春乃发生。
|
||
```
|
||
|
||
CSS：
|
||
```css
|
||
.hanging {
|
||
text-indent: -4em; /* 首行向左凸 4 字 */
|
||
padding-left: 4em; /* 整段左缩 4 字 */
|
||
}
|
||
```
|
||
|
||
### 段落缩排（Block Indent）
|
||
|
||
行首侧统一缩进，用于引文、诗词、副标题。字号同正文，可换字体或加段间距，段间距应为正文行的整数倍。
|
||
|
||
```css
|
||
blockquote {
|
||
margin: 1em 4em 1em 4em; /* 左右各缩 4 字 */
|
||
font-style: normal; /* 中文不要斜体 */
|
||
}
|
||
```
|
||
|
||
### 小标题处理
|
||
经典示范：用同一字体同一字号，仅用空字格区分体例。
|
||
- 引文：段首不空格，用整段缩进、边线、底色或卡片区分；具体缩进量由版式决定
|
||
- 小标题：段首空 6 字（向右推），与正文不空行
|
||
- 正文：按所选段落组织方式处理；书籍/公文可首行缩进，网页/卡片/UI 通常顶格并用段间距分组
|
||
|
||
这种"用空间代替字号"的处理，是高级排版的标志——**信息层级不靠强对比，靠空间秩序**。
|
||
|
||
### 单行对齐 4 种（W3C）
|
||
- **居中**：标题、署名、独立元素
|
||
- **行首**：列表项（左对齐于行首）
|
||
- **行尾**：日期、署名、价格（右对齐于行尾）
|
||
- **均排**：禁则处理后凑齐 / 列表并列项体例一致；**段落末行 / 段落只有一行时不用均排**
|
||
|
||
## 六、文本灰度均匀
|
||
|
||
排版的至高理想：**文字在版心内形成极致均匀的灰**，使塑造文本的型变得容易。
|
||
|
||
灰度均匀的敌人：
|
||
1. 标点未挤压 → 局部白块
|
||
2. 中英文混排无字距 → 字宽不均
|
||
3. 多字重混用 → 黑白对比跳跃
|
||
4. 行末参差不齐（左对齐）→ 右侧灰度断
|
||
5. 大量繁体字夹杂简体 → 局部更黑
|
||
|
||
灰度均匀的盟友：
|
||
1. 启用两端对齐（justify）
|
||
2. 启用中英文混排自动间距
|
||
3. 同段内字重统一
|
||
4. 标点挤压 + 避头尾
|
||
5. 行距足够稳定
|
||
|
||
### CSS 实现
|
||
```css
|
||
.body {
|
||
text-align: justify;
|
||
text-justify: inter-character; /* 中文字间分布 */
|
||
text-spacing-trim: space-all;
|
||
line-break: strict;
|
||
}
|
||
```
|
||
|
||
## 七、中英文混排
|
||
|
||
- 中英文之间**自动加 1/4 字宽空隙**（盘古之白）
|
||
- Web: `<span>中文</span> <span>english</span>` 之间留半个空格；或用 `text-autospace`（IE 老规范）/CSS Text Module Level 4 的 `text-spacing`
|
||
- Markdown 写作：手工在中英之间空格
|
||
- 西文标点（半角）和中文字符之间也要加空格
|
||
- 数字与中文之间同样要加：`第 3 章`，不要 `第3章`
|
||
- 单位与数字之间不空：`30px` `9pt`，不要 `30 px`
|
||
|
||
### 间距 W3C 规则
|
||
|
||
- 横排西文字母用比例字体；数字用比例或等宽字体
|
||
- 汉字与西文字母/数字间空隙 **≤ 1/4 em**（默认 1/4 em，最小 1/8 em，最大 1/2 em）
|
||
- 西文/数字在行首行尾时**不加空白**
|
||
- 中文点号前后、中文开始夹注符号之后、结束夹注符号之前的西文/数字**不调整字距、不加空白**
|
||
|
||
## 八、孤行孤字（Widow & Orphan）救济
|
||
|
||
排版的"末页综合症"。详见 `title-and-breaking.md` §五。
|
||
|
||
### 孤字不成行（Orphan）
|
||
段落最后一行只有 1 字 + 1 标点。
|
||
|
||
救济顺序：
|
||
1. **挤进上行**（首选）：标点宽度调整、中西间距压缩、字距均压
|
||
2. **删字回前行**：与作者商议删 1–2 字
|
||
3. **加字补足**：补 1 字让末行≥3 字
|
||
4. **均排末行**（次选）：仅适用于诗歌对联
|
||
|
||
### 孤行不成页（Widow）
|
||
页首是前段的最后一行。
|
||
|
||
救济顺序：
|
||
1. **孤行回前页**：超出版心 1 行接前段
|
||
2. **前页末段取 1 行**：修改前段提前结束
|
||
3. **删字**：删本段开头让孤行不孤
|
||
4. **加字**：补 1 行字数
|
||
|
||
CSS：
|
||
```css
|
||
p {
|
||
orphans: 2; /* 段末至少留 2 行 */
|
||
widows: 2; /* 段首至少留 2 行 */
|
||
}
|
||
```
|
||
|
||
## 九、Ruby 注音 / 拼音（W3C CLReq §5.5）
|
||
|
||
### 注音符号（Bopomofo，台湾用）
|
||
- 横排 / 直排原则上都置基字**右侧**
|
||
- 注文字号 : 基字 = **3 : 10**
|
||
- 调号同字号；轻声符 = 1 : 15
|
||
- 声调位置：
|
||
- 平上去入声：标在末符号**右上方**
|
||
- 入声：右下方
|
||
- 轻声：标在前方
|
||
- 直排向上回返半个符号位、横排向右突出半个符号位
|
||
|
||
### 汉语拼音
|
||
- **仅横排**
|
||
- 常放在基字**上方**（部分场景下方）
|
||
- 注文字号 = 基字字号的 **1/2**
|
||
- 相邻注文间距 ≥ 西文词间空格 ≈ 1/4 字宽
|
||
- 字形：用 a / g 单层、二声调下粗上细的**无衬线体**（出版/教育界惯例，无国标）
|
||
|
||
**两种用法**：
|
||
1. **单字标音**：注文总在上方、汉字间字距大、全小写
|
||
2. **分词连写标音**：注文常在下方、词间约 1/2 字宽空、句首/专名大写、标点跟左侧注文
|
||
|
||
### HTML5 Ruby
|
||
|
||
```html
|
||
<!-- 单字标音 -->
|
||
<ruby>
|
||
汉<rt>hàn</rt>语<rt>yǔ</rt>拼<rt>pīn</rt>音<rt>yīn</rt>
|
||
</ruby>
|
||
|
||
<!-- 整词标音 -->
|
||
<ruby>
|
||
汉语拼音<rt>Hànyǔ Pīnyīn</rt>
|
||
</ruby>
|
||
|
||
<!-- 含括号回退 -->
|
||
<ruby>
|
||
汉<rp>(</rp><rt>hàn</rt><rp>)</rp>
|
||
</ruby>
|
||
```
|
||
|
||
CSS：
|
||
```css
|
||
ruby {
|
||
ruby-position: over; /* 注文在上 */
|
||
/* ruby-position: under; // 注文在下（分词连写法）*/
|
||
}
|
||
|
||
rt {
|
||
font-size: 0.5em; /* 拼音 = 基字 1/2 */
|
||
font-family: "Source Sans Pro", "Inter", sans-serif;
|
||
line-height: 1;
|
||
}
|
||
```
|
||
|
||
### 注意：CSS Ruby 各浏览器支持不一致；Apple Books 字体选择较全。Web 上稳定方案是手动用 `<sup>` 模拟。
|
||
|
||
## 十、检查清单（排印完成前必过）
|
||
|
||
- [ ] 正文行长 17–40 字（最多 48 横排 / 55 直排）？
|
||
- [ ] 行距是字号 1.5–2 倍？
|
||
- [ ] 行距是模数整数倍？
|
||
- [ ] 所有字号都在模数体系内？
|
||
- [ ] 内 < 外 < 上 < 下 的页边距？
|
||
- [ ] 正文 letter-spacing 是 0？
|
||
- [ ] 段落组织方式是否符合媒介（网页/卡片不机械使用首行缩进，书籍/公文再按模板设置）？
|
||
- [ ] 一段内字重统一？
|
||
- [ ] 中英文之间有 1/4 字宽空格？
|
||
- [ ] 段末是否有"孤字 + 标点"？
|
||
- [ ] 页首是否有"孤行"？
|
||
- [ ] 整页放远看文本灰度均匀？
|
||
- [ ] 段落是否选定 4 种缩排模式中的一种并贯穿全文？
|
||
|
||
任何一项不过关，先修这一项再说"美学"。
|