中文排版：typing.css
typing.css 是一个负责页面文字排版的 CSS 组件，通过对常用 HTML 文本标签进行样式重置以提供更为舒适的中文排版效果，并致力于解决以下问题：
-
- 排版标签语义化
- 尽可能地减少 class 和 id 的使用，让页面代码结构清晰整洁。
-
- 重视中文排版效果
- 重置部分标签样式，使之符合中文排版需求。
-
- 响应式排版设计
- 不同分辨率采用不同的排版策略，通过对字体、行间距的调整，以优化不同设备的阅读体验。
你可以在 Github 中下载到 typing.css。
于 <head> 中引入css后，在容器标签中添加 class="typing" 即可。
<head>
<link rel="stylesheet" type="text/css" href="./css/typing.css">
</head>
<body>
<article class="typing">
...
</article>
</body>为了满足中文排版的需求，typing.css 为 inline boxes 设置了合适的line-height，使之在显示中文时行间不会显得太过拥挤。以下两段排版实例来自 叔本华 Aphorismen zur Lebensweisheit 的中英文翻译。
《人生的智慧》，韦启昌译（第23-24页）：
同样，耶稣说：“愚人的生活比死亡还要槽糕。”因此，我们可以发现：大致而言，一个人对与人交往的爱好程度，跟他的智力的平庸思想的贫乏成正比。人们在这个世界上要么选择独处，要么选择庸俗，除此以外再没有更多别的选择了。
The Wisdom of Life, translated by Bailey Saunders (page 62)：
A very true saying, with which may be compared the words of Jesus, the son of Sirach, The life of a fool isworse than death. And, as a rule, it will be found that a man is sociable just in the degree in which he isintellectually poor and generally vulgar. For one's choice in this world does not go much strongeyondsolitude on one side and vulgarity on the other.
| 类型 | 标签 | 样式修改 |
|---|---|---|
| 全局 | .typing |
默认字体颜色: #07090c，字号和行高响应分辨率。 |
| 标题 | <h1>~<h6> |
使样式符合语义，<h3>~<h6>设置统一字号。自动编号。 |
| 分割线 | <hr> |
修改默认颜色，设置外边距。 |
| 段落 | <p> |
设置合适的行高与段间距。 |
| 列表 | <ul> | <ol> | <dl> |
修改无序和有序列表的列表符号，统一排版风格；增强定义列表联系。 |
| 表格 | <table> |
重置默认样式。表格外层容器添加class="typing-autoWrap"，可响应式支持。 |
| 代码块 | <pre> |
设置等宽字体。外层容器可添加class="typing-autoWrap"。 |
| 引用块 | <blockquote> |
修改样式。可包裹其他样式列表内的标签。 |
| 内容块 | <figure> |
添加外边距，可包裹其他样式列表内的标签。 |
| 短引用 | <q> |
引用符号修改为直角引号。 |
| 链接 | <a> |
使用border-bottom显示下划线，修改默认颜色，:hover颜色继承父级。 |
| 代码 | <code> |
继承全局字体。 |
| 着重 | <em> |
正体，强调语气。在Webkit内核中添加着重号，IE浏览器内渲染为粗体。 |
| 强调 | <strong> |
正体、粗体，强调程度最高。 |
| 删除 | <del> |
默认删除线样式。 |
| 缩写 | <abbr> |
修改鼠标手势为help，设置底部虚线。 |
| 上下标 | <sup> | <sub> |
字号为0.8em，行高为1。 |
| 图片 | <img> |
居中显示。 |
<q>
短引用
<del> 删除- 上标<sup> —— 下标<sub>
<code> 代码- <em> 着重（webkit 内核显示着重号，IE 显示粗体）
- <strong> 强调
- <a> 链接
typing.css 会根据 媒体查询 自动调整合适的 font 属性和版面边距。
| 分辨率 (px) | < 544 | 545 - 768 | 769 - 992 | 993 - 1380 | 1381 < |
|---|---|---|---|---|---|
| 正文字号 | 14 px | 14 px | 15 px | 16 px | 17 px |
| 行间距 | 1.6 | 1.68 | 1.8 | 1.82 | 1.86 |
| 段落间距 | 1.2 | 1.4 | 1.6 | 1.6 | 1.6 |
| 对齐方式 | 左对齐 | 左对齐 | 两端对齐 | 两端对齐 | 两端对齐 |
