heti/README.md

61 lines
1.7 KiB
Markdown
Raw Permalink Normal View History

2020-02-11 20:47:29 +08:00
# 赫蹏
赫蹏(hètí)是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来,可以为网站的读者带来更好的文章阅读体验。
2020-02-11 21:01:13 +08:00
预览:[https://sivan.github.io/heti/](https://sivan.github.io/heti/)
![Preview](https://raw.githubusercontent.com/sivan/heti/master/_site/assets/screenshot-grid.png)
2020-02-11 20:47:29 +08:00
主要特性:
- 贴合网格的排版;
2020-02-21 01:49:22 +08:00
- 全标签样式美化;
2020-02-11 21:01:13 +08:00
- 预置古文、诗词样式;
2020-02-21 01:49:22 +08:00
- 预置多种排版样式(行间注、多栏、竖排等);
- 多种预设字体族(仅限桌面端);
- 简/繁体中文支持;
2020-05-04 23:34:20 +08:00
- 自适应黑暗模式;
2020-03-15 23:28:45 +08:00
- 中西文混排美化,不再手敲空格👏(基于 JavaScript 脚本);
2020-05-05 00:31:24 +08:00
- 全角标点挤压(基于 JavaScript 脚本);
2020-02-11 21:01:13 +08:00
- 兼容 *normalize.css*、*CSS Reset* 等常见样式重置;
2020-02-11 20:47:29 +08:00
- 移动端支持;
- ……
2020-02-11 21:01:13 +08:00
总之,用上就会变好看。
2020-02-11 20:47:29 +08:00
## 使用方法
1. 在页面的 `<head>` 标签中引入 `heti.css` 文件:
```
2020-03-04 14:21:21 +08:00
<link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">
2020-02-11 20:47:29 +08:00
```
2020-03-15 23:28:45 +08:00
1. 在要作用的容器元素上增加 `class="heti"` 的类名即可:
2020-02-11 20:47:29 +08:00
```
<article class="entry heti">
<h1>我的世界观</h1>
<p>有钱人的生活就是这么朴实无华,且枯燥</p>
……
</article>
```
2020-03-15 23:28:45 +08:00
1. 使用增强脚本(可选):
```
<script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
<script>
const heti = new Heti('.heti');
heti.autoSpacing(); // 自动进行中西文混排美化和标点挤压
</script>
```
2020-02-11 20:47:29 +08:00
## WIP
2020-05-04 23:51:19 +08:00
暂时没什么想做的了。
2020-05-04 23:34:20 +08:00
- [x] 自适应黑暗模式
2020-03-15 23:21:40 +08:00
- [x] 标点挤压
2020-02-21 01:49:22 +08:00
- [x] 中、西文混排
- [x] 繁体中文支持
2020-02-11 20:47:29 +08:00
- [x] 诗词版式
- [x] 行间注版式
-- EOF --