|
4 | 4 |
|
5 | 5 | 网页技术自诞生之日起的使命就是图文排版。 |
6 | 6 |
|
7 | | -应当说网页上内容面临的情况要远比传统的纸质印刷复杂得多——无论是页面上板块的复杂度，还是各种浏览器的兼容性问题。作为前端，我们所要做的应当是在技术实现与视觉效果上达成一个平衡。毕竟不同设备上的系统字体、浏览器引擎的细节都有不同，要渲染的内容很多时候也不可预知，因此在网页上实现像传统纸质排印那样细粒度的控制几乎是不可能的。可喜的是随着前端技术的快速演进，曾经不好实现的一些功能（例如标点挤压）开始由浏览器原生提供。尽管还是有各种各样的限制，但终归是迈出了第一步。 |
| 7 | +应当说网页上内容面临的情况要远比传统的纸质印刷复杂得多——无论是页面上板块的复杂度，还是各种浏览器的兼容性问题。作为前端，我们所要做的应当是**在技术实现与视觉效果上达成一个平衡**。毕竟不同设备上的系统字体、浏览器引擎的细节都有不同，要渲染的内容很多时候也不可预知，因此在网页上实现像传统纸质排印那样细粒度的控制几乎是不可能的。可喜的是随着前端技术的快速演进，曾经不好实现的一些功能（例如标点挤压）开始由浏览器原生提供。尽管还是有各种各样的限制，但终归是迈出了第一步。 |
8 | 8 |
|
9 | 9 | 很久以前在 B 站上偶然关注了六个蛋老师 [oooooohmygosh](https://space.bilibili.com/38053181)，顺着他的推荐去看了 [孔雀计划](https://www.thetype.com/kongque/)，学到了很多。再加上我自己也有做一些业余的平面设计，就开始重视一些排印的细节，慢慢地养成了「强迫症」。到如今也攒下了不少经验，因此写下这篇杂谈。 |
10 | 10 |
|
11 | | -## 段落 |
| 11 | +## 断行与对齐 |
12 | 12 |
|
13 | | -### 两端对齐？ |
| 13 | +「断行」的问题包含了两个： |
14 | 14 |
|
15 | | -两端对齐在中文出版物中是很常见的。由于方块字的特性，两端对齐之后整整齐齐的十分美观。 |
| 15 | +- 中文标点避头尾 —— 使用 `line-break` 处理 |
| 16 | +- 与西文混排时，西文的断行 —— 使用 `word-break` 与 `overflow-wrap` 处理 |
16 | 17 |
|
17 | | -但是两端对齐的问题在于，当行长度较短的时候，若有标点避头尾的处理，字间距会被拉得很开。这一点在移动端尤为明显。 |
| 18 | +我们先来看标点避头尾的问题。浏览器排版引擎已经内置了标点避头尾的能力，即默认的 `line-break: auto`。但是很多人忽略的一点是：此功能的工作依赖 `lang` 属性提供文本的语言类型，如果没有正确设置，浏览器的避头尾可能会帮倒忙。例如下面的例子： |
| 19 | + |
| 20 | + |
| 21 | + |
| 22 | +可以看到，本来应该在冒号 `：` 与前引号 `“` 之间断行。但如果设置 `lang="en-US"`，会连着把前面几个字符和标点一起拽下来，形成 3em 宽的空白。至于为什么英文模式下会这样处理，本文就不展开讨论了。举这个例子是为了说明：**应正确设置 `lang` 属性，否则排版引擎会给出一些不符合预期的结果**。通常来说，`lang` 直接设置在顶层的 `html` 标签上，主要是中文的网页就写 `<html lang="zh-CN">`。 |
| 23 | + |
| 24 | +> [!note] |
| 25 | +> |
| 26 | +> 其实通常来说，如果没有设置，浏览器会通过内容自行判断内容的语言。 |
| 27 | +> |
| 28 | +> 但是比较离谱的一点是，VSCode 中使用 `html:5` 的缩写，回车得到的是： |
| 29 | +> |
| 30 | +> ```html {2} |
| 31 | +> <!DOCTYPE html> |
| 32 | +> <html lang="en"> |
| 33 | +> <head> |
| 34 | +> <meta charset="UTF-8"> |
| 35 | +> <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 36 | +> <title>Document</title> |
| 37 | +> </head> |
| 38 | +> <body> |
| 39 | +> |
| 40 | +> </body> |
| 41 | +> </html> |
| 42 | +> ``` |
| 43 | +> |
| 44 | +>这里标的是 `lang="en"`。相当多的人就放在那边不管了，即使是中文内容，也没有将其改成 `lang="zh-CN"`。这就导致了排版问题——甚至还不如不设。 |
| 45 | +
|
| 46 | +::: details 示例代码：设置 `lang` 属性对标点折行的影响 |
| 47 | +
|
| 48 | +```html |
| 49 | +<!DOCTYPE html> |
| 50 | +<html> |
| 51 | + <head> |
| 52 | + <meta charset="UTF-8" /> |
| 53 | + <style> |
| 54 | + .box { |
| 55 | + border: 1px solid black; |
| 56 | + width: 14em; |
| 57 | + font-family: "Microsoft YaHei"; |
| 58 | + text-spacing-trim: space-all; |
| 59 | + font-size: 36px; |
| 60 | + } |
| 61 | + </style> |
| 62 | + </head> |
| 63 | + <body> |
| 64 | + <div class="box"> |
| 65 | + <p lang="zh-CN">文本文本文本文（文本文本）：“文本文本文本文本。”</p> |
| 66 | + <p lang="en-US">文本文本文本文（文本文本）：“文本文本文本文本。”</p> |
| 67 | + </div> |
| 68 | + </body> |
| 69 | +</html> |
| 70 | +``` |
| 71 | +
|
| 72 | +::: |
| 73 | + |
| 74 | +至于西文的断行，由于本文主要讨论中文排版，就不过多展开了。只是想提一下国内出现的**滥用 `word-break: break-all` 的情况**：这种习惯是**很不好的**。这样设置之后，如果英文单词出现在断行处，会直接从单词中间劈开，对可读性影响非常大。 |
18 | 75 |
|
19 | 76 | ### 缩进与行距 |
20 | 77 |
|
|
23 | 80 | > 3. 所有段落首行皆不缩排，在段落与段落间加入一定程度的间距，作为间隔。部分书籍与杂志使用这种方式。 |
24 | 81 | > 4. 原则上，部分语气未完的段落予以断行、而不缩排。语气未完的段落前可能出现对话、引言以及为与正文有所区隔，由编辑所下的标题等。 |
25 | 82 |
|
26 | | - |
27 | | - |
28 | | -## 标点 |
29 | | - |
30 | | -### 避头尾 |
31 | | - |
32 | | -> - **不处理**<br>完全不处理行首行尾禁则。常见于台湾香港等地报刊。 |
33 | | -> - **基本处理**<br>点号（顿号、逗号、句号、冒号、分号、叹号、问号）、结束引号、结束括号、结束双书名号（书名号乙式）、连接号、间隔号、分隔号不能出现在一行的开头。开始引号、开始括号、开始单双书名号等符号，不能出现在一行的结尾。这是最推荐的方法。 |
34 | | -> - **GB 法**<br>在执行基本处理的基础上增加规定分隔号也不能出现在一行的结尾。 |
35 | | -> - **严格处理**<br>在执行 GB 法的基础上再增加规定破折号、省略号不能出现在一行的开头。 |
36 | | -
|
37 | 83 | ### 破折号 |
38 | 84 |
|
39 | 85 | > 破折号表示语气或声音的延续、语意的转换或行文的补充。呈现上为一条在水平和垂直方向均位于字面正中的直线，占两个汉字空间。推荐使用占两个汉字宽度的 `U+2E3A TWO-EM DASH` [⸺]，但通常也使用两个连续的 `U+2014 EM DASH` [—] 来实现。 |
40 | 86 | > |
41 | 87 | > 破折号不得以适配分行之由断开或拆至两行。 |
42 | 88 |
|
43 | | - |
44 | | - |
45 | 89 | ### 引号的全半角之争 |
46 | 90 |
|
47 | 91 | `「` 和 `」` |
|
56 | 100 |
|
57 | 101 | <Baseline feature="ruby" /> |
58 | 102 |
|
59 | | -## 繁与简 |
| 103 | +## 繁与简 |
0 commit comments