typography 排印
什么是排印?
排印 typograph ，是一种涉及对字体、字号、缩进、行间距、字符间距进行设计、安排等方法来进行排版的一种工艺。
排印源于传统的纸质媒体，即是所谓的印刷术。而Web排印，就是基于新型的电子媒体和Web系统,使用css等技术来更好的表现内容，使其更符合人类的视听感受和用户体验。
纸媒书写与电媒书写
| 项目 | 纸媒 | 电媒 |
|---|---|---|
| 书写载体 | 纸张 | 电子屏幕 |
| 书写材料 | 墨水 | 荧光粉(CRT)、二极管、LED(液晶) |
| 书写工具 | 笔 | 电流 |
| 书写质量 | 笔尖细度,纸、墨质量 | 屏幕的分辨率、LED的颜色明暗度 |
| 书写者 | 人 | 控制软件 |
对于纸媒，书写是方便和自然的，但要将书写的结果进行复制，即印刷，则是困扰古代人类的大问题。为此，还成为了中国的四大发明之二,重要性可见一般
印刷
- 书写是昂贵的，复制是快速而廉价的，人类需要印刷
- 印刷的核心工序是刻版，即制作母版
- 有了母版，再使用印或刷的技术，进行大规模复制
- 印：盖公章，母版主动，纸被动
- 刷：拓碑文, 纸主动,母版被动
纸媒印刷与电媒印刷
| 项目 | 纸媒 | 电媒 |
|---|---|---|
| 母版材料 | 木,复写纸,铜等 | 编程语言及背后的运行环境,如html/css |
| 制作母版 | 雕版或活字版 | 编写程序代码,如Web文档 |
| 印刷设备 | 人力或印刷机 | 计算机,OS,浏览器 |
| 印刷过程 | 印或刷 | 执行程序,浏览器解析html/css代码 |
| 印刷结果 | 实体印刷品 | 可以是实物(借助于打印机),也可以是虚拟的显示 |
电媒天生具有集书写与印刷一体的特质,也就是说,当书写完毕，母版的制作和印刷就已就绪
制版: 雕版
在一块整体木板上进行雕刻，制版的过程即排版
排版: 活字
事先雕刻好单个的字模,需要印刷时进行组合和拼装,即排版
雕版与活字的对比
| 雕版 | 活字 |
|---|---|
| 书写的精度高,基于刻刀的精度 | 最小单位只能字模块 |
| 适应范围广,可文字,可作画 | 只能是文字类 |
| 一版一制,无法重用,哪怕改动一个字 | 可以重用,基于字模的重用 |
| 制作过程基于时间关联,错了一刀,整版即毁 | 基于组合,可以随时打散重组 |
关于中国古代活字的讨论,参看: https://zhuanlan.zhihu.com/p/22480235
电子媒体: 雕版
无论是绘制文字还是图形，需要给出每一个像素点的坐标
more https://www.bing.com/images/search?q=Pixel+Art pixel art
电子媒体: 活字
////////{ >o﹤}
||||||| |
||||| O O |
|||| / /|
|||\ __ /|||
||||\_______/||||
|||||||____|||||||
||||||| \
|||| | ( ( | |
|||| | | |
||| | \ \
/ // \\ \
// \\ \
)/______________\( ,,,)
| | | |
| | | |
(___| | ___)
仅需要程序员给出一个文本的Ascii代码,系统将自动绘制出这个文本的形状
注意:上图不是一张图片,是直接嵌在本页面里的文本, 来源 more https://www.bing.com/images/search?q=pixel+art+vs+ascii+art&qpvt=pix+art+vs+ascii+art&form=IGRE&first=1
此处故意给出了一个反例,用文本模式来绘制图形(称之为 Ascii Art),显然是太费力而且精度质量不高.但如果是用于显示文本为主的文档,则对于程序员而言,就方便多了.
电媒雕版与活字的对比
| 图形模式 | 文本模式 |
|---|---|
| 基于像素,精度高,创作者自由 | 基于文字,最小单位只能预制好的字体 |
| 适合绘制图形 | 适合显示文字为主的文档 |
| windows是基于图形模式的图形化用户界面 GUI | 命令行或Linux终端是基于文本模式的文本用户界面 TUI |
同样是绘制图形,又可以分为矢量图形和栅格图形模式,也就是photoshop和Illustrator的区别,参看
pixel art vs ascii art
Web 排印
- 主要基于TUI, 字体及其样式是Web排印的核心
- 同时支持预定义媒体类型的像素级渲染,如
<img>,<video>等 - 现代浏览器允许程序通过画布
<canvas>标记进行像素级的自由渲染,但需要编写javascript代码
显然,如何你使用命令行浏览器,那么就不用考虑图片和画布的显示了
Web 排印 与 CSS
- 对于文本类标记,称之为非置换元素,可以通过css对其样式进行完全控制
- 对于多媒体标记,称之为置换元素(即标记的内容将被实际的资源所置换),css对其样式只能进行部分控制
- 对于画布标记里的内容,css无法对其样式进行控制
工具与实例
使用下述网站中的可视化排印工具，可以体验一下排印的各种效果和背后的代码：
我们会发现，上述工具都十分类似我们在日常网站中使用过的富编辑器，事实上，富编辑器的功能就是方便web用户以可视化所见即所得方式输入文本，同时为文本指定的基本的排印样式
语法参考
- 字体 http://www.runoob.com/css/css-font.html
- 文本 http://www.runoob.com/css/css-text.html
- 文本布局 http://www.runoob.com/css/css-align.html
- 链接
- 列表
- 表格
排印模板
如果你想快速体验一下设计精良的排印效果，可以使用以下由社区提供好的排印模板。只需要简单的下载模板所提供的css文件，引入到自己的网页中，即可。
- 中文模板
- 英文模板
- Markdown 标准样式 http://jgthms.com/wysiwyg.css/
深入阅读
- 排版手册 https://github.com/kennethwang14/TypographyHandbook
- 资源大全 https://github.com/deanhume/typography
- Typography 图书 http://www.sohu.com/a/143370935_659926
结论
我们是数字时代的排版工！