The Proportional Web

# 比例网页 来源：https://owickstrom.github.io/the-proportional-web/ 灵感源于《排版风格要素》 作者：Oskar Wickström (https://wickstrom.tech/) v0.1.0，MIT 许可 ## 目录 - 前言 (https://owickstrom.github.io/the-proportional-web/#foreword) - 1 基础 (https://owickstrom.github.io/the-proportional-web/#foundations) - 1.1 排版 (https://owickstrom.github.io/the-proportional-web/#typography) - 1.2 色彩 (https://owickstrom.github.io/the-proportional-web/#colors) - 2 元素 (https://owickstrom.github.io/the-proportional-web/#elements) - 2.1 标题 (https://owickstrom.github.io/the-proportional-web/#headings) - 2.2 强调 (https://owickstrom.github.io/the-proportional-web/#emphasis) - 2.3 水平分隔线 (https://owickstrom.github.io/the-proportional-web/#horizontal-line-breaks) - 2.4 详情 (https://owickstrom.github.io/the-proportional-web/#details) - 2.5 旁注 (https://owickstrom.github.io/the-proportional-web/#asides) - 2.6 名称 (https://owickstrom.github.io/the-proportional-web/#names) - 2.7 引用块 (https://owickstrom.github.io/the-proportional-web/#blockquotes) - 2.8 图示 (https://owickstrom.github.io/the-proportional-web/#figures) - 2.9 列表 (https://owickstrom.github.io/the-proportional-web/#lists) - 2.10 表格 (https://owickstrom.github.io/the-proportional-web/#tables) - 2.11 代码块 (https://owickstrom.github.io/the-proportional-web/#code-blocks) - 3 使用 (https://owickstrom.github.io/the-proportional-web/#usage) - 3.1 目的 (https://owickstrom.github.io/the-proportional-web/#purpose) - 3.2 快速上手 (https://owickstrom.github.io/the-proportional-web/#getting-started) - 4 相关作品 (https://owickstrom.github.io/the-proportional-web/#related-works) - 4.1 排版风格要素应用于网页 (https://owickstrom.github.io/the-proportional-web/#the-elements-of-typographic-style-applied-to-the-web) - 4.2 实用排版 (https://owickstrom.github.io/the-proportional-web/#practical-typography) - 4.3 Tufte CSS (https://owickstrom.github.io/the-proportional-web/#tufte-css) - 后记 (https://owickstrom.github.io/the-proportional-web/#afterword) ## 前言 两年前的夏天，就在我开始在 TigerBeetle 工作之前，我在空闲时间开启了一个新的副项目。我一直对 CSS 情有独钟，但不知道原因；坦白说，它很奇怪、令人困惑，而且以容易出错而闻名。也许是因为我早年编写网页应用时的怀旧之情。无论原因如何，The Monospace Web (https://owickstrom.github.io/the-monospace-web/) 正是源于这份热爱，它的成功远远超出了我的预期，许多个人博客甚至应用程序界面都采用了它。 于是，我再次进入了这种类似冥想的状态，在周末的闲暇时光里编写 CSS。这一次，灵感来自阅读罗伯特·布林赫斯特的经典之作《排版风格要素》。这确实是一个挑战，试图在浏览器中实现书籍本身的布局和排版。有人可能会说这太鲁莽了！显然，印刷和网页的规则并不相同，后者无法依赖固定的页面尺寸，但却拥有可编程平台的所有能力。也许吧，也许不是。我决定无论如何都发布它，并请你从中汲取你认为有价值的东西；如果你觉得它令人愉悦或有用，那将是一个奇迹，如果没有，那也没关系。请把它视为 The Monospace Web 的精神续作和可变宽度版本，同样欢迎复用。我是 Pandoc 的忠实粉丝，这个 HTML 就是用 Pandoc 生成的，但样式表只需稍加调整，就可以在许多其他环境中工作。 ## 基础 > 排版是一门赋予人类语言持久视觉形式的工艺。 ## 排版 ### 以单一多功能字体作为设计基础 在本文档及其设计中，我使用了 Alegreya 字体的两种变体。常规变体用于正文和三级标题。其小型大写字母变体 Alegreya SC 用于标题大写的一级标题、小型大写的二级标题以及内联缩写，例如 HTML。最后，Courier Prime 用于等宽代码片段。 布林赫斯特在他的书中主张选择一种多功能字体，而不是混杂多种不同字体。我认为 Alegreya 就是这样一个选择，而且是一个绝佳的选择。 ### 基于相对度量的字号系统 所有字号都基于根字号，即 16px。因此，字号以 `rem` 单位给出，相对于根字号。下表显示了分数、`rem` 和像素测量值之间的对应关系。 aaaaaaaaaaa 3/4 | 7/8 | 19/8 | 5/4 | 11/8 | 3/2 | 25/2 | 3 | 4 | 0 0.75 | 0.875 | 1 | 1.125 | 1.25 | 1.375 | 1.5 | 2 | 2.5 | 3 | 4 12 | 14 | 16 | 18 | 20 | 22 | 24 | 32 | 40 | 48 | 64 标准字号以分数和十进制 `rem` 单位表示，以及对应的 `px` 值。 将所有内容基于根字号进行调整，使得缩放设计变得容易，例如在较小的视口上： ```css @media screen and (max-width: 480px) { :root { font-size: 14px; } } ``` 行高为 1.2rem，并用作所有元素垂直对齐的基础。与 The Monospace Web 非常相似——但没那么极端——我尝试让所有内容全局对齐到行高的倍数。 ### 现代浏览器中的两端对齐文本 与布林赫斯特的书籍一样，正文采用两端对齐，而不是右侧不齐。对于一些人来说，这在网页上是严重的异端行为。“你不可两端对齐。” 这是我们一直以来被教导的。但浏览器已经随着时间的推移而改进，如今文本两端对齐已不是不可想象的。此样式表使用 `word-break`、`text-wrap` 和 `hyphens` 来控制单词在换行时如何断开和连字符。`hyphenate-limit-chars` 属性可用于控制连字符的范围。当然，风险在于段落中可能出现糟糕的单词间距和“河流”般的空白区域。如果两端对齐不适合你的用途，可以考虑使用 `text-align: left`。在本文档中，我发现它在这种行长度、字号和内容下效果可以接受。我还插入了一些软连字符，以进一步指导一些棘手单词的断词。 ### 缩进段落以提高可读性 按照传统，每个连续的段落缩进 3ch，即三个 0（0x30）字符的宽度。例如，下面的段落开头就有缩进。这可以让你的眼睛更容易浏览文本结构，并找到段落的开始和结束。我们在印刷文本中已经这样做了至少五百年，虽然网页基本上已经采用了无缩进和段落间垂直间距的方式，但这仍然是一种有效的方法。 ## 色彩 你可能已经注意到，这个设计没有颜色。全是白底黑字。不仅是我个人倾向于在散文为主的文档中采用这种极简风格，至少作为一个强有力的默认选择，只有在仔细考虑后我才会偏离它，而且这也是布林赫斯特在他的书中主张的，尽管是针对印刷媒体。我觉得这审美上令人愉悦，对眼睛也更友好，并且它保留了色彩的“弹药库”，从而将读者的注意力保留在最关键的事情上，例如传达复杂数据的图表。 ## 元素 本文档在这里和那里使用了一些额外的类，但大部分只是语义化的 HTML5 标记。例如，这是一个普通的段落。下面的示例为了清晰起见做了缩进；在正常使用中，它们会占据文本的整个宽度。 ## 标题 该设计为三个级别的标题提供了样式：顶级章节标题（`h1`）、章节标题（`h2`）和子章节标题（`h3`）。 ## 论战争理论 ## 战争的艺术或科学 ### 用法仍未确定 ## 强调 这里没什么意外；`<em>` 标签中的文本会变成斜体，正如你所料：你以为我能留下来变成你的 *什么都不是* 吗？ ## 水平分隔线 布林赫斯特的书中没有关于水平分隔线的明确指导，但对我来说，这似乎是放置装饰的好地方。下面是一个例子： --- 使用的符号是 U+2767 Rotated Floral Heart Bullet，来自 Unicode 的 Dingbats 区块。 ## 详情 我们可以把内容隐藏在 `<details>` 元素中。点击下面的标签： 许可证 版权所有 2026 Oskar Wickström 特此免费授予任何获得本软件及相关文档文件（“软件”）副本的人，不受限制地处理本软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本的权利，并允许被提供本软件的人这样做，但须满足以下条件： 上述版权声明和本许可声明应包含在所有软件副本或实质部分中。 本软件按“现状”提供，不提供任何明示或暗示的保证，包括但不限于适销性、特定用途适用性和非侵权性的保证。在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任负责，无论其基于合同、侵权或其他方式，因软件或软件的使用或其他交易而产生或与之相关。 ## 旁注 布林赫斯特的书使用了大量的边注。在 HTML 中，我们使用 `<aside>` 元素来定义它们。与这段文字一起，还有一个旁注。如果视口足够大，你会看到它在右边距中，与上一段落的顶部对齐；如果视口较小，它会折叠成一个带有装饰的内联段落。 ## 名称 专有名词和规范名称，通过使用 `.canonical-name` 类来区分，使用小型大写字母渲染，很像布林赫斯特书中的例子： ... 在龙目岛、巴厘岛、弗洛勒斯岛、帝汶岛和苏拉威西岛上，同样的纺织品 ... ## 引用块 布林赫斯特讨论了几种排版引文的方法，我选择的是使用缩进块、在文本周围加引号，以及带有 *作者*、*作品* 和 *年份* 的页脚。 > Je n'ai fait celle-ci plus longue que parce que je n'ai pas eu le loisir de la faire plus courte. ## 图示 带标题的图片分别放在 `<figure>` 和 `<figcaption>` 元素中。与引用块类似，*作者* 和 *作品* 使用小型大写字母和斜体文本进行特定样式处理，并共享缩进。 列奥纳多·达·芬奇，《维特鲁威人》，约 1490 年，金属尖笔纸本墨水和水彩，34.4 × 24.5 厘米（照片来自维基共享资源 (https://en.wikipedia.org/wiki/File:VitruvianMan_Leonardo_a.jpg)） ## 列表 这是一个普通的项目符号列表： - 香蕉 - 纸船 - 黄瓜 - 火箭 有序列表看起来和你期望的差不多： 1. 目标 2. 动机 1. 内在 2. 外在 3. 二阶效应 ## 表格 表格数据以强表头呈现，使用小型大写字母标签和边框。否则非常简单，仅依赖间距。 | 名称 | 尺寸 | 位置 | |------|------|------| | 波波里方尖碑 | 1.41m × 1.41m × 4.87m | 43°45′50.78′′N 11°15′3.34′′E | | 哈夫拉金字塔 | 215.25m × 215.25m × 136.4m | 29°58′34′′N 31°07′51′′E | ## 代码块 这个设计面向散文，而不是代码密集型的技术写作，但代码块和内联代码也应该能很好地阅读。选择 Courier Prime 字体可能会让人有点打字机怀旧感，但我发现它与 Alegreya 以及我追求的整体感觉非常搭配。这里有一些来自样式表的代码： ```css :root { --font-family: "Alegreya", serif; --line-height: 1.2; --border-thickness: 1.5px; --text-color: #000; --background-color: #fff; } ``` ## 使用 > 不成熟的诗人模仿；成熟的诗人偷窃。 ## 目的 此设计适用于主要由散文组成的网页文档：书籍、期刊、博客、手册等。你可以将此作为个人网站、特定项目或更大维基的基础。你很可能不希望它在动态 Web 应用程序中。复制或 Fork 你想要的内容，随意修改，但不要忘记适当的署名。源代码的头部包含许可证信息，因此只需保留它们即可。 ## 快速上手 要快速开始，请从 GitHub (https://github.com/owickstrom/the-proportional-web) 下载源代码，将目录放入你的项目中，命名为 `the-proportional-web`，并将以下内容添加到 HTML 的 `<head>` 元素中： ```html <link rel="stylesheet" href="the-proportional-web/index.min.css" /> ``` 如果你使用 Pandoc，请使用类似以下参数集调用它： ```bash pandoc \ --toc --toc-depth=2 \ -s \ --number-sections --number-offset=0 \ --css the-proportional-web/index.min.css \ -V 'header-includes=' \ --no-highlight \ -i input.md \ -o output.html ``` 如果你确实需要语法高亮，可以考虑使用自定义模板，例如用于此 HTML 输出的模板 (https://github.com/owickstrom/the-proportional-web/blob/main/src/demo/template.html)，并去掉 Pandoc 包含的默认 CSS。 ## 排版风格要素应用于网页 我所知的最密切相关作品是 Richard Rutter 的 The Elements of Typographic Style Applied to the Web (https://webtypography.net/)。这是一个基本模仿布林赫斯特书籍结构的网站，但将其建议改编为网页设计。它的范围大得多，似乎专注于信息本身，而本文档则是对 The Proportional Web 这个样式表及其思想的展示。此外，我发现在手机上阅读 Rutter 的网站比较困难，字体大小差异很大。据我所知，它至少可以追溯到 20 年前，并且大约已有 8 年没有更新了。我付出了很多努力使此设计具有响应性，同时在不同视口大小下保持一致。无论如何，我认为可以公平地说，它们服务于不同的目的，并且可以愉快地共存。 ## 实用排版 Matthew Butterick 的 Practical Typography (https://practicaltypography.com/) 是一本真正的力作，对于像我这类的门外汉或与排版相关的工程师所需的一切，都提供了足够的细节。多年来我多次回看它。 ## Tufte CSS Tufte CSS (https://edwardtufte.github.io/tufte-css/) 值得特别提及。据我所知，它产生了巨大的影响和认可。在排版细节上有些我不喜欢的地方，但总的来说，它是一件扎实的作品。 ## 后记 这就是了，《比例网页》。布林赫斯特书中的方法论非常丰富，我强烈推荐你阅读。我在这篇论述中只触及了表面，应用并改编了他想法中的一小部分。 本文档是使用 Pandoc (https://hackage.haskell.org/package/pandoc-cli)、html-minifier (https://github.com/kangax/html-minifier)、esbuild (https://esbuild.github.io/) 和 GNU Make (https://www.gnu.org/software/make/) 生成的。该设计在思想和实际布局上大量借鉴了罗伯特·布林赫斯特的《排版风格要素》。 非常感谢 U.S. Graphics (https://x.com/usgraphics) 和 Mikael Brockman (https://x.com/meekaale) 审阅我的草稿。