- -

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

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

- -

关于 TYPO.CSS
排版实例 -
- 例1：论语学而篇第一
- 例2：英文排版
-
附录 -
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 也根据实际情况提供相应的方案。我们重要要注意的两点是：

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

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

- 附录一：TYPO.CSS 排版偏重点 -

- -

目前仍处于 alpha 开发阶段，测试平台的覆盖，特别是在移动端上还没有覆盖完主流平台，希望有能力的同学能加入测试行列，或者加入到 TYPO.CSS 的开发。加入方法：参与 TYPO.CSS 开发。如有批评、建议和意见，也随时欢迎给在 Github 直接提 issues，或给我发邮件。

- - -

二、排版实例：

提供2个排版实例，第一个中文实例来自于来自于张燕婴的《论语》，由于古文排版涉及到的元素比较多，所以采用《论语》中《学而》的第一篇作为排版实例介绍；第2个来自到经典的 Lorem Ipsum，并加入了一些代码和列表等比较具有代表性的排版元素。

- -

例1：论语学而篇第一

作者：孔子（前551年9月28日－前479年4月11日）

- -

本篇引语

《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是“吾日三省吾身”；“节用而爱人，使民以时”；“礼之用，和为贵”以及仁、孝、信等道德范畴。

- -

原文

子曰^[1]：“学^[2]而时习^[3]之，不亦说^[4]乎？有朋^[5]自远方来，不亦乐^[6]乎？人不知^[7]，而不愠^[8]，不亦君子^[9]乎？”

- -

注释

- -

译文

孔子说：“学了又时常温习和练习，不是很愉快吗？有志同道合的人从远方来，不是很令人高兴的吗？人家不了解我，我也不怨恨、恼怒，不也是一个有德的君子吗？”

- -

评析

宋代著名学者朱熹对此章评价极高，说它是“入道之门，积德之基”。本章这三句话是人们非常熟悉的。历来的解释都是：学了以后，又时常温习和练习，不也高兴吗等等。三句话，一句一个意思，前后句子也没有什么连贯性。但也有人认为这样解释不符合原义，指出这里的“学”不是指学习，而是指学说或主张；“时”不能解为时常，而是时代或社会的意思，“习”不是温习，而是使用，引申为采用。而且，这三句话不是孤立的，而是前后相互连贯的。这三句的意思是：自己的学说，要是被社会采用了，那就太高兴了；退一步说，要是没有被社会所采用，可是很多朋友赞同我的学说，纷纷到我这里来讨论问题，我也感到快乐；再退一步说，即使社会不采用，人们也不理解我，我也不怨恨，这样做，不也就是君子吗？（见《齐鲁学刊》1986年第6期文）这种解释可以自圆其说，而且也有一定的道理，供读者在理解本章内容时参考。 -此外，在对“人不知，而不愠”一句的解释中，也有人认为，“人不知”的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，“人不知”就是“人家不知道我所讲述的”了。这样的解释似乎有些牵强。 -总之，本章提出以学习为乐事，做到人不知而不愠，反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见，有助于对第一章内容的深入了解。 -

- -

例2：英文排版

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

-"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…" -
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain…"
-
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain…" -
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain…"
-
-

- -

The standard Lorem Ipsum passage, used since the 1500s

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

- -

Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

- -

List style in action

If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as your brother and hope as your sentry. -
如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。
-
Sometimes one pays most for the things one gets for nothing. -
有时候一个人为不花钱得到的东西付出的代价最高。
-
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily. -
只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。
-

- -

You may want to create a perfect `<hr />` line, despite the fact that there will never have one

La Racheforcauld said: "Few things are impossible in themselves; and it is often for want of will ,rather than of means, that man fails to succeed". You just need to follow the browser's behavior, and set a right margin to it。it will works nice as the demo you're watching now. The following code is the best way to render typo in Chinese:

-/* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
-h1,h2,h3,h4,h5,h6 {
-    line-height:1;font-family:Arial,sans-serif;margin:1.4em 0 0.8em;
-}
-h1{font-size:1.8em;}
-h2{font-size:1.6em;}
-h3{font-size:1.4em;}
-h4{font-size:1.2em;}
-h5,h6{font-size:1em;}
-
-/* 现代排版：保证块/段落之间的空白隔行 */
-.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr{
-    margin:1em 0 0.6em;
-}
-

- -

三、附录

- -

1、TYPO.CSS 排版偏重点

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

类型	语义	标签	注意点
基础标签	标题	`h1` ～ `h6`	全局不强制大小，`.typo` 中标题与其对应的内容应紧贴，并且有相应的大小设置
	上、下标	`sup`/`sub`	保持与 MicroSoft Office Word 等程序的日常排版一致
	引用	`blockquote`	显示/嵌套样式
	缩写	`abbr`	是否都有下划线，鼠标 `hover` 是否为帮助手势
	分割线	`hr`	显示的 `padding` 和 `margin`正确
	列表	`ul`/`ol`/`dl`	在全局没有 `list-style`，在 .`typo` 中对齐正确
	定义列表	`dl`	全局 `padding` 和 `margin`为0， .`typo` 中对齐正确
	选项	`input[type=radio[, checkbox]]`	与其他 `form` 元素排版时是否居中
	斜体	`i`	只设置一种斜体，让 `em` 和 `cite` 显示为正体
	强调	`em`	在全局显示正体，在 `.typo` 中显示与 `b` 和 `strong` 的样式一致，为粗休
	加强	`strong/b`	显示为粗体
	标记	`mark`	类似荧光笔
	印刷	`small`	保持为正确字体的 80% 大小，颜色设置为浅灰色
	表格	`table`	全局不显示线条，在 `table` 中显示表格外框，并且表头有浅灰背景
	代码	`pre`/`code`	字体使用 `courier` 系字体，保持与 `serif` 有比较一致的显示效果
特殊符号	着重号	在文字下加点（•）	在支持 `:after` 和 `:before` 的浏览器可以做渐进增强实现
	专名号	林建锋	专名号，有下划线，使用 `u` 或都 `.typo-u` 类
	破折号	——	保持一划，而非两划
	人民币	¥	使用两平等线的符号，或者 HTML 实体符号 `¥`
	删除符	~~已删除（deleted）~~	一致化各浏览器显示，中英混排正确
加强类	专名号	`.typo-u`	由于 `u` 被 HTML4 放弃，在向后兼容上推荐使用
	着重符	`.typo-em`	利用 `:after` 和 `:before` 实现着重符
	首字下沉	`.typo-first`	特殊排版
	清除浮动	`.clearfix`	与一般 CSS Reset 保持一对致 API
注意点	（1）中英文混排行高/行距
	（2）上下标在 IE 中显示效果
	（3）块/段落分割空白是否符合设计原则
	（4）input 多余空间问题
	（5）默认字体色彩，目前采用 `#333` 在各种浏览显示比较好

- -

2、开源许可

TYPO.CSS 基于 MIT License 开源，使用代码只需说明来源，或者引用 license.txt 即可。

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

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

From 8c3b2f4556c248f4cfd8915b9363cae1a8e7cf84 Mon Sep 17 00:00:00 2001 From: sofish Date: Fri, 3 May 2013 16:37:32 +0800 Subject: [PATCH 20/90] =?UTF-8?q?/*=20=E4=B8=80=E8=87=B4=E5=8C=96=20horizo?= =?UTF-8?q?nal=20rule=20*/?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 3 +++ typo.html | 8 ++++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/typo.css b/typo.css index 8282cdb..37bd2e7 100644 --- a/typo.css +++ b/typo.css @@ -160,6 +160,9 @@ pre { padding: 10px; } +/* 一致化 horizonal rule */ +hr{border:none;border-bottom:1px solid #cfcfcf;margin-bottom:10px;*color:pink;*filter:chroma(color=pink);height:10px;*margin:-7px 0 2px;} + /* 底部印刷体、版本等标记 */ small { font-size: 12px; diff --git a/typo.html b/typo.html index 15cf7fb..388085d 100644 --- a/typo.html +++ b/typo.html @@ -127,7 +127,7 @@

例1：论语学而篇第一

本篇引语

原文

子曰^[1]：“学^[2]而时习^[3]之，不亦说^[4]乎？有朋^[5]自远方来，不亦乐^[6]乎？人不知^[7]，而不愠^[8]，不亦君子^[9]乎？”

注释

@@ -143,14 +143,14 @@

注释

[8] 愠：音ｙùｎ，恼怒，怨恨。
[9] 君子：《论语》书中的君子，有时指有德者，有时指有位者。此处指孔子理想中具有高尚人格的人。 -

译文

评析

此外，在对“人不知，而不愠”一句的解释中，也有人认为，“人不知”的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，“人不知”就是“人家不知道我所讲述的”了。这样的解释似乎有些牵强。

总之，本章提出以学习为乐事，做到人不知而不愠，反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见，有助于对第一章内容的深入了解。

例2：英文排版

From e805d5b89e95cdc2a8563835b87757d24fb000e8 Mon Sep 17 00:00:00 2001 From: sofish Date: Mon, 6 May 2013 10:18:44 +0800 Subject: [PATCH 21/90] =?UTF-8?q?=E5=8E=BB=E6=8E=89=20blockquote=20?= =?UTF-8?q?=E5=8F=B3=20margin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typo.css b/typo.css index 37bd2e7..bb7f3e9 100644 --- a/typo.css +++ b/typo.css @@ -60,7 +60,7 @@ iframe { /* 块/段落引用 */ blockquote { - margin: 1em 4em 1em 0; + margin: 1em 0; padding: 0.6em 1em; background: #f9f9f9; border-left: 0.4em solid #ddd; From 528e82ee67eab6eb5e2094ab1f65547254560c00 Mon Sep 17 00:00:00 2001 From: sofish Date: Mon, 6 May 2013 16:26:57 +0800 Subject: [PATCH 22/90] =?UTF-8?q?=E9=87=8D=E8=AE=BE=20input/button=20?= =?UTF-8?q?=E7=9A=84=E5=85=BC=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/typo.css b/typo.css index bb7f3e9..d79cacc 100644 --- a/typo.css +++ b/typo.css @@ -32,6 +32,15 @@ body, button, input, select, textarea { font:500 14px/1.8 Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif; } +/* 去除 IE6 input/button 多余的空白 */ +button, input { + *width: auto; + *overflow: visible; + + /* 让 input 和 button 一样高 */ + line-height:22px; +} + /* 去掉各Table cell 的边距并让其边重合 */ table { border-collapse: collapse; From c8fd4e874fb9cbf5e143b30fbc2be2174b539b33 Mon Sep 17 00:00:00 2001 From: sofish Date: Mon, 6 May 2013 16:28:56 +0800 Subject: [PATCH 23/90] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20.typo-small?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typo.css b/typo.css index d79cacc..300e3a3 100644 --- a/typo.css +++ b/typo.css @@ -173,7 +173,7 @@ pre { hr{border:none;border-bottom:1px solid #cfcfcf;margin-bottom:10px;*color:pink;*filter:chroma(color=pink);height:10px;*margin:-7px 0 2px;} /* 底部印刷体、版本等标记 */ -small { +small, .typo-small { font-size: 12px; color: #888; } From 7499873cce25954b783328caaeda70da33066f60 Mon Sep 17 00:00:00 2001 From: sofish Date: Mon, 6 May 2013 16:30:03 +0800 Subject: [PATCH 24/90] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20figcaption=20?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/typo.css b/typo.css index 300e3a3..43533ae 100644 --- a/typo.css +++ b/typo.css @@ -173,7 +173,10 @@ pre { hr{border:none;border-bottom:1px solid #cfcfcf;margin-bottom:10px;*color:pink;*filter:chroma(color=pink);height:10px;*margin:-7px 0 2px;} /* 底部印刷体、版本等标记 */ -small, .typo-small { +small, .typo-small, + +/* 图片说明 */ +figcaption { font-size: 12px; color: #888; } From 06fa4fd51086530925b393346bc4ffee98b717f5 Mon Sep 17 00:00:00 2001 From: sofish Date: Mon, 6 May 2013 16:31:38 +0800 Subject: [PATCH 25/90] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20table=20caption=20?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/typo.css b/typo.css index 43533ae..559fc32 100644 --- a/typo.css +++ b/typo.css @@ -248,7 +248,7 @@ h1, h2, h3, h4, h5, h6{ } /* 同 ul/ol，在文章中应用 table 基本格式 */ -.typo table th, .typo table td, .typo-table th, .typo-table td { +.typo table th, .typo table td, .typo-table th, .typo-table td .typo table caption{ border: 1px solid #ddd; padding: 5px 10px; } @@ -258,6 +258,9 @@ h1, h2, h3, h4, h5, h6{ .typo table thead th, .typo-table thead th { background: #f1f1f1; } +.typo table .caption { + border-bottom:none; +} /* 去除 webkit 中 input 和 textarea 的默认样式 */ .typo-input, .typo-textarea{ From 53a1d0d7d257963de1a43ff2281a21511182baf4 Mon Sep 17 00:00:00 2001 From: sofish Date: Mon, 6 May 2013 16:32:29 +0800 Subject: [PATCH 26/90] =?UTF-8?q?=E5=8A=A0=E7=B2=97=20legend=20=E5=92=8C?= =?UTF-8?q?=20caption?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typo.css b/typo.css index 559fc32..ebb4266 100644 --- a/typo.css +++ b/typo.css @@ -273,6 +273,6 @@ h1, h2, h3, h4, h5, h6{ ::selection {background:#08c;color:#fff;} /* TODO: 供着重号使用 */ -.typo-em, .typo em { +.typo-em, .typo em, legend, caption { font-weight: 700; } From 73b5b01b5b65649f1fda3f8e94e7cc208fdf518f Mon Sep 17 00:00:00 2001 From: sofish Date: Mon, 6 May 2013 16:34:29 +0800 Subject: [PATCH 27/90] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E5=AD=97=E4=BD=93=20bu?= =?UTF-8?q?g?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/typo.css b/typo.css index ebb4266..96aed36 100644 --- a/typo.css +++ b/typo.css @@ -29,7 +29,7 @@ audio, canvas, video { /* 要注意表单元素并不继承父级 font 的问题 */ body, button, input, select, textarea { - font:500 14px/1.8 Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif; + font:500 14px/1.8 Hiragino Sans GB, Microsoft Yahei, WenQuanYi Micro Hei, sans-serif; } /* 去除 IE6 input/button 多余的空白 */ @@ -203,7 +203,7 @@ figcaption { h1, h2, h3, h4, h5, h6{ font-weight: 500; font-weight: 800\9; - font-family: Helvetica Neue,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif; + font-family: Helvetica Neue,Hiragino Sans GB,Microsoft Yahei, WenQuanYi Micro Hei,sans-serif; color:#333; } From 8c1d45b9c6d2422006bdace5649591c90aaf18a9 Mon Sep 17 00:00:00 2001 From: sofish Date: Fri, 24 May 2013 21:54:36 +0800 Subject: [PATCH 28/90] =?UTF-8?q?=E8=A7=A3=E5=86=B3=20windows=20=E4=B8=8B?= =?UTF-8?q?=E5=AD=97=E4=BD=93=E5=A4=AA=E7=B2=97=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/typo.css b/typo.css index 96aed36..4b96c54 100644 --- a/typo.css +++ b/typo.css @@ -29,7 +29,7 @@ audio, canvas, video { /* 要注意表单元素并不继承父级 font 的问题 */ body, button, input, select, textarea { - font:500 14px/1.8 Hiragino Sans GB, Microsoft Yahei, WenQuanYi Micro Hei, sans-serif; + font:500 14px/1.8 Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; } /* 去除 IE6 input/button 多余的空白 */ @@ -203,7 +203,7 @@ figcaption { h1, h2, h3, h4, h5, h6{ font-weight: 500; font-weight: 800\9; - font-family: Helvetica Neue,Hiragino Sans GB,Microsoft Yahei, WenQuanYi Micro Hei,sans-serif; + font-family: Helvetica Neue, Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif; color:#333; } From 197ee287b70e288811ac6538a6d7e9d3dcca7a6b Mon Sep 17 00:00:00 2001 From: sofish Date: Mon, 15 Jul 2013 11:31:49 +0800 Subject: [PATCH 29/90] =?UTF-8?q?=E7=BB=99=E5=8F=AF=E6=8B=96=E5=8A=A8?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E6=B7=BB=E5=8A=A0=E6=89=8B=E5=8A=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/typo.css b/typo.css index 4b96c54..47df5aa 100644 --- a/typo.css +++ b/typo.css @@ -181,6 +181,11 @@ figcaption { color: #888; } +/* 可拖动文件添加拖动手势 */ +[draggable] { + cursor: move; +} + .clearfix:before, .clearfix:after { content: ""; display: table; @@ -202,7 +207,7 @@ figcaption { h1, h2, h3, h4, h5, h6{ font-weight: 500; - font-weight: 800\9; + *font-weight: 800; font-family: Helvetica Neue, Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif; color:#333; } From 8a577b911150d9d80c98d35198ff285302163a89 Mon Sep 17 00:00:00 2001 From: sofish Date: Wed, 24 Jul 2013 13:40:54 +0800 Subject: [PATCH 30/90] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=AF=B4=E6=98=8E?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 5 +---- typo.css | 32 ++++++++++++++++++++++++++------ 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 76fa569..2395088 100644 --- a/README.md +++ b/README.md @@ -33,12 +33,9 @@ (2) 着重号：使用 class `.typo-em`
(3) 首字下沉：使用 class `.typo-first`
(4) 清理浮动：与一般 reset.css 保持一致 `.clearfix` +(5) 强制换行：添加 `.textwrap` 到文本所在的容器，如果是 `table` 测还需要 `.textwrap-table` ### 三、开源许可 - -[Sofish Lin](http://sofish.de): founder, creator of [Alice CSS](http://aliceui.com), a code writter, a semi-designer.
-[Hotoo](https://github.com/hotoo): developer, VIM guru, front-end web developer @ alipay.com - 基于 [MIT License](http://zh.wikipedia.org/wiki/MIT_License) 开源，使用代码只需说明来源，或者引用 [license.txt](https://github.com/sofish/typo.css/blob/master/license.txt) 即可。 diff --git a/typo.css b/typo.css index 47df5aa..937f282 100644 --- a/typo.css +++ b/typo.css @@ -170,7 +170,14 @@ pre { } /* 一致化 horizonal rule */ -hr{border:none;border-bottom:1px solid #cfcfcf;margin-bottom:10px;*color:pink;*filter:chroma(color=pink);height:10px;*margin:-7px 0 2px;} +hr{ + border:none; + border-bottom:1px solid #cfcfcf; + margin-bottom:10px; + *color:pink;*filter:chroma(color=pink); + height:10px; + *margin:-7px 0 2px; +} /* 底部印刷体、版本等标记 */ small, .typo-small, @@ -199,6 +206,15 @@ figcaption { zoom: 1 } +/* 强制文本换行 */ +.textwrap, .textwrap td, .textwrap th{ + word-wrap:break-word; + word-break:break-all; +} +.textwrap-table{ + table-layout:fixed; +} + /* 保证块/段落之间的空白隔行 */ .typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table, .typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table { @@ -274,10 +290,14 @@ h1, h2, h3, h4, h5, h6{ } /* 高亮选中 */ -::-moz-selection {background:#08c;color:#fff;} -::selection {background:#08c;color:#fff;} +::-moz-selection { + background:#08c; + color:#fff; +} +::selection { + background:#08c; + color:#fff; +} /* TODO: 供着重号使用 */ -.typo-em, .typo em, legend, caption { - font-weight: 700; -} +.typo-em, .typo em, legend, caption {font-weight: 700;} From f42efa620532d3de3125e7ff462361d2a0f4bbe6 Mon Sep 17 00:00:00 2001 From: sofish Date: Wed, 24 Jul 2013 15:46:53 +0800 Subject: [PATCH 31/90] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E5=B0=8F=E6=8E=92=E7=89=88=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 22 ++++++++++++---------- typo.html | 21 ++++++++++----------- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/typo.css b/typo.css index 937f282..e85edd1 100644 --- a/typo.css +++ b/typo.css @@ -2,7 +2,7 @@ /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */ html { - color: #555; + color: #444333; background: #fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; @@ -29,7 +29,7 @@ audio, canvas, video { /* 要注意表单元素并不继承父级 font 的问题 */ body, button, input, select, textarea { - font:500 14px/1.8 Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; + font:500 0.875em/1.8 Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; } /* 去除 IE6 input/button 多余的空白 */ @@ -69,9 +69,11 @@ iframe { /* 块/段落引用 */ blockquote { + font-family:Optima, Georgia, STSong, serif; margin: 1em 0; + color:#999; padding: 0.6em 1em; - background: #f9f9f9; + background:#f8f8f8; border-left: 0.4em solid #ddd; } blockquote blockquote { @@ -163,10 +165,9 @@ pre, code { word-wrap: break-word; } pre { - border: 1px solid #ddd; - border-left-width: 0.4em; - background: #fbfbfb; - padding: 10px; + background: #f8f8f8; + border:1px solid #ddd; + padding: 1em 1.5em; } /* 一致化 horizonal rule */ @@ -184,7 +185,7 @@ small, .typo-small, /* 图片说明 */ figcaption { - font-size: 12px; + font-size: 0.9em; color: #888; } @@ -218,7 +219,7 @@ figcaption { /* 保证块/段落之间的空白隔行 */ .typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table, .typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table { - margin-bottom: 1em; + margin-bottom: 1.2em; } h1, h2, h3, h4, h5, h6{ @@ -271,7 +272,8 @@ h1, h2, h3, h4, h5, h6{ /* 同 ul/ol，在文章中应用 table 基本格式 */ .typo table th, .typo table td, .typo-table th, .typo-table td .typo table caption{ border: 1px solid #ddd; - padding: 5px 10px; + padding: 0.5em 1em; + color:#666; } .typo table th, .typo-table th { background: #fbfbfb; diff --git a/typo.html b/typo.html index 388085d..c8539b7 100644 --- a/typo.html +++ b/typo.html @@ -6,13 +6,16 @@ TYPO.CSS - 中文网页重设与排版 + #table{margin-bottom:2em;color:#888;} + @@ -21,7 +24,7 @@

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

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

关于 TYPO.CSS

排版实例

评析

例2：英文排版

-"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…" -
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain…"
-
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain…" -
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain…"
-
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The standard Lorem Ipsum passage, used since the 1500s

Date: Thu, 25 Jul 2013 00:52:36 +0800 Subject: [PATCH 32/90] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E7=A9=BA=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 154 +++++++++++++++++++++++++++---------------------------- 1 file changed, 77 insertions(+), 77 deletions(-) diff --git a/typo.css b/typo.css index e85edd1..b903c48 100644 --- a/typo.css +++ b/typo.css @@ -2,34 +2,34 @@ /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */ html { - color: #444333; - background: #fff; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; + color: #444333; + background: #fff; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; text-rendering: optimizelegibility; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; + display: block; } /* HTML5 媒体文件跟 img 保持一致 */ audio, canvas, video { - display: inline-block; - *display: inline; - *zoom: 1; + display: inline-block; + *display: inline; + *zoom: 1; } /* 要注意表单元素并不继承父级 font 的问题 */ body, button, input, select, textarea { - font:500 0.875em/1.8 Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; + font:500 0.875em/1.8 Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; } /* 去除 IE6 input/button 多余的空白 */ @@ -43,18 +43,18 @@ button, input { /* 去掉各Table cell 的边距并让其边重合 */ table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } /* IE bug fixed: th 不继承 text-align*/ th { - text-align: inherit; + text-align: inherit; } /* 去除默认边框 */ fieldset, img { - border: 0; + border: 0; } /* 解决 IE6-7 图片缩放锯齿问题 */ @@ -64,83 +64,83 @@ img { /* ie6 7 8(q) bug 显示为行内表现 */ iframe { - display: block; + display: block; } /* 块/段落引用 */ blockquote { font-family:Optima, Georgia, STSong, serif; - margin: 1em 0; + margin: 1em 0; color:#999; - padding: 0.6em 1em; - background:#f8f8f8; + padding: 0.6em 1em; + background:#f8f8f8; border-left: 0.4em solid #ddd; } blockquote blockquote { - padding: 0 0 0 1em; - margin-left: 2em; + padding: 0 0 0 1em; + margin-left: 2em; } /* Firefox 以外，元素没有下划线，需添加 */ acronym, abbr { - border-bottom: 1px dotted; - font-variant: normal; + border-bottom: 1px dotted; + font-variant: normal; } /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */ abbr { - cursor: help; + cursor: help; } /* 一致的 del 样式 */ del { - text-decoration: line-through; + text-decoration: line-through; } address, caption, cite, code, dfn, em, th, var { - font-style: normal; - font-weight: 400; + font-style: normal; + font-weight: 400; } /* 去掉列表前的标识, li 会继承，大部分网站通常用列表来很多内容，所以应该当去 */ ul, ol { - list-style: none; + list-style: none; } /* 对齐是排版最重要的因素, 别让什么都居中 */ caption, th { - text-align: left; + text-align: left; } q:before, q:after { - content: ''; + content: ''; } /* 统一上标和下标 */ sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: text-top\9; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: text-top\9; } :root sub, :root sup{ - vertical-align: baseline; /* for ie9 and other mordern browsers */ + vertical-align: baseline; /* for ie9 and other mordern browsers */ } sup { - top: -0.5em; + top: -0.5em; } sub { - bottom: -0.25em; + bottom: -0.25em; } /* 让链接在 hover 状态下显示下划线 */ a:hover { - text-decoration: underline; + text-decoration: underline; } /* 默认不显示下划线，保持页面简洁 */ ins, a { - text-decoration: none; + text-decoration: none; } /* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的， @@ -150,24 +150,24 @@ ins, a { * 一篇关于标签的很好文章：http://html5doctor.com/u-element/ */ u, .typo-u { - text-decoration: underline; + text-decoration: underline; } /* 标记，类似于手写的荧光笔的作用 */ mark { - background: #fffdd1; + background: #fffdd1; } /* 代码片断 */ pre, code { - font-family: "Courier New", Courier, monospace; - white-space: pre-wrap; - word-wrap: break-word; + font-family: "Courier New", Courier, monospace; + white-space: pre-wrap; + word-wrap: break-word; } pre { - background: #f8f8f8; + background: #f8f8f8; border:1px solid #ddd; - padding: 1em 1.5em; + padding: 1em 1.5em; } /* 一致化 horizonal rule */ @@ -185,8 +185,8 @@ small, .typo-small, /* 图片说明 */ figcaption { - font-size: 0.9em; - color: #888; + font-size: 0.9em; + color: #888; } /* 可拖动文件添加拖动手势 */ @@ -195,16 +195,16 @@ figcaption { } .clearfix:before, .clearfix:after { - content: ""; - display: table; + content: ""; + display: table; } .clearfix:after { - clear: both + clear: both } .clearfix { - zoom: 1 + zoom: 1 } /* 强制文本换行 */ @@ -219,67 +219,67 @@ figcaption { /* 保证块/段落之间的空白隔行 */ .typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table, .typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table { - margin-bottom: 1.2em; + margin-bottom: 1.2em; } h1, h2, h3, h4, h5, h6{ - font-weight: 500; - *font-weight: 800; + font-weight: 500; + *font-weight: 800; font-family: Helvetica Neue, Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif; - color:#333; + color:#333; } /* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */ .typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6, .typo-h1, .typo-h2, .typo-h3, .typo-h4, .typo-h5, .typo-h6 { - margin-bottom: 0.4em; - line-height: 1.5; + margin-bottom: 0.4em; + line-height: 1.5; } .typo h1, .typo-h1 { - font-size: 1.8em; + font-size: 1.8em; } .typo h2, .typo-h2 { - font-size: 1.6em; + font-size: 1.6em; } .typo h3, .typo-h3 { - font-size: 1.4em; + font-size: 1.4em; } .typo h4, .typo-h4 { - font-size: 1.2em; + font-size: 1.2em; } .typo h5, .typo h6, .typo-h5, .typo-h6 { - font-size: 1em; + font-size: 1em; } /* 在文章中，应该还原 ul 和 ol 的样式 */ .typo ul, .typo-ul { - margin-left: 1.3em; - list-style: disc; + margin-left: 1.3em; + list-style: disc; } .typo ol, .typo-ol { - list-style: decimal; - margin-left: 1.9em; + list-style: decimal; + margin-left: 1.9em; } .typo li ul, .typo li ol, .typo-ul ul, .typo-ul ol, .typo-ol ul, .typo-ol ol { - margin-top: 0; - margin-bottom: 0; - margin-left: 2em; + margin-top: 0; + margin-bottom: 0; + margin-left: 2em; } .typo li ul, .typo-ul ul, .typo-ol ul { - list-style: circle; + list-style: circle; } /* 同 ul/ol，在文章中应用 table 基本格式 */ .typo table th, .typo table td, .typo-table th, .typo-table td .typo table caption{ - border: 1px solid #ddd; - padding: 0.5em 1em; + border: 1px solid #ddd; + padding: 0.5em 1em; color:#666; } .typo table th, .typo-table th { - background: #fbfbfb; + background: #fbfbfb; } .typo table thead th, .typo-table thead th { - background: #f1f1f1; + background: #f1f1f1; } .typo table .caption { border-bottom:none; @@ -287,8 +287,8 @@ h1, h2, h3, h4, h5, h6{ /* 去除 webkit 中 input 和 textarea 的默认样式 */ .typo-input, .typo-textarea{ - -webkit-appearance:none; - border-radius:0; + -webkit-appearance:none; + border-radius:0; } /* 高亮选中 */ From ea1338690e2dd6f44c40fa1cb86de1b8b581da21 Mon Sep 17 00:00:00 2001 From: popomore Date: Tue, 24 Sep 2013 12:32:44 +0800 Subject: [PATCH 33/90] =?UTF-8?q?markdown=20=E4=BC=9A=E7=94=9F=E6=88=90=20?= =?UTF-8?q?blockquote=20>=20p=20=E7=9A=84=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/typo.css b/typo.css index b903c48..df786bf 100644 --- a/typo.css +++ b/typo.css @@ -80,6 +80,9 @@ blockquote blockquote { padding: 0 0 0 1em; margin-left: 2em; } +blockquote p { + margin-bottom: 0; +} /* Firefox 以外，元素没有下划线，需添加 */ acronym, abbr { From 54a116a8963f4d9ef8b9f88c7ce081d0a44fb1fa Mon Sep 17 00:00:00 2001 From: sofish Date: Tue, 24 Sep 2013 14:13:05 +0800 Subject: [PATCH 34/90] =?UTF-8?q?=E4=BF=AE=E6=94=B9=20readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 +++++++----- TODO.md | 11 ----------- typo.css | 3 +++ 3 files changed, 10 insertions(+), 16 deletions(-) delete mode 100644 TODO.md diff --git a/README.md b/README.md index 2395088..532be46 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,6 @@ ### 一、目录结构 . ├── README.md --- 使用帮助 - ├── TODO.md --- TODO-List ├── license.txt --- 许可证 ├── typo.css --- 将应用于你的项目 └── typo.html --- Demo/预览 @@ -15,7 +14,8 @@ ### 二、TYPO.CSS 的设计和使用 -建议看源代码，特别是注释，需要认真看。`typo.css` 主要包括： + +## TYPO.CSS 主要包括： 1、一般 reset.css 所需的内容 @@ -24,6 +24,8 @@ 2、`class="typo"` 阅读内容排版在文章/文档阅读的页面，需添加 `.typo` 这个 class，这样 table/ol/ul 等都会有预定的样式，让你的排版像 [http://typo.sofish.de](http://typo.sofish.de) 一样，让用户阅读起来更舒服。 + +在父容器在没有添加 `class="typo"` 的时候，可以使用 `class="typo-标签"`（如 `class="typo-ul"`）来实现像 `.typo > ul` 这样结构的样式。 3、增加类： @@ -31,9 +33,9 @@ (1) 专名号：使用标签 `` 或者 `.typo-u`
(2) 着重号：使用 class `.typo-em`
-(3) 首字下沉：使用 class `.typo-first`
-(4) 清理浮动：与一般 reset.css 保持一致 `.clearfix` -(5) 强制换行：添加 `.textwrap` 到文本所在的容器，如果是 `table` 测还需要 `.textwrap-table` +(3) 清理浮动：与一般 reset.css 保持一致 `.clearfix` +(4) 强制换行：添加 `.textwrap` 到文本所在的容器，如果是 `table` 测还需要 `.textwrap-table` +(5) 衬线字体：添加 `.serif` ### 三、开源许可 diff --git a/TODO.md b/TODO.md deleted file mode 100644 index 9cb1d7e..0000000 --- a/TODO.md +++ /dev/null @@ -1,11 +0,0 @@ -- typo-em：着重号实现 -- typo-first: 首字下沉实现 -- 全局与 `typo` 的完整 demo 示例 -- 根据 `附录一` 做兼容性测试 -- IE 的 `sup` 和 `sub` 显示问题 -- radio / checkbox 居中测试 -- input 多余空白增强类 -- 示例三 -- getting start 文档 -- 参与开发文档 -- moblie 平台的测试 \ No newline at end of file diff --git a/typo.css b/typo.css index df786bf..b7c1e09 100644 --- a/typo.css +++ b/typo.css @@ -219,6 +219,9 @@ figcaption { table-layout:fixed; } +/* 提供 serif 版本的字体设置 */ +.serif{font-family:Palatino, Optima, Georgia, serif;} + /* 保证块/段落之间的空白隔行 */ .typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table, .typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table { From 6dc9e2f4613642f572260ce5439174464ac95c86 Mon Sep 17 00:00:00 2001 From: sofish Date: Tue, 24 Sep 2013 14:14:32 +0800 Subject: [PATCH 35/90] =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96=20readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 532be46..f67830d 100644 --- a/README.md +++ b/README.md @@ -33,11 +33,10 @@ (1) 专名号：使用标签 `` 或者 `.typo-u`
(2) 着重号：使用 class `.typo-em`
-(3) 清理浮动：与一般 reset.css 保持一致 `.clearfix` -(4) 强制换行：添加 `.textwrap` 到文本所在的容器，如果是 `table` 测还需要 `.textwrap-table` +(3) 清理浮动：与一般 reset.css 保持一致 `.clearfix`
+(4) 强制换行：添加 `.textwrap` 到文本所在的容器，如果是 `table` 测还需要 `.textwrap-table`
(5) 衬线字体：添加 `.serif` - + ### 三、开源许可基于 [MIT License](http://zh.wikipedia.org/wiki/MIT_License) 开源，使用代码只需说明来源，或者引用 [license.txt](https://github.com/sofish/typo.css/blob/master/license.txt) 即可。 - From 349a2b2b62f56ebb1bab67fa08c5ab1dac961986 Mon Sep 17 00:00:00 2001 From: sofish Date: Tue, 24 Sep 2013 14:45:42 +0800 Subject: [PATCH 36/90] =?UTF-8?q?.serif=20=E5=9C=A8=20mac=20=E4=B8=8B?= =?UTF-8?q?=E4=B8=8D=E8=B5=B7=E4=BD=9C=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typo.css b/typo.css index b7c1e09..91f2998 100644 --- a/typo.css +++ b/typo.css @@ -220,7 +220,7 @@ figcaption { } /* 提供 serif 版本的字体设置 */ -.serif{font-family:Palatino, Optima, Georgia, serif;} +.serif{font-family:Palatino, Optima, STSong, Georgia, serif;} /* 保证块/段落之间的空白隔行 */ .typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table, From 08ee2e95ac372acd76deac02131b9207645343ce Mon Sep 17 00:00:00 2001 From: shingchi Date: Tue, 12 Nov 2013 21:47:35 +0800 Subject: [PATCH 37/90] Update typo.css MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 都了个点？ --- typo.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typo.css b/typo.css index 91f2998..685b187 100644 --- a/typo.css +++ b/typo.css @@ -287,7 +287,7 @@ h1, h2, h3, h4, h5, h6{ .typo table thead th, .typo-table thead th { background: #f1f1f1; } -.typo table .caption { +.typo table caption { border-bottom:none; } From bccb55ab120eaf370189b0e9a1ee0c13556040c3 Mon Sep 17 00:00:00 2001 From: sofish Date: Thu, 28 Nov 2013 16:33:01 +0800 Subject: [PATCH 38/90] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20.serif=20=E5=AD=97?= =?UTF-8?q?=E4=BD=93=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typo.css b/typo.css index 91f2998..1818509 100644 --- a/typo.css +++ b/typo.css @@ -220,7 +220,7 @@ figcaption { } /* 提供 serif 版本的字体设置 */ -.serif{font-family:Palatino, Optima, STSong, Georgia, serif;} +.serif{font-family:Palatino, Hiragino Mincho ProN W3, Optima, STSong, Georgia, serif;} /* 保证块/段落之间的空白隔行 */ .typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table, From bf0c1bb970b1f1a2fae5d7d0499b3660abae1e0c Mon Sep 17 00:00:00 2001 From: sofish Date: Thu, 28 Nov 2013 16:35:22 +0800 Subject: [PATCH 39/90] =?UTF-8?q?=E8=A7=A3=E5=86=B3=20button,=20input=20pa?= =?UTF-8?q?dding=20=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/typo.css b/typo.css index 1818509..615dfca 100644 --- a/typo.css +++ b/typo.css @@ -38,7 +38,13 @@ button, input { *overflow: visible; /* 让 input 和 button 一样高 */ - line-height:22px; + line-height: normal; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + padding: 0; + border: 0; } /* 去掉各Table cell 的边距并让其边重合 */ From 6272c983863da854ecd280213bd4e0b105674d8c Mon Sep 17 00:00:00 2001 From: hotoo Date: Wed, 22 Jan 2014 12:43:28 +0800 Subject: [PATCH 40/90] Fixed #9, typos --- typo.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/typo.html b/typo.html index c8539b7..e18e06e 100644 --- a/typo.html +++ b/typo.html @@ -263,7 +263,7 @@

1、TYPO.CSS 排版偏重点

强调 em - 在全局显示正体，在 .typo 中显示与 b 和 strong 的样式一致，为粗休 + 在全局显示正体，在 .typo 中显示与 b 和 strong 的样式一致，为粗体加强 @@ -320,9 +320,9 @@

1、TYPO.CSS 排版偏重点

加强类专名号 .typo-u - 由于 u 被 HTML4 放弃，在向后兼容上推荐使用 + 由于 u 被 HTML4 放弃，在向后兼容上推荐使用 <u type="typo-u" … - + 着重符 .typo-em 利用 :after 和 :before 实现着重符 From 2510452a1b9772e705d04af235c5c6eea2469532 Mon Sep 17 00:00:00 2001 From: sofish Date: Wed, 4 Jun 2014 17:11:51 +0800 Subject: [PATCH 41/90] =?UTF-8?q?hgroup=20=E5=B7=B2=E7=BB=8F=E8=A2=AB=20HT?= =?UTF-8?q?ML5=20=E4=B8=A2=E5=BC=83=E4=BA=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/typo.css b/typo.css index 919b6ac..5d01868 100644 --- a/typo.css +++ b/typo.css @@ -10,13 +10,13 @@ html { } /* 内外边距通常让各个浏览器样式的表现位置不同 */ -body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { +body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section { margin: 0; padding: 0; } /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { +article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block; } From e153f142aae46fe369f4f12ae42639e8cabb99e1 Mon Sep 17 00:00:00 2001 From: sofish Date: Wed, 4 Jun 2014 17:59:45 +0800 Subject: [PATCH 42/90] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=AD=97=E4=BD=93?= =?UTF-8?q?=E5=9C=A8=E5=90=84=E6=B5=8F=E8=A7=88=E5=99=A8=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E7=B2=97=E7=BB=86=E9=97=AE=E9=A2=98=20+=20=E6=A0=87=E9=A2=98?= =?UTF-8?q?=E5=8F=98=E6=88=90=20serif?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 28 +-- typo.html | 627 ++++++++++++++++++++++++++++++------------------------ 2 files changed, 361 insertions(+), 294 deletions(-) diff --git a/typo.css b/typo.css index 5d01868..8145657 100644 --- a/typo.css +++ b/typo.css @@ -29,7 +29,7 @@ audio, canvas, video { /* 要注意表单元素并不继承父级 font 的问题 */ body, button, input, select, textarea { - font:500 0.875em/1.8 Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; + font:400 1em/1.8 Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; } /* 去除 IE6 input/button 多余的空白 */ @@ -130,7 +130,6 @@ sub, sup { font-size: 75%; line-height: 0; position: relative; - vertical-align: text-top\9; } :root sub, :root sup{ vertical-align: baseline; /* for ie9 and other mordern browsers */ @@ -226,18 +225,16 @@ figcaption { } /* 提供 serif 版本的字体设置 */ -.serif{font-family:Palatino, Hiragino Mincho ProN W3, Optima, STSong, Georgia, serif;} +.serif, h1, h2, h3, h4, h5, h6{font-family:Palatino, Songti SC, Hiragino Mincho ProN W3, Optima, STSong, Georgia, serif;} /* 保证块/段落之间的空白隔行 */ .typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table, -.typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table { - margin-bottom: 1.2em; +.typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table, blockquote{ + margin-bottom: 1.8em; } h1, h2, h3, h4, h5, h6{ - font-weight: 500; - *font-weight: 800; - font-family: Helvetica Neue, Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif; + font-weight: 900; color:#333; } @@ -248,19 +245,19 @@ h1, h2, h3, h4, h5, h6{ line-height: 1.5; } .typo h1, .typo-h1 { - font-size: 1.8em; + font-size: 2em; } .typo h2, .typo-h2 { - font-size: 1.6em; + font-size: 1.8em; } .typo h3, .typo-h3 { - font-size: 1.4em; + font-size: 1.6em; } .typo h4, .typo-h4 { - font-size: 1.2em; + font-size: 1.4em; } .typo h5, .typo h6, .typo-h5, .typo-h6 { - font-size: 1em; + font-size: 1.2em; } /* 在文章中，应该还原 ul 和 ol 的样式 */ @@ -314,4 +311,7 @@ h1, h2, h3, h4, h5, h6{ } /* TODO: 供着重号使用 */ -.typo-em, .typo em, legend, caption {font-weight: 700;} +.typo-em, .typo em, legend, caption { + color:#000; + font-weight: inherit; +} diff --git a/typo.html b/typo.html index c8539b7..378a1a6 100644 --- a/typo.html +++ b/typo.html @@ -1,189 +1,251 @@ - - - - TYPO.CSS - 中文网页重设与排版 - + + + + TYPO.CSS - 中文网页重设与排版 +

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

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

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

+ +

一、关于 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	√	√	-	√	-	-	-	-
OS/浏览器	Firefox	Chrome	Safari	Opera	IE9	IE8	IE7	IE6
OS X	√	√	√	√	-	-	-	-
Win 7	√	√	√	√	√	√	√	-
Win XP	√	√	√	√	-	√	√	√
Ubuntu	√	√	-	√	-	-	-	-

中文排版的重点和难点

+ +

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

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

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

- 附录一：TYPO.CSS 排版偏重点 + 附录一：TYPO.CSS 排版偏重点

目前仍处于 alpha 开发阶段，测试平台的覆盖，特别是在移动端上还没有覆盖完主流平台，希望有能力的同学能加入测试行列，或者加入到 TYPO.CSS + 的开发。加入方法：参与 TYPO.CSS 开发。如有批评、建议和意见，也随时欢迎给在 Github 直接提 issues，或给我发邮件。

二、排版实例：

+ +

提供2个排版实例，第一个中文实例来自于来自于张燕婴的《论语》，由于古文排版涉及到的元素比较多，所以采用《论语》中《学而》的第一篇作为排版实例介绍；第2个来自到经典的 + Lorem Ipsum，并加入了一些代码和列表等比较具有代表性的排版元素。

例1：论语学而篇第一

作者：孔子（前551年9月28日－前479年4月11日）

+ +

+ 作者：孔子（ + 前551年9月28日－前479年4月11日 + ） + +

本篇引语

+ +

+ 《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是“吾日三省吾身”；“节用而爱人，使民以时”；“礼之用，和为贵”以及仁、孝、信等道德范畴。

原文

子曰^[1]：“学^[2]而时习^[3]之，不亦说^[4]乎？有朋^[5]自远方来，不亦乐^[6]乎？人不知^[7]，而不愠^[8]，不亦君子^[9]乎？”

+ +

子曰^[1]：“学^[2]而时习^[3]之，不亦说^[4]乎？有朋^[5]自远方来，不亦乐^[6]乎？人不知^[7]，而不愠^[8]，不亦君子^[9]乎？”

注释

- -[1] 子：中国古代对于有地位、有学问的男子的尊称，有时也泛称男子。《论语》书中“子曰”的子，都是指孔子而言。
-[2] 学：孔子在这里所讲的“学”，主要是指学习西周的礼、乐、诗、书等传统文化典籍。
-[3] 时习：在周秦时代，“时”字用作副词，意为“在一定的时候”或者“在适当的时候”。但朱熹在《论语集注》一书中把“时”解释为“时常”。“习”，指演习礼、乐；复习诗、书。也含有温习、实习、练习的意思。
-[4] 说：音ｙｕè，同悦，愉快、高兴的意思。
-[5] 有朋：一本作“友朋”。旧注说，“同门曰朋”，即同在一位老师门下学习的叫朋，也就是志同道合的人。
-[6] 乐：与说有所区别。旧注说，悦在内心，乐则见于外。
-[7] 人不知：此句不完整，没有说出人不知道什么。缺少宾语。一般而言，知，是了解的意思。人不知，是说别人不了解自己。
-[8] 愠：音ｙùｎ，恼怒，怨恨。
-[9] 君子：《论语》书中的君子，有时指有德者，有时指有位者。此处指孔子理想中具有高尚人格的人。 - + + [1] 子：中国古代对于有地位、有学问的男子的尊称，有时也泛称男子。《论语》书中“子曰”的子，都是指孔子而言。
+ [2] 学：孔子在这里所讲的“学”，主要是指学习西周的礼、乐、诗、书等传统文化典籍。
+ [3] + 时习：在周秦时代，“时”字用作副词，意为“在一定的时候”或者“在适当的时候”。但朱熹在《论语集注》一书中把“时”解释为“时常”。“习”，指演习礼、乐；复习诗、书。也含有温习、实习、练习的意思。
+ [4] 说：音ｙｕè，同悦，愉快、高兴的意思。
+ [5] 有朋：一本作“友朋”。旧注说，“同门曰朋”，即同在一位老师门下学习的叫朋，也就是志同道合的人。
+ [6] 乐：与说有所区别。旧注说，悦在内心，乐则见于外。
+ [7] 人不知：此句不完整，没有说出人不知道什么。缺少宾语。一般而言，知，是了解的意思。人不知，是说别人不了解自己。
+ [8] 愠：音ｙùｎ，恼怒，怨恨。
+ [9] 君子：《论语》书中的君子，有时指有德者，有时指有位者。此处指孔子理想中具有高尚人格的人。 +

译文

评析

+ +

+ 此外，在对“人不知，而不愠”一句的解释中，也有人认为，“人不知”的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，“人不知”就是“人家不知道我所讲述的”了。这样的解释似乎有些牵强。

例2：英文排版

+ +

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a + type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining + essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum + passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem + Ipsum.

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The standard Lorem Ipsum passage, used since the 1500s

+ +

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC

+ +

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, + eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam + voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione + voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci + velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim + ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi + consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, + vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

List style in action

If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as your brother and hope as your sentry. -
如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。
-
Sometimes one pays most for the things one gets for nothing. -
有时候一个人为不花钱得到的东西付出的代价最高。
-
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily. -
只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。
-
If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as + your brother and hope as your sentry. +
如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。
+
Sometimes one pays most for the things one gets for nothing. +
有时候一个人为不花钱得到的东西付出的代价最高。
+
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things + easily. +
只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。
+

You may want to create a perfect `<hr />` line, despite the fact that there will never have one

La Racheforcauld said: "Few things are impossible in themselves; and it is often for want of will, rather than of means, that man fails to succeed". You just need to follow the browser's behavior, and set a right margin to it。it will works nice as the demo you're watching now. The following code is the best way to render typo in Chinese:

You may want to create a perfect `<hr />` line, despite the fact that there will never have one +

La Racheforcauld said: + "Few things are impossible in themselves; and it is often for want of will, rather than of means, that man fails + to succeed". + + You just need to follow the browser's behavior, and set a right margin to it。it will works nice as the + demo you're watching now. The following code is the best way to render typo in Chinese: +

 /* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
 h1,h2,h3,h4,h5,h6 {
@@ -205,162 +267,167 @@ 三、附录
 
 1、TYPO.CSS 排版偏重点
 
-    
-        
-            
-            
-            
-            
-        
-    
-    
-        
-          
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-            
-            
-            
-        
-        
-          
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-          
-          
-          
-        
-        
-            
-            
-            
-        
-        
-          
-          
-        
-        
-          
-        
-        
-          
-        
-        
-          
-        
-        
-            
-        
-    
+  
+  
+    
+    
+    
+    
+  
+  
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+  
+  
+    
+  
+  
+    
+  
+  
+    
+  
+  
+    
+  
+  类型 语义 标签 注意点
基础标签 标题 h1 ～ h6 全局不强制大小，.typo 中标题与其对应的内容应紧贴，并且有相应的大小设置
上、下标 sup/sub 保持与 MicroSoft Office Word 等程序的日常排版一致
引用 blockquote 显示/嵌套样式
缩写 abbr 是否都有下划线，鼠标 hover 是否为帮助手势
分割线 hr 显示的 padding 和 margin正确
列表 ul/ol/dl 在全局没有 list-style，在 .typo 中对齐正确
定义列表 dl 全局 padding 和 margin为0， .typo 中对齐正确
选项 input[type=radio[, checkbox]] 与其他 form 元素排版时是否居中
斜体 i 只设置一种斜体，让 em 和  cite 显示为正体
强调 em 在全局显示正体，在 .typo 中显示与 b 和 strong 的样式一致，为粗休
加强 strong/b 显示为粗体
标记 mark 类似荧光笔
印刷 small 保持为正确字体的 80% 大小，颜色设置为浅灰色
表格 table 全局不显示线条，在 table 中显示表格外框，并且表头有浅灰背景
代码 pre/code 字体使用 courier 系字体，保持与 serif 有比较一致的显示效果
特殊符号 着重号 在文字下加点（•） 在支持 :after 和 :before 的浏览器可以做渐进增强实现
专名号 林建锋 专名号，有下划线，使用 u 或都 .typo-u 类
破折号 —— 保持一划，而非两划
人民币 ¥ 使用两平等线的符号，或者 HTML 实体符号 &yen;
删除符 已删除（deleted） 一致化各浏览器显示，中英混排正确
加强类 专名号 .typo-u 由于 u 被 HTML4 放弃，在向后兼容上推荐使用 
着重符 .typo-em 利用 :after 和 :before 实现着重符
首字下沉 .typo-first 特殊排版
清除浮动 .clearfix 与一般 CSS Reset 保持一对致 API
注意点 （1）中英文混排行高/行距
（2）上下标在 IE 中显示效果
（3）块/段落分割空白是否符合设计原则
（4）input 多余空间问题
（5）默认字体色彩，目前采用 #333 在各种浏览显示比较好
类型 语义 标签 注意点
基础标签 标题 h1 ～ h6 全局不强制大小，.typo 中标题与其对应的内容应紧贴，并且有相应的大小设置
上、下标 sup/sub 保持与 MicroSoft Office Word 等程序的日常排版一致
引用 blockquote 显示/嵌套样式
缩写 abbr 是否都有下划线，鼠标 hover 是否为帮助手势
分割线 hr 显示的 padding 和 margin正确
列表 ul/ol/dl 在全局没有 list-style，在 .typo 中对齐正确
定义列表 dl 全局 padding 和 margin为0， .typo 中对齐正确
选项 input[type=radio[, checkbox]] 与其他 form 元素排版时是否居中
斜体 i 只设置一种斜体，让 em 和 cite 显示为正体
强调 em 在全局显示正体，在 .typo 中显示与 b 和 strong 的样式一致，为粗休
加强 strong/b 显示为粗体
标记 mark 类似荧光笔
印刷 small 保持为正确字体的 80% 大小，颜色设置为浅灰色
表格 table 全局不显示线条，在 table 中显示表格外框，并且表头有浅灰背景
代码 pre/code 字体使用 courier 系字体，保持与 serif 有比较一致的显示效果
特殊符号 着重号 在文字下加点（•） 在支持 :after 和 :before 的浏览器可以做渐进增强实现
专名号 林建锋 专名号，有下划线，使用 u 或都 .typo-u 类
破折号 —— 保持一划，而非两划
人民币 ¥ 使用两平等线的符号，或者 HTML 实体符号 &yen;
删除符 
+      已删除（deleted）
+    一致化各浏览器显示，中英混排正确
加强类 专名号 .typo-u 由于 u 被 HTML4 放弃，在向后兼容上推荐使用 
着重符 .typo-em 利用 :after 和 :before 实现着重符
首字下沉 .typo-first 特殊排版
清除浮动 .clearfix 与一般 CSS Reset 保持一对致 API
注意点 （1）中英文混排行高/行距
（2）上下标在 IE 中显示效果
（3）块/段落分割空白是否符合设计原则
（4）input 多余空间问题
（5）默认字体色彩，目前采用 #333 在各种浏览显示比较好
 
 
 2、开源许可
-TYPO.CSS 基于 MIT License 开源，使用代码只需说明来源，或者引用 license.txt 即可。
-

+ +

TYPO.CSS 基于 MIT License 开源，使用代码只需说明来源，或者引用 license.txt 即可。

+ -

From 392048064d117912474369aff1f7d366d47b61a5 Mon Sep 17 00:00:00 2001 From: sofish Date: Wed, 4 Jun 2014 18:00:24 +0800 Subject: [PATCH 43/90] =?UTF-8?q?reformat=EF=BC=9A=E6=8A=8A=204=20spaces?= =?UTF-8?q?=20=E7=BC=A9=E8=BF=9B=E6=94=B9=E6=88=90=202=20spaces?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 340 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 179 insertions(+), 161 deletions(-) diff --git a/typo.css b/typo.css index 8145657..0cc48c7 100644 --- a/typo.css +++ b/typo.css @@ -1,154 +1,159 @@ @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */ -html { - color: #444333; - background: #fff; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - text-rendering: optimizelegibility; +html{ + color:#444333; + background:#fff; + -webkit-text-size-adjust:100%; + -ms-text-size-adjust:100%; + text-rendering:optimizelegibility; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ -body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section { - margin: 0; - padding: 0; +body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section{ + margin:0; + padding:0; } /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ -article, aside, details, figcaption, figure, footer, header, menu, nav, section { - display: block; +article, aside, details, figcaption, figure, footer, header, menu, nav, section{ + display:block; } /* HTML5 媒体文件跟 img 保持一致 */ -audio, canvas, video { - display: inline-block; - *display: inline; - *zoom: 1; +audio, canvas, video{ + display:inline-block; + *display:inline; + *zoom:1; } /* 要注意表单元素并不继承父级 font 的问题 */ -body, button, input, select, textarea { - font:400 1em/1.8 Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; +body, button, input, select, textarea{ + font:400 1em/1.8 Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; } /* 去除 IE6 input/button 多余的空白 */ -button, input { - *width: auto; - *overflow: visible; +button, input{ + *width:auto; + *overflow:visible; - /* 让 input 和 button 一样高 */ - line-height: normal; + /* 让 input 和 button 一样高 */ + line-height:normal; } button::-moz-focus-inner, -input::-moz-focus-inner { - padding: 0; - border: 0; +input::-moz-focus-inner{ + padding:0; + border:0; } /* 去掉各Table cell 的边距并让其边重合 */ -table { - border-collapse: collapse; - border-spacing: 0; +table{ + border-collapse:collapse; + border-spacing:0; } /* IE bug fixed: th 不继承 text-align*/ -th { - text-align: inherit; +th{ + text-align:inherit; } /* 去除默认边框 */ -fieldset, img { - border: 0; +fieldset, img{ + border:0; } /* 解决 IE6-7 图片缩放锯齿问题 */ -img { - -ms-interpolation-mode: bicubic; +img{ + -ms-interpolation-mode:bicubic; } /* ie6 7 8(q) bug 显示为行内表现 */ -iframe { - display: block; +iframe{ + display:block; } /* 块/段落引用 */ -blockquote { - font-family:Optima, Georgia, STSong, serif; - margin: 1em 0; - color:#999; - padding: 0.6em 1em; - background:#f8f8f8; - border-left: 0.4em solid #ddd; +blockquote{ + font-family:Optima, Georgia, STSong, serif; + margin:1em 0; + color:#999; + padding:0.6em 1em; + background:#f8f8f8; + border-left:0.4em solid #ddd; } -blockquote blockquote { - padding: 0 0 0 1em; - margin-left: 2em; + +blockquote blockquote{ + padding:0 0 0 1em; + margin-left:2em; } -blockquote p { - margin-bottom: 0; + +blockquote p{ + margin-bottom:0; } /* Firefox 以外，元素没有下划线，需添加 */ -acronym, abbr { - border-bottom: 1px dotted; - font-variant: normal; +acronym, abbr{ + border-bottom:1px dotted; + font-variant:normal; } /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */ -abbr { - cursor: help; +abbr{ + cursor:help; } /* 一致的 del 样式 */ -del { - text-decoration: line-through; +del{ + text-decoration:line-through; } -address, caption, cite, code, dfn, em, th, var { - font-style: normal; - font-weight: 400; +address, caption, cite, code, dfn, em, th, var{ + font-style:normal; + font-weight:400; } /* 去掉列表前的标识, li 会继承，大部分网站通常用列表来很多内容，所以应该当去 */ -ul, ol { - list-style: none; +ul, ol{ + list-style:none; } /* 对齐是排版最重要的因素, 别让什么都居中 */ -caption, th { - text-align: left; +caption, th{ + text-align:left; } -q:before, q:after { - content: ''; +q:before, q:after{ + content:''; } /* 统一上标和下标 */ -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; +sub, sup{ + font-size:75%; + line-height:0; + position:relative; } + :root sub, :root sup{ - vertical-align: baseline; /* for ie9 and other mordern browsers */ + vertical-align:baseline; /* for ie9 and other mordern browsers */ } -sup { - top: -0.5em; + +sup{ + top:-0.5em; } -sub { - bottom: -0.25em; + +sub{ + bottom:-0.25em; } /* 让链接在 hover 状态下显示下划线 */ -a:hover { - text-decoration: underline; +a:hover{ + text-decoration:underline; } /* 默认不显示下划线，保持页面简洁 */ -ins, a { - text-decoration: none; +ins, a{ + text-decoration:none; } /* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的， @@ -157,161 +162,174 @@ ins, a { * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated * 一篇关于标签的很好文章：http://html5doctor.com/u-element/ */ -u, .typo-u { - text-decoration: underline; +u, .typo-u{ + text-decoration:underline; } /* 标记，类似于手写的荧光笔的作用 */ -mark { - background: #fffdd1; +mark{ + background:#fffdd1; } /* 代码片断 */ -pre, code { - font-family: "Courier New", Courier, monospace; - white-space: pre-wrap; - word-wrap: break-word; +pre, code{ + font-family:"Courier New", Courier, monospace; + white-space:pre-wrap; + word-wrap:break-word; } -pre { - background: #f8f8f8; - border:1px solid #ddd; - padding: 1em 1.5em; + +pre{ + background:#f8f8f8; + border:1px solid #ddd; + padding:1em 1.5em; } /* 一致化 horizonal rule */ hr{ - border:none; - border-bottom:1px solid #cfcfcf; - margin-bottom:10px; - *color:pink;*filter:chroma(color=pink); - height:10px; - *margin:-7px 0 2px; + border:none; + border-bottom:1px solid #cfcfcf; + margin-bottom:10px; + *color:pink; *filter:chroma(color=pink); + height:10px; + *margin:-7px 0 2px; } /* 底部印刷体、版本等标记 */ -small, .typo-small, - -/* 图片说明 */ -figcaption { - font-size: 0.9em; - color: #888; +small, .typo-small, + /* 图片说明 */ +figcaption{ + font-size:0.9em; + color:#888; } /* 可拖动文件添加拖动手势 */ -[draggable] { - cursor: move; +[draggable]{ + cursor:move; } -.clearfix:before, .clearfix:after { - content: ""; - display: table; +.clearfix:before, .clearfix:after{ + content:""; + display:table; } -.clearfix:after { - clear: both +.clearfix:after{ + clear:both } -.clearfix { - zoom: 1 +.clearfix{ + zoom:1 } /* 强制文本换行 */ .textwrap, .textwrap td, .textwrap th{ - word-wrap:break-word; - word-break:break-all; + word-wrap:break-word; + word-break:break-all; } + .textwrap-table{ - table-layout:fixed; + table-layout:fixed; } /* 提供 serif 版本的字体设置 */ -.serif, h1, h2, h3, h4, h5, h6{font-family:Palatino, Songti SC, Hiragino Mincho ProN W3, Optima, STSong, Georgia, serif;} +.serif, h1, h2, h3, h4, h5, h6{ font-family:Palatino, Songti SC, Hiragino Mincho ProN W3, Optima, STSong, Georgia, serif; } /* 保证块/段落之间的空白隔行 */ .typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table, .typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table, blockquote{ - margin-bottom: 1.8em; + margin-bottom:1.8em; } h1, h2, h3, h4, h5, h6{ - font-weight: 900; - color:#333; + font-weight:900; + color:#333; } /* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */ .typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6, -.typo-h1, .typo-h2, .typo-h3, .typo-h4, .typo-h5, .typo-h6 { - margin-bottom: 0.4em; - line-height: 1.5; +.typo-h1, .typo-h2, .typo-h3, .typo-h4, .typo-h5, .typo-h6{ + margin-bottom:0.4em; + line-height:1.5; } -.typo h1, .typo-h1 { - font-size: 2em; + +.typo h1, .typo-h1{ + font-size:2em; } -.typo h2, .typo-h2 { - font-size: 1.8em; + +.typo h2, .typo-h2{ + font-size:1.8em; } -.typo h3, .typo-h3 { - font-size: 1.6em; + +.typo h3, .typo-h3{ + font-size:1.6em; } -.typo h4, .typo-h4 { - font-size: 1.4em; + +.typo h4, .typo-h4{ + font-size:1.4em; } -.typo h5, .typo h6, .typo-h5, .typo-h6 { - font-size: 1.2em; + +.typo h5, .typo h6, .typo-h5, .typo-h6{ + font-size:1.2em; } /* 在文章中，应该还原 ul 和 ol 的样式 */ -.typo ul, .typo-ul { - margin-left: 1.3em; - list-style: disc; +.typo ul, .typo-ul{ + margin-left:1.3em; + list-style:disc; } -.typo ol, .typo-ol { - list-style: decimal; - margin-left: 1.9em; + +.typo ol, .typo-ol{ + list-style:decimal; + margin-left:1.9em; } -.typo li ul, .typo li ol, .typo-ul ul, .typo-ul ol, .typo-ol ul, .typo-ol ol { - margin-top: 0; - margin-bottom: 0; - margin-left: 2em; + +.typo li ul, .typo li ol, .typo-ul ul, .typo-ul ol, .typo-ol ul, .typo-ol ol{ + margin-top:0; + margin-bottom:0; + margin-left:2em; } -.typo li ul, .typo-ul ul, .typo-ol ul { - list-style: circle; + +.typo li ul, .typo-ul ul, .typo-ol ul{ + list-style:circle; } /* 同 ul/ol，在文章中应用 table 基本格式 */ .typo table th, .typo table td, .typo-table th, .typo-table td .typo table caption{ - border: 1px solid #ddd; - padding: 0.5em 1em; - color:#666; + border:1px solid #ddd; + padding:0.5em 1em; + color:#666; } -.typo table th, .typo-table th { - background: #fbfbfb; + +.typo table th, .typo-table th{ + background:#fbfbfb; } -.typo table thead th, .typo-table thead th { - background: #f1f1f1; + +.typo table thead th, .typo-table thead th{ + background:#f1f1f1; } -.typo table caption { - border-bottom:none; + +.typo table caption{ + border-bottom:none; } /* 去除 webkit 中 input 和 textarea 的默认样式 */ .typo-input, .typo-textarea{ - -webkit-appearance:none; - border-radius:0; + -webkit-appearance:none; + border-radius:0; } /* 高亮选中 */ -::-moz-selection { - background:#08c; - color:#fff; +::-moz-selection{ + background:#08c; + color:#fff; } -::selection { - background:#08c; - color:#fff; + +::selection{ + background:#08c; + color:#fff; } /* TODO: 供着重号使用 */ -.typo-em, .typo em, legend, caption { +.typo-em, .typo em, legend, caption{ color:#000; - font-weight: inherit; + font-weight:inherit; } From 535fc03b1f40a18683c19968e1aa8b8bc70f142e Mon Sep 17 00:00:00 2001 From: sofish Date: Wed, 4 Jun 2014 18:31:10 +0800 Subject: [PATCH 44/90] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20a=20=E7=9A=84?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=EF=BC=8C=E4=BF=AE=E6=94=B9=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 8 +++--- typo.html | 81 +++++++++++++++++++++---------------------------------- 2 files changed, 36 insertions(+), 53 deletions(-) diff --git a/typo.css b/typo.css index 0cc48c7..c3ac320 100644 --- a/typo.css +++ b/typo.css @@ -147,9 +147,11 @@ sub{ } /* 让链接在 hover 状态下显示下划线 */ -a:hover{ - text-decoration:underline; -} +a{ color:#1abc9c; } +a:hover{ text-decoration:underline; } + +.typo a{ border-bottom:1px solid #1abc9c; } +.typo a:hover{ border-bottom-color:#555; color:#555; text-decoration:none; } /* 默认不显示下划线，保持页面简洁 */ ins, a{ diff --git a/typo.html b/typo.html index 378a1a6..a61d5ef 100644 --- a/typo.html +++ b/typo.html @@ -2,15 +2,17 @@ - + - TYPO.CSS - 中文网页重设与排版 + Typo.css - 中文网页重设与排版 @@ -125,6 +127,7 @@

中文排版的重点和难点

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

附录一：Typo.css 排版偏重点 +
附录一：Typo.css 排版偏重点

目前已有像百姓网等全面使用 Typo.css 的项目，测试平台的覆盖，特别是在移动端上还没有覆盖完主流平台，希望有能力的同学能加入测试行列，或者加入到 Typo.css From e450ea5101ecad9ab8f92ad9593323574a016400 Mon Sep 17 00:00:00 2001 From: sofish Date: Thu, 5 Jun 2014 02:40:23 +0800 Subject: [PATCH 47/90] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E5=AD=97=E4=BD=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 2 +- typo.html | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/typo.css b/typo.css index 076eabc..d4aeeb8 100644 --- a/typo.css +++ b/typo.css @@ -30,7 +30,7 @@ audio, canvas, video{ /* 要注意表单元素并不继承父级 font 的问题 */ body, button, input, select, textarea{ - font:400 1em/1.8 Arial, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; + font:400 1em/1.8 Avenir, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; } /* 去除 IE6 input/button 多余的空白 */ diff --git a/typo.html b/typo.html index 30b3691..dba3d61 100644 --- a/typo.html +++ b/typo.html @@ -9,14 +9,14 @@ @@ -127,7 +127,6 @@

中文排版的重点和难点

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

附录一：Typo.css 排版偏重点 -
附录一：Typo.css 排版偏重点

目前已有像百姓网等全面使用 Typo.css 的项目，测试平台的覆盖，特别是在移动端上还没有覆盖完主流平台，希望有能力的同学能加入测试行列，或者加入到 Typo.css From e8a811f29c27d46f798695b30225649fff6dbb9f Mon Sep 17 00:00:00 2001 From: sofish Date: Thu, 5 Jun 2014 02:42:58 +0800 Subject: [PATCH 48/90] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=20mark=20=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/typo.css b/typo.css index d4aeeb8..771856e 100644 --- a/typo.css +++ b/typo.css @@ -165,7 +165,9 @@ u, .typo-u{ /* 标记，类似于手写的荧光笔的作用 */ mark{ - background:#fffdd1;border-bottom:1px solid #ffedce;padding:3px 6px;margin:0 5px; + background:#fffdd1; + border-bottom:1px solid #ffedce; + padding:2px;margin:0 5px; } /* 代码片断 */ From 2e8bf23f6f8c840aad950b3c36d00432e7c28f81 Mon Sep 17 00:00:00 2001 From: sofish Date: Thu, 5 Jun 2014 02:55:26 +0800 Subject: [PATCH 49/90] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AD=97=E4=BD=93?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E5=92=8C=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 1 - typo.html | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/typo.css b/typo.css index 771856e..5fa11a2 100644 --- a/typo.css +++ b/typo.css @@ -330,7 +330,6 @@ h1, h2, h3, h4, h5, h6{ color:#fff; } -/* TODO: 供着重号使用 */ .typo-em, .typo em, legend, caption{ color:#000; font-weight:inherit; diff --git a/typo.html b/typo.html index dba3d61..4ec13fd 100644 --- a/typo.html +++ b/typo.html @@ -50,7 +50,7 @@

一、关于 Typo.css

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

现状和如何去做：

排版是一个麻烦的问题 ^{# 附录一}，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个 OS 中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的 +

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

Typo.css 测试于如下平台：

From 3d4aeebe21d01eba9ed062712f3229fc5859dace Mon Sep 17 00:00:00 2001 From: sofish Date: Thu, 5 Jun 2014 02:59:15 +0800 Subject: [PATCH 50/90] =?UTF-8?q?=E8=AE=A9=20.typo=20=E4=B8=8B=E9=9D=A2?= =?UTF-8?q?=E7=9A=84=E5=9B=BE=E7=89=87=E9=83=BD=E8=83=BD=E8=87=AA=E9=80=82?= =?UTF-8?q?=E5=BA=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/typo.css b/typo.css index 5fa11a2..0113bf5 100644 --- a/typo.css +++ b/typo.css @@ -334,3 +334,7 @@ h1, h2, h3, h4, h5, h6{ color:#000; font-weight:inherit; } + +/* Responsive images */ +.typo img{ max-width: 100%; } + From ece5761ce1d2e37a18848e46b2518beaf3ff6948 Mon Sep 17 00:00:00 2001 From: sofish Date: Thu, 5 Jun 2014 03:05:37 +0800 Subject: [PATCH 51/90] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20borderbox=20?= =?UTF-8?q?=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/typo.css b/typo.css index 0113bf5..e8d6aec 100644 --- a/typo.css +++ b/typo.css @@ -10,6 +10,13 @@ html{ -moz-osx-font-smoothing: grayscale; } +/* 如果你的项目仅支持 IE9+ | Chrome | Firefox 等，推荐在中添加 .borderbox 这个 class */ +html.borderbox *, html.borderbox *:before, html.borderbox *:after { + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; + box-sizing:border-box; +} + /* 内外边距通常让各个浏览器样式的表现位置不同 */ body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section{ margin:0; @@ -337,4 +344,3 @@ h1, h2, h3, h4, h5, h6{ /* Responsive images */ .typo img{ max-width: 100%; } - From 49d5b9b35a1a1a55d4697e8cdff0e727510062d1 Mon Sep 17 00:00:00 2001 From: sofish Date: Thu, 5 Jun 2014 03:08:37 +0800 Subject: [PATCH 52/90] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + typo.html | 5 ----- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/README.md b/README.md index f67830d..825075f 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,7 @@ (3) 清理浮动：与一般 reset.css 保持一致 `.clearfix`
(4) 强制换行：添加 `.textwrap` 到文本所在的容器，如果是 `table` 测还需要 `.textwrap-table`
(5) 衬线字体：添加 `.serif` +(6) 创建 border-box：在 html 中添加 `.borderbox` [#why](http://www.paulirish.com/2012/box-sizing-border-box-ftw/) ### 三、开源许可 diff --git a/typo.html b/typo.html index 4ec13fd..cae0bed 100644 --- a/typo.html +++ b/typo.html @@ -374,11 +374,6 @@

1、Typo.css 排版偏重点

.typo-em 利用 :after 和 :before 实现着重符 - - 首字下沉 - .typo-first - 特殊排版 - 清除浮动 .clearfix From 4cf3a07acfdab2ef822f265d8a650472f6ab9a88 Mon Sep 17 00:00:00 2001 From: sofish Date: Thu, 5 Jun 2014 03:09:50 +0800 Subject: [PATCH 53/90] =?UTF-8?q?=E6=96=87=E6=A1=A3=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E9=94=99=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typo.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typo.html b/typo.html index cae0bed..dbcd99b 100644 --- a/typo.html +++ b/typo.html @@ -364,7 +364,7 @@

1、Typo.css 排版偏重点

一致化各浏览器显示，中英混排正确 - 加强类 + 加强类专名号 .typo-u 由于 u 被 HTML4 放弃，在向后兼容上推荐使用 <typo-u From 8b71d3d7a5ef627d1440cf6ccd398bbeb6306d18 Mon Sep 17 00:00:00 2001 From: sofish Date: Thu, 5 Jun 2014 03:11:31 +0800 Subject: [PATCH 54/90] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E6=96=87=E6=A1=A3=20ur?= =?UTF-8?q?l?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- typo.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 825075f..92789f7 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ 目标：一致化浏览器排版效果，构建最适合中文阅读的网页排版。包括桌面和移动平台。 -预览：[typo.css](http://typo.sofish.de) +预览：[typo.css](http://typo.sofi.sh) ### 一、目录结构 . @@ -23,7 +23,7 @@ 2、`class="typo"` 阅读内容排版 -在文章/文档阅读的页面，需添加 `.typo` 这个 class，这样 table/ol/ul 等都会有预定的样式，让你的排版像 [http://typo.sofish.de](http://typo.sofish.de) 一样，让用户阅读起来更舒服。 +在文章/文档阅读的页面，需添加 `.typo` 这个 class，这样 table/ol/ul 等都会有预定的样式，让你的排版像 [http://typo.sofi.sh](http://typo.sofi.sh) 一样，让用户阅读起来更舒服。在父容器在没有添加 `class="typo"` 的时候，可以使用 `class="typo-标签"`（如 `class="typo-ul"`）来实现像 `.typo > ul` 这样结构的样式。 diff --git a/typo.html b/typo.html index dbcd99b..0de6d13 100644 --- a/typo.html +++ b/typo.html @@ -401,7 +401,7 @@

1、Typo.css 排版偏重点

2、开源许可

Typo.css 基于 MIT License 开源，使用代码只需说明来源，或者引用 license.txt 即可。

+ href="http://typo.sofi.sh/license.txt">license.txt 即可。

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

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

一、关于 TYPO.CSS

现状和如何去做：

中文排版的重点和难点

二、排版实例：

例1：论语学而篇第一

本篇引语

原文

注释

译文

评析

例2：英文排版

The standard Lorem Ipsum passage, used since the 1500s

Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC

List style in action

You may want to create a perfect <hr /> line, despite the fact that there will never have one

三、附录

1、TYPO.CSS 排版偏重点

2、开源许可

译文

评析

例2：英文排版

List style in action

You may want to create a perfect <hr /> line, despite the fact that there will never have one

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

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

例1：论语学而篇第一

本篇引语

原文

原文

注释

注释

译文

评析

评析

例2：英文排版

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

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

评析

例2：英文排版

The standard Lorem Ipsum passage, used since the 1500s

1、TYPO.CSS 排版偏重点

1、TYPO.CSS 排版偏重点

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

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

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

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

一、关于 TYPO.CSS

现状和如何去做：

中文排版的重点和难点

二、排版实例：

例1：论语学而篇第一

本篇引语

原文

注释

译文

评析

例2：英文排版

The standard Lorem Ipsum passage, used since the 1500s

Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC

List style in action

You may want to create a perfect <hr /> line, despite the fact that there will never have one

You may want to create a perfect <hr /> line, despite the fact that there will never have one +

三、附录

1、TYPO.CSS 排版偏重点

2、开源许可

中文排版的重点和难点

中文排版的重点和难点

一、关于 Typo.css

现状和如何去做：

1、Typo.css 排版偏重点

1、Typo.css 排版偏重点

1、Typo.css 排版偏重点

2、开源许可

中文网页重设与排版：Typo.css

2、开源许可

2、开源许可

1、Typo.css 排版偏重点

现状和如何去做：

You may want to create a perfect `<hr />` line, despite the fact that there will never have one

You may want to create a perfect `<hr />` line, despite the fact that there will never have one

You may want to create a perfect `<hr />` line, despite the fact that there will never have one

You may want to create a perfect `<hr />` line, despite the fact that there will never have one +