Web前端开发技术

Appearance

排印 ​

元信息 ​

  • 目标：从印刷术（书写、母版、雕版与活字）理解数字媒体排版的本职，建立 Web 排印意识——用 CSS 精确控制文本呈现，并分清 CSS 对不同元素类型的控制边界
  • 关键概念：排印、母版、置换元素、非置换元素、文本流排版
  • 关联阶段：cp1
  • 常见误区：以为 CSS 能控制页面上一切内容的样式（画布 canvas 内部内容 CSS 无能为力，图片等置换元素也只能部分控制）；以为排印只是"选个好看字体"（字号、行距、缩进、段落同为排印要素）

排印 ​

排印 typograph ，是一种涉及对字体、字号、缩进、行间距、字符间距进行设计、安排等方法来进行排版的一种工艺。

排印源于传统的纸质媒体，即是所谓的印刷术。

而计算机软件或数字媒体，本质上也是一种印刷系统，它解决的是如何将信息通过电子媒体进行记录和传输，或者换一种说法：书写与印刷

码农：数字时代的排版工！

纸媒书写 与 电媒书写 ​

项目纸媒电媒
书写载体纸张电子屏幕
书写材料墨水荧光粉(CRT)、二极管、LED(液晶)
书写工具笔电流
书写质量笔尖细度,纸、墨质量屏幕的分辨率、LED的颜色明暗度
书写者人控制软件

书写 与 印刷 ​

  • 书写是昂贵的，复制则是快速而廉价的
  • 书写是印刷是基础，印刷是书写的放大
  • 印刷的核心工序是刻版，即制作母版

对于纸媒，书写是方便和自然的，但要将书写的结果进行复制，即印刷，则是困扰古代人类的大问题。为此，还成为了中国的四大发明之二,重要性可见一般

纸媒印刷 与 电媒印刷 ​

项目纸媒电媒
母版材料木,复写纸,铜等编程语言及背后的运行环境,如html/css
制作母版雕版或活字排版编写程序代码,如Web文档
印刷设备人力或印刷机计算机,OS,浏览器
印刷过程印（盖公章，母版主动，纸被动）<br/>刷（拓碑文, 纸主动,母版被动）执行程序,浏览器解析html/css代码
印刷结果实体印刷品可以是实物(借助于打印机),也可以是虚拟的显示

电媒天生具有集书写与印刷一体的特质,也就是说,当书写完毕，母版的制作和印刷就已就绪

雕版 与 排版 ​

排印-0排印-1

  • 雕版：在一块整体木板上进行雕刻
  • 排版：事先雕刻好多个字模形成字库，在需要印刷时进行组合和拼装

雕版 与 排版的比较 ​

雕版活字
书写的精度高,基于刻刀的精度最小单位只能字模块
适应范围广,可文字,可作画只能是文字类
一版一制,无法重用,哪怕改动一个字可以重用,基于字模的重用
制作过程基于时间关联,错了一刀,整版即毁基于组合,可以随时打散重组

关于中国古代活字的讨论,参看: https://zhuanlan.zhihu.com/p/22480235

数字排印 ​

排印-2排印-3

pix art vs asscii art ​

排印-4

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

pixel art https://www.bing.com/images/search?q=Pixel+Art

ascii art http://copy.r74n.com/ascii-art 此处给出的是一个反例，既不精确，也不漂亮

Web 排印 ​

Web排印，就是基于电子媒体和Web系统，采用css等技术来表现内容，使其更符合人类的视听感受和用户体验。

由于Web系统的发展历史，它早期源于命令行终端，成熟于桌面窗口系统，具有如下特点：

  • 主要基于TUI，字符或字体及其样式，是Web排印的核心
  • 支持预定义媒体类型的像素级渲染,如<img>,<video>等
  • 现代浏览器允许程序通过画布<canvas>标记进行像素级的自由渲染,但需要编写javascript代码
  • 更新的技术包括Web3D、WebGL等

如果你使用命令行浏览器，网页中的图片和画布能显示吗？

Web 排印 与 CSS ​

  • 对于文本类标记,称之为非置换元素,可以通过css对其样式进行完全地控制
  • 对于多媒体标记,称之为置换元素(即标记的内容将被实际的资源所置换),css对其样式只能进行部分控制
  • 对于SVG等语义化图形标记，具有类似于文本的样式控制精度
  • 对于画布标记里的内容,css无法对其样式进行控制

工具与实例 ​

使用下述网站中的可视化排印工具，可以体验一下排印的各种效果和背后的代码：

我们会发现，上述工具都十分类似我们在日常网站中使用过的富编辑器，事实上，富编辑器的功能就是方便web用户以可视化所见即所得方式输入文本，同时为文本指定的基本的排印样式

语法参考 ​

排印模板 ​

如果你想快速体验一下设计精良的排印效果，可以使用以下由社区提供好的排印模板。只需要简单的下载模板所提供的css文件，引入到自己的网页中，即可。

深入阅读 ​

​