The Proportional Web
The Proportional Web
Foreword Two summers ago, just before I started working at TigerBeetle, I picked up a new side project during downtime. I’ve always had a soft spot for CSS but I don’t know why; frankly, it’s weird, confusing, and infamously error-prone. It could be nostalgia from my early days of programming web applications. Whatever the cause, The Monospace Web was born out of that love, and it took off way harder than I ever thought it would, with many personal blogs and even application interfaces having adopted it.
前言 两年前的夏天，就在我加入 TigerBeetle 之前，我在闲暇时间开启了一个新的副业项目。我一直对 CSS 情有独钟，但连我自己都说不清原因；坦白讲，它既古怪又令人困惑，而且以容易出错而闻名。这可能源于我对早期编写 Web 应用时光的怀旧。无论原因如何，The Monospace Web 正是诞生于这份热爱，它的流行程度远超我的预期，许多个人博客甚至应用界面都采用了它。
So, here I am again, spending weekend spare hours in a form of meditative state writing CSS. This time, inspiration struck after reading Robert Bringhurst’s classic The Elements of Typographic Style. A challenge indeed, trying to implement the layout and typography of the book itself in the browser. Reckless, some might say! Surely the same rules don’t apply across print and web, where the latter cannot lean on a fixed page size, but has all the capabilities of a programmable platform. Perhaps, perhaps not. I’ve decided to publish regardless, and bid you to take from it what you will; if you find it pleasant or useful, that’s a wonder, and if not, that’s fine.
于是，我又一次在周末的闲暇时光里，进入了一种冥想般的状态来编写 CSS。这一次，灵感来自于阅读 Robert Bringhurst 的经典著作《排版风格要素》（The Elements of Typographic Style）。尝试在浏览器中实现该书本身的布局和排版，确实是一项挑战。有人可能会说这太鲁莽了！印刷品和网页的规则肯定不尽相同，后者无法依赖固定的页面尺寸，却拥有可编程平台的所有能力。也许是这样，也许不是。我决定无论如何都要发布它，并希望你能从中各取所需；如果你觉得它赏心悦目或有所裨益，那再好不过；如果不是，那也无妨。
Consider this the spiritual and variable-width sequel of The Monospace Web, and equally open for reuse. I’m a sucker for Pandoc, and that’s what I’ve used to produce this HTML, but the stylesheet should work in many other settings with minor tweaks.
请将此视为 The Monospace Web 的精神续作，它采用了可变宽度，同样开放供大家复用。我是 Pandoc 的忠实拥趸，我正是用它来生成这份 HTML 的，但通过微调，该样式表也适用于许多其他环境。
1 Foundations
Typography is the craft of endowing human language with a durable visual form.
1 基础
排版是一门赋予人类语言以持久视觉形式的技艺。
1.1 Typography
1.1.1 A single versatile font as the basis of the design In this document and its design, I’m using two variants of the Alegreya font. The regular variant is used for body text and third-level headings. Its small-caps variant, Alegreya SC, is used for titling-caps top-level headings, small-caps second-level headings, and for inline abbreviations such as HTML. Finally, Courier Prime is used for monospace code snippets.
1.1 排版
1.1.1 以单一通用字体作为设计基础 在本文档及其设计中，我使用了 Alegreya 字体的两个变体。常规变体用于正文和三级标题。其小型大写字母变体 Alegreya SC 用于标题式的一级标题、小型大写字母的二级标题，以及 HTML 等行内缩写。最后，Courier Prime 用于等宽代码片段。
Bringhurst argues in his book for choosing a single versatile typeface rather than a hodgepodge of different ones. I think Alegreya is such a choice, and an excellent one at that.
Bringhurst 在书中主张选择一种通用的字体，而不是混用各种不同的字体。我认为 Alegreya 就是这样的选择，而且是一个极佳的选择。
1.1.2 A sizing system built on relative measurements Every size is based on the root font size, which is 16px. Sizes are thus given in rem units, relative to the root font size.
1.1.2 基于相对度量的尺寸系统 每个尺寸都基于根字体大小，即 16px。因此，尺寸以 rem 为单位给出，相对于根字体大小。
Sizing everything based on the root font size makes it easy to scale the design, for instance on smaller viewports:
@media screen and (max-width: 480px) { :root { font-size: 14px; } }
基于根字体大小来设定一切尺寸，使得缩放设计变得容易，例如在较小的视口上：
@media screen and (max-width: 480px) { :root { font-size: 14px; } }
The line height is 1.2rem, and is used as the basis for vertical alignment of all elements. Much like in The Monospace Web — but not to the same extremes — I’ve tried to get everything globally aligned to multiples of the line height.
行高为 1.2rem，并作为所有元素垂直对齐的基础。就像在 The Monospace Web 中一样——尽管没有达到那么极端的程度——我尝试让所有内容在全局上与行高的倍数对齐。
1.1.3 Justified text in modern browsers
As in Bringhurst’s book, body text is justified, not ragged right. To some, this is grave heresy on the web. Thou shalt not justify. That’s what we’ve all been taught. But browsers have improved over time and today it’s not unthinkable to justify text. This stylesheet uses word-break, text-wrap, and hyphens to control how words are broken and hyphenated at line breaks.
1.1.3 现代浏览器中的两端对齐文本
正如 Bringhurst 的书中所述，正文采用两端对齐，而不是右对齐（参差不齐）。对某些人来说，这在网页上是严重的异端邪说。“你不应该使用两端对齐。”这是我们都被教导的。但随着时间的推移，浏览器已经改进，今天使用两端对齐并非不可想象。此样式表使用 word-break、text-wrap 和 hyphens 来控制单词在换行处的断开和连字符处理。
1.1.4 Indented paragraphs for legibility In keeping with tradition, each successive paragraph is indented 3ch, which is the width of three 0 (0x30) characters. As an example, the paragraph following this one leads with an indent. This lets your eyes more easily scan the structure of the text and find the starts and ends of paragraphs.
1.1.4 为易读性而缩进的段落 遵循传统，每个后续段落缩进 3ch，即三个 0 (0x30) 字符的宽度。例如，紧随其后的段落开头就有缩进。这让你的眼睛更容易扫描文本结构，并找到段落的开头和结尾。
1.2 Colors
You may have noticed that this design is devoid of color. It’s all black on white. I find it aesthetically pleasing and easier on the eyes, and it reserves the arsenal of color, and thus the attention of the reader, for the most critical things, such as diagrams conveying complex data.
1.2 颜色
你可能已经注意到，这个设计没有任何颜色。全是白底黑字。我发现这在美学上令人愉悦，且对眼睛更友好，它将色彩的运用——从而将读者的注意力——保留给了最关键的事物，例如传达复杂数据的图表。
2 Elements
This document uses a few extra classes here and there, but mostly it’s just semantic HTML5 markup.
2 元素
本文档在某些地方使用了一些额外的类，但大部分只是语义化的 HTML5 标记。
2.1 Headings
The design provides styles for three level of headings: top-level chapter headings (h1), section headings (h2), and sub-section headings (h3).
2.1 标题
该设计为三个级别的标题提供了样式：顶级章节标题 (h1)、节标题 (h2) 和子节标题 (h3)。
2.2 Emphasis
There’s no surprise here; text in <em> tags is italicized, just as you’d expect.
2.2 强调
这里没有什么惊喜；<em> 标签中的文本是斜体的，正如你所预期的那样。
2.3 Horizontal line breaks
There’s no clear guidance on horizontal line breaks in Bringhurst’s book, but it seems to me like a good place for ornamentation.
2.3 水平换行符
Bringhurst 的书中没有关于水平换行符的明确指导，但在我看来，这是一个进行装饰的好地方。