中文网页重设与排版: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
OS X - - - -
Win 7 -
Win XP -
Ubuntu - - - - -

中文排版的重点和难点

在中文排版中,HTML4 的很多标准在语义在都有照顾到。但从视觉效果上,却很难利用单独的 CSS 来实现,像

着重号(例:这里强调一下)。在 HTML4 中,专名号标签( <u> )已经被放弃,而

HTML5 被重新提起typo.css 也根据实际情况提供相应的方案。我们重要要注意的两点是:

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

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

附录一typo.css 排版偏重点

目前已有像百姓网等全面使用 typo.css 的项目,测试平台的覆盖,特别是在

移动端上还没有覆盖完主流平台,希望有能力的同学能加入测试行列,或者加入到 typo.css

的开发。加入方法:参与 typo.css 开发。如有批评、建议和意见,也随时欢迎给在 Github 直接提 issues,或给

我发邮件

二、排版实例:

提供2个排版实例,第一个中文实例来自于来自于

张燕婴的《论语》,由于古文排版涉及到的元素比较多,所以采用《论语》中《学而》的第一篇作为排版实例介绍;第2个来自到经典的

Lorem Ipsum,并加入了一些代码和列表等比较具有代表性的排版元素。

例1:论语学而篇第一

作者:孔子(前551年9月28日-前479年4月11日)

本篇引语

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

原文

子曰:「学而时习之,不亦说乎?有朋自远方来,不亦乐乎?人不知,而不愠,不亦君子乎?」

译文

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

评析

宋代著名学者朱熹对此章评价极高,说它是「入道之门,积德之基」。本章这三句话是人们非常熟悉的。历来的解释都是:学了以后,又时常温习和练习,不也高兴吗等等。三句话,一句一个意思,前后句子也没有什么连贯性。但也有人认为这样解释不符合原义,指出这里的「学」不是指学习,而是指学说或主张;「时」不能解为时常,而是时代或社会的意思,「习」不是温习,而是使用,引申为采用。而且,这三句话不是孤立的,而是前后相互连贯的。这三句的意思是:自己的学说,要是被社会采用了,那就太高兴了;退一步说,要是没有被社会所采用,可是很多朋友赞同

我的学说,纷纷到我这里来讨论问题,我也感到快乐;再退一步说,即使社会不采用,人们也不理解我,我也不怨恨,这样做,不也就是君子吗?(见《齐鲁学刊》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.

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.”

目录
相关文章
|
13天前
|
前端开发 JavaScript
结合CSS和JavaScript创建动态网页
【4月更文挑战第21天】结合CSS和JavaScript创建动态网页
19 4
|
4天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
4天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
4天前
|
前端开发 UED
【专栏:工具与技巧篇】CSS Sprites 与图标字体:优化网页图标加载
【4月更文挑战第30天】本文探讨了网页图标优化的两种方法:CSS Sprites和图标字体。CSS Sprites通过合并图标减少HTTP请求,提高加载速度,但维护复杂;图标字体则提供良好扩展性和定制性,易于调整大小和颜色。两者各有优劣,适用于不同场景。在实际应用中,应结合使用,根据项目需求灵活选择,以实现最佳性能优化和用户体验。
|
4天前
|
移动开发 缓存 前端开发
【专栏:HTML与CSS实践篇】网页性能优化:CSS与HTML的最佳实践
【4月更文挑战第30天】本文探讨了优化CSS和HTML以提升网页性能的最佳实践。HTML优化包括:精简结构、压缩代码、异步加载脚本和利用缓存。CSS优化则涉及:精简代码、合并文件、使用CSS Sprite、善用CSS3属性、避免@import及响应式设计。这些方法能加快加载速度,改善用户体验。
|
4天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 实践篇】网页图标与字体图标的使用
【4月更文挑战第30天】本文探讨了网页设计中两种主要图标形式——传统图标和字体图标。传统图标(PNG, JPEG, GIF)视觉效果丰富但文件大,易影响加载速度且维护不便。字体图标占用空间小,易于维护和定制,但视觉效果相对简单,选择有限。实际应用中,两者可结合使用,以导航栏、操作按钮和提示信息为例说明了图标的重要性。设计师需注意兼容性、清晰度和性能优化问题,根据项目需求选择合适图标类型,以提升网页质量和用户体验。
|
4天前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
|
4天前
|
前端开发 UED
【专栏:CSS基础篇】CSS背景与边框:设计网页外观
【4月更文挑战第30天】CSS中的背景和边框是网页设计的关键元素,能增强视觉层次和用户体验。背景可通过`background-color`设置颜色,`background-image`添加图像,`background-position`和`background-size`调整位置和大小。边框用`border-style`定义样式,`border-width`设定宽度,`border-radius`创建圆角。理解并巧妙运用这些属性,结合媒体查询实现响应式设计,将使网页更具吸引力和功能性。不断学习和创新是提升设计能力的关键。
|
4天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
|
4天前
|
前端开发
【专栏:CSS基础篇】CSS盒模型:理解网页布局的核心
【4月更文挑战第30天】CSS盒模型是网页布局关键,将HTML元素视为内容、内边距、边框和外边距的矩形。内容决定元素大小,padding增加内部空间,border设置线条样式,margin控制元素间距。理解盒模型及其计算方式(内容+padding+border+margin)有助于布局设计。通过调整相关属性,实现浮动、Flexbox或定位布局,创建响应式网页。