Skip to content

Commit 5976658

Browse files
eallioneallion
committed
docs: new post
1 parent f3e3951 commit 5976658

File tree

8 files changed

+206
-0
lines changed

8 files changed

+206
-0
lines changed

‎content/blog/code/cjk-punctuation/background.jpg

36.4 KB
Loading

‎content/blog/code/cjk-punctuation/featured.png

611 KB
Loading

‎content/blog/code/cjk-punctuation/heti-addon.png

153 KB
Loading

‎content/blog/code/cjk-punctuation/index.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: "博客排版 - 挤压中文标点符号"
3+
authors: ["eallion"]
4+
categories: ["代码"]
5+
tags:
6+
- 博客
7+
- 标点
8+
- 排版
9+
slug: "cjk-punctuation"
10+
summary: "本文介绍了如何解决中文标点符号排版时出现的挤压问题。默认情况下，连续的中文全角标点会占用较多空间。为了解决这个问题，可以使用一些 JS 插件或 CSS 属性来实现标点挤压。其中推荐了「赫蹏」（heti）和 ethantw/Han 这两个 JS 插件，以及使用 OpenType 字体的 halt 功能来将全角字符显示为半角形式。此外，在进行中英文混合排版时也需要注意设置 HTML 全局属性 lang，并引入相应的 JS 脚本和自定义 CSS 样式文件。最后，在文章标签上添加 Heti 标签即可让挤压标点插件生效。"
11+
draft: false
12+
date: 2024-10-29T17:31:17+08:00
13+
# images: ["/assets/images/og/blog-typography-squeeze-the-chinese-punctuation.png"] # Delete this line
14+
---
15+
16+
### 示例
17+
18+
连续的中文全角标点符号的默认排版样式，默认 1 个全角标点会占用 2 个字符宽度，当连续的全角标点出现时，会出现大量的空白。（可点击图片）看一个例子：
19+
<a href="https://sivan.github.io/heti/#javascript" target="_blank"><img src="heti-addon.png" class="nozoom"></a>
20+
21+
### 解决方案
22+
23+
如「[赫蹏](https://sivan.github.io/heti/)」（heti）就有挤压标点符号的 JS 插件；还有 [ethantw/Han](https://github.com/ethantw/Han) 也很优秀；OpenType 字体的 [halt](https://helpx.adobe.com/fonts/using/open-type-syntax.html#halt)（Alternate Half Widths）功能也可将全角字符以半角的形式显示，只需要设置 CSS 属性 `font-feature-settings: "halt"` 便可打开该特性，只是支持的字体有限。就不一一例举了。
24+
25+
关于中英文混合排版是另一个大的话题。
26+
27+
我在本地用了 [autocorrect](https://github.com/huacnlee/autocorrect) 插件，写完博客就对文章进行中英文混合排版自动格式化了，不需要在线插件，所以现在只介绍标点挤压。
28+
29+
#### 1. 全局属性 lang
30+
31+
不仅限于此插件，所有博客页面应该设置对应的 HTML 全局属性 lang：
32+
33+
```html
34+
<html lang="zh-cn"></html>
35+
```
36+
37+
#### 2. 引入 heti-addon
38+
39+
我直接用了「赫蹏」标点挤压增强脚本：
40+
41+
```html
42+
<script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
43+
```
44+
45+
```html
46+
<script>
47+
const heti = new Heti('.heti');
48+
heti.autoSpacing();
49+
</script>
50+
```
51+
52+
PS：也可以把 JS 下载到本地引入，如 Hugo 下载到 assets/js 目录：
53+
54+
```html
55+
{{ $hetiJS := resources.Get "js/heti-addon.min.js" | fingerprint "sha256" }}
56+
<script type="text/javascript" src="{{ $hetiJS.RelPermalink }}" integrity="{{ $hetiJS.Data.Integrity }}"></script>
57+
```
58+
59+
#### 3. 添加自定义 CSS
60+
61+
从 Heti.css 中提取了挤压标点用到的 CSS，添加到博客的样式文件中：
62+
63+
```css
64+
/* heti custom css */
65+
.heti {
66+
font-feature-settings: "halt";
67+
}
68+
69+
.heti heti-spacing {
70+
display: inline;
71+
}
72+
73+
.heti .heti-spacing-start {
74+
margin-inline-end: .25em;
75+
}
76+
77+
.heti .heti-spacing-end {
78+
margin-inline-start: .25em;
79+
}
80+
81+
.heti heti-adjacent {
82+
display: inline;
83+
}
84+
85+
.heti .heti-adjacent-half {
86+
margin-inline-end: -0.5em;
87+
}
88+
89+
.heti .heti-adjacent-quarter {
90+
margin-inline-end: -0.25em;
91+
}
92+
```
93+
94+
#### 4. 添加 Heti 标签
95+
96+
添加 Heti 标签让挤压标点插件生效。不建议加到 `<html>` 或者 `<body>` 等标签上，尽量加到文章标签上：
97+
98+
```diff
99+
- <div class="content">
100+
+ <div class="content heti">
101+
<p>...</p>
102+
</div>
103+
```

‎example/blog/cjk-punctuation/background.jpg

36.4 KB
Loading

‎example/blog/cjk-punctuation/featured.png

611 KB
Loading

‎example/blog/cjk-punctuation/heti-addon.png

153 KB
Loading

‎example/blog/cjk-punctuation/index.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: "博客排版 - 挤压中文标点符号"
3+
authors: ["eallion"]
4+
categories: ["代码"]
5+
tags:
6+
- 博客
7+
- 标点
8+
- 排版
9+
slug: "cjk-punctuation"
10+
summary: "本文介绍了如何解决中文标点符号排版时出现的挤压问题。默认情况下，连续的中文全角标点会占用较多空间。为了解决这个问题，可以使用一些 JS 插件或 CSS 属性来实现标点挤压。其中推荐了「赫蹏」（heti）和 ethantw/Han 这两个 JS 插件，以及使用 OpenType 字体的 halt 功能来将全角字符显示为半角形式。此外，在进行中英文混合排版时也需要注意设置 HTML 全局属性 lang，并引入相应的 JS 脚本和自定义 CSS 样式文件。最后，在文章标签上添加 Heti 标签即可让挤压标点插件生效。"
11+
draft: false
12+
date: 2024-10-29T17:31:17+08:00
13+
# images: ["/assets/images/og/blog-typography-squeeze-the-chinese-punctuation.png"] # Delete this line
14+
---
15+
16+
### 示例
17+
18+
连续的中文全角标点符号的默认排版样式，默认 1 个全角标点会占用 2 个字符宽度，当连续的全角标点出现时，会出现大量的空白。（可点击图片）看一个例子：
19+
<a href="https://sivan.github.io/heti/#javascript" target="_blank"><img src="heti-addon.png" class="nozoom"></a>
20+
21+
### 解决方案
22+
23+
如「[赫蹏](https://sivan.github.io/heti/)」（heti）就有挤压标点符号的 JS 插件；还有 [ethantw/Han](https://github.com/ethantw/Han) 也很优秀；OpenType 字体的 [halt](https://helpx.adobe.com/fonts/using/open-type-syntax.html#halt)（Alternate Half Widths）功能也可将全角字符以半角的形式显示，只需要设置 CSS 属性 `font-feature-settings: "halt"` 便可打开该特性，只是支持的字体有限。就不一一例举了。
24+
25+
关于中英文混合排版是另一个大的话题。
26+
27+
我在本地用了 [autocorrect](https://github.com/huacnlee/autocorrect) 插件，写完博客就对文章进行中英文混合排版自动格式化了，不需要在线插件，所以现在只介绍标点挤压。
28+
29+
#### 1. 全局属性 lang
30+
31+
不仅限于此插件，所有博客页面应该设置对应的 HTML 全局属性 lang：
32+
33+
```html
34+
<html lang="zh-cn"></html>
35+
```
36+
37+
#### 2. 引入 heti-addon
38+
39+
我直接用了「赫蹏」标点挤压增强脚本：
40+
41+
```html
42+
<script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
43+
```
44+
45+
```html
46+
<script>
47+
const heti = new Heti('.heti');
48+
heti.autoSpacing();
49+
</script>
50+
```
51+
52+
PS：也可以把 JS 下载到本地引入，如 Hugo 下载到 assets/js 目录：
53+
54+
```html
55+
{{ $hetiJS := resources.Get "js/heti-addon.min.js" | fingerprint "sha256" }}
56+
<script type="text/javascript" src="{{ $hetiJS.RelPermalink }}" integrity="{{ $hetiJS.Data.Integrity }}"></script>
57+
```
58+
59+
#### 3. 添加自定义 CSS
60+
61+
从 Heti.css 中提取了挤压标点用到的 CSS，添加到博客的样式文件中：
62+
63+
```css
64+
/* heti custom css */
65+
.heti {
66+
font-feature-settings: "halt";
67+
}
68+
69+
.heti heti-spacing {
70+
display: inline;
71+
}
72+
73+
.heti .heti-spacing-start {
74+
margin-inline-end: .25em;
75+
}
76+
77+
.heti .heti-spacing-end {
78+
margin-inline-start: .25em;
79+
}
80+
81+
.heti heti-adjacent {
82+
display: inline;
83+
}
84+
85+
.heti .heti-adjacent-half {
86+
margin-inline-end: -0.5em;
87+
}
88+
89+
.heti .heti-adjacent-quarter {
90+
margin-inline-end: -0.25em;
91+
}
92+
```
93+
94+
#### 4. 添加 Heti 标签
95+
96+
添加 Heti 标签让挤压标点插件生效。不建议加到 `<html>` 或者 `<body>` 等标签上，尽量加到文章标签上：
97+
98+
```diff
99+
- <div class="content">
100+
+ <div class="content heti">
101+
<p>...</p>
102+
</div>
103+
```

0 commit comments

Comments
 (0)