中文网页重设与排版：TYPO.CSS

中文网页重设与排版：TYPO.CSS

一致化浏览器排版效果，构建最适合中文阅读的网页排版

 

1. 关于 TYPO.CSS
2. 排版实例
   • 例1：论语学而篇第一
   • 例2：英文排版
3. 附录
   1. TYPO.CSS 排版偏重点
   2. 开源许可

一、关于 TYPO.CSS

TYPO.CSS 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。

现状和如何去做：

排版是一个麻烦的问题，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个 OS 中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的 Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。TYPO.CSS 要做的就是解决中文排版的问题。

TYPO.CSS 测试于如下平台：

OS/浏览器	Firefox	Chrome	Safari	Opera	IE9	IE8	IE7	IE6
Mac OS X	√	√	√	√	-	-	-	-
Windows 7	√	√	√	√	√	√	√	-
Windows XP	√	√	√	√	-	√	√	√
Ubuntu Linux	√	√	-	√	-	-	-	-

中文排版的重点和难点

在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS 来实现，像着重号。在 HTML4 中，着重号标签（<u>）已经被放弃，而 HTML5 被重新提起。TYPO.CSS 也根据实际情况提供相应的方案。我们重要要注意的两点是：

1. 语义：语义对应的用法和样式是否与中文排版一致
2. 表现：在各浏览器中的字体、大小和缩放是否如排版预期

对于这些，TYPO.CSS 排版项目的中文偏重注意点，都添加在附录中，详见：