sofish/typo.css

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

中文网页重设与排版：

目标：一致化浏览器排版效果，构建最适合中文阅读的网页排版。包括桌面和移动平台。

预览：typo.css

一、目录结构

.
├── README.md           --- 使用帮助
├── license.txt         --- 许可证
├── typo.css            --- 将应用于你的项目
└── typo.html           --- Demo/预览

二、TYPO.CSS 的设计和使用

TYPO.CSS 主要包括：

1、一般 reset.css 所需的内容

目前的设计是这样的，尽量保持完整的 reset，比如让 ul/ol 无样式并且无多余的 padding/margin，这是必须的，因为一个网可能需要很多自定义的的内容，在实践中我们并不希望像 ul/ol 有样式，这样我们得用优先级去覆盖，这是非常麻烦的事。所以 typo.css 并不像 normalize.css，后者给每一个元素都预先定义了样式，这样在自定义的时候将是非常痛苦的。要大保持干净的所有元素一致化的 reset 才是最佳实践。

2、class="typo" 阅读内容排版

在文章/文档阅读的页面，需添加 .typo 这个 class，这样 table/ol/ul 等都会有预定的样式，让你的排版像 http://typo.sofi.sh 一样，让用户阅读起来更舒服。

在父容器在没有添加 class="typo" 的时候，可以使用 class="typo-标签"（如 class="typo-ul"）来实现像 .typo > ul 这样结构的样式。

3、增加类：

主要是一些需要中文日常排版需要的元素和语文对应样式的增强，目前包括：

(1) 专名号：使用标签 <u> 或者 .typo-u
(2) 着重号：使用 class .typo-em
(3) 清理浮动：与一般 reset.css 保持一致 .clearfix
(4) 强制换行：添加 .textwrap 到文本所在的容器，如果是 table 测还需要 .textwrap-table
(5) 衬线字体：添加 .serif
(6) 创建 border-box：在 html 中添加 .borderbox #why

三、开源许可

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

typo.css's Issues

官网上出现了很多根号

应该换成（✔）✔？

Latest release 的版本号不对吧

1.0 -> 1.1 -> 0.0.3?

p标签为什么不首行缩进呢？

从小课本里的文章每段首行都有缩进，但是网页很多不缩进，中文中首行缩进不是应该更舒服点么

margin与list

margin设置的为0，页面直接浏览器左边；
list，ul设置的none，发现没有list 符号了。

release版本落后了

看到 typo.css 文件有新改动，没有release版本啊，想问下是作者有意的还是忘了

你好，能否做一个适配Markdown的typo CSS

你好，如题，能否做一个适配Markdown的typo CSS，像github 的css一样，可以导入到其他Markdown编辑器中呢？我试了一下直接导入到其他工具中时样式失效了

希望提供一个压缩版本

如题目所述，我想将它用在一些小项目中。

是否能搞个夜间模式?

这套 CSS 堪称完美, 如果能做一套夜间模式的配色, 就更赞了.

进一步建议

①段首空两格或首字放大占两行;
②包括全角空格、制表符等在内均应为等宽字体！

首字下沉能不能这样实现

.typo-first:first-letter{
float: left;
color: #000;
font-size: 250%;
line-height: 100%;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;

}
在这个地方看到的实现 http://css-tricks.com/snippets/css/drop-caps/ 利用的是CSS3的特性，

文字描述有语病

typo.css/typo.html

Line 139 in f5d6cb5

<p>在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS 来实现，像<abbr title="在文字下多加一个点">着重号</abbr>（例：这里<em class="typo-em">强调一下</em>）。在 HTML4 中，专名号标签（<code>&lt;u&gt;</code>）已经被放弃，而

在中文排版中，HTML4 的很多标准在语义在都有照顾到。

[draggable] 属性是否需要严谨一些？

[draggable] {
    cursor: move;
}

[draggable] 这个属性选择器，匹配了 draggable 、 draggable = true 、draggable = false 这三种属性的元素，最后一种显然不希望显示 move 图标吧？

可否制作基于 Bootstrap 3 的版本？

可否制作基于 Bootstrap 3 的版本？

ie6下浏览器文字大小改变问题

fish哥这个typo很给力，首先允许我强烈赞一个！但是发现在ie6下如果手动改变浏览器大小的话是不生效的。

abbr text decoration bug

pre 过长的问题哟

 pre 和 code标签 过长

xxxxx

xxxxx

xxx文字过长都会有飞出浏览器的问题,不折行

从网上搜了个解决方案出来,

pre, code {
white-space: pre-wrap; /* css-3 /
white-space: -moz-pre-wrap !important; / Mozilla, since 1999 /
white-space: -pre-wrap; / Opera 4-6 /
white-space: -o-pre-wrap; / Opera 7 /
word-wrap: break-word; / Internet Explorer 5.5+ */
}

不过加上去，看着不和谐。。。

是否能提供一个相对某 class 下样式的版本？

您好。看到您的这个效果非常赞，在 Issues 区也看到有人提是否有针对 bootstrap 的版本，我想问问您，有相对某 class 的或怎么简单的改出相对某 class 的样式，这样外部使用什么 css 都不用管了，只要内容区加上某 class 即可应用此样式。

<h1>-<h4>标题似乎有点浅

正在看typo.css这个仓库首页，觉得想法非常赞，也确实有这样需求，毕竟排版不好非常令人捉急。不过这里发现<h1>到<h4>标题的字体比较细，从样式上讲可能有这样设计的考虑，而从内容上讲则觉得标题hold不住下面的内容。非设计专业，只是浅见，有错漏之处也请给我提出。

这是现在官网的样式。标题比较细，视觉效果比较素雅，不过反倒使得在内容中辨别标题变得困难。

以上的话，标题何在，段落与段落之间到何处，则内容上更一目了然。不一定需要选这个字体，我想建议的点在于，可以通过适当增加标题的weight来使其能在正文内容中被迅速标识出来。欢迎讨论。

貌似没有 embed 元素的样式...

h1 在 OSX10.9 Chrome 29.0.1547.76 下很乱，有的字粗，有的字细

RT

strong, b 应该为 bold

https://github.com/sofish/typo.css/blob/master/typo.css#L214

strong, b{font-weight:inherit;color:#000;}

把 strong 设置为 inherit，是没有粗体效果的。
应该改为 bold

与Font-Awesome公用时，回导致部分安卓手机上无法显示Font-Awesome的icons

安卓手机的某些默认浏览器，如魅族M3自带的xxx浏览器会无法显示Font-Awesome的icons，换成chrome浏览器正常。

经过艰苦的排查，发现是因为typo.css里的
html{ .... text-rendering: optimizelegibility; .... }

把 optimizelegibility 替换为 auto，icon则正常显示。

与bootstrap共用字体偏小

http://djyde.github.io/everfeed/

可以在这里看看效果，bootstrap版本是3

更加适合 Linux 系统的 font-family

目前中文的 font-family 设置为苹果系统的丽黑和微软的雅黑，在 Linux 系统上都会 fallback，能否针对 Linux 系统给 font-family 里加上比如 WenQuanYi Micro Hei （文泉驿微米黑）这样的字体呢？

opera下h1偏细

如题所示。对比了opera、ff和chrome。opera版本12.16

ie下Serif字体显示

ie下Serif字体问题

124行这个是什么意思 vertical-align: text-top\9;

https://github.com/sofish/typo.css/blob/master/typo.css#L124

Chrome不认，网上搜也没搜到，是不是多写了一个\9

type-em 的跨行处理问题

看到着重号的实现方式是 :after 里的一长串 ・・・・，我在想这样的实现会不会有点不完美？
比如现在如果 <em class="type-em"></em> 跨行了，我试验的效果是完全不显示；对 <p class="typo-em"></p> 就只有第一行有效，而且如果有一行特别特别长，可能超过了这一串 ・・・・ 的长度，这样的情况怎么处理呢？

sublist doesnot indent

when I using it in rst preview, I found the sub list does not indent.

Without typo.css , things looks right.

在与Bootstrap-responsive 2.x 同用时移动端页面无padding

理解这是由typo.css的Reset机制引入的，只是在实际使用过程中导致两个组件无法不经修改地达成想要的效果，不知可曾考虑过这种情况的处理方式？如果有好的解决方法也一并请教，多谢

typo.html 中有两处小错误

• 第268行末尾，粗休应为粗体。
• 第325行末尾，code标签内，<u type="typo-u" …中<应改用字符实体<。

演示站点 http://typo.sofish.de/ 打不开啦

Welcome to nginx! 重装了？没配置？

能不能适配各种移动端屏幕

我看里面对各种标签的字体大小都是用em为单位，这样不同屏幕下字体大小差距会有点大吧？

字体太细了

看不清

http://typo.sofi.sh/ 页面404

rt

[enhancement] Add missing bower.json.

Hey, maintainer(s) of sofish/typo.css!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library sofish/typo.css is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "sofish/typo.css",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

在Mac OS X 10.10下的chrome上看的英文单引号问题

比如I'm会处理成下面这样：