等宽字体网页一次极简设计探索 |
版本 | v0.1.5 | |
|---|---|---|---|
| 更新 | |||
| 作者 | Oskar Wickström | 许可 | MIT |
等宽字体深受许多人喜爱。有人觉得它比比例字体更易读、更一致、更美观。也许我们只是在终端里待了太久被洗脑了？还是说我们只是无可救药地怀旧？我也不确定。但我就是喜欢它，所以我开始尝试全等宽字体的网页设计。
在这个页面上，我使用等宽网格来对齐文本和绘制图表。它从一个简单的 Markdown 文档（使用 Pandoc）生成，CSS 和少量 Javascript 将其渲染到网格上。页面是响应式的，以字符为单位逐步缩放。标准元素应该开箱即用，至少这是目标。这是语义化的 HTML，渲染起来就像回到了 70 年代。
好吧，但这真的是个好主意吗？这是一个技术和创意上的挑战，而且我喜欢这种美学风格。如果你想使用它，请随意 fork 或复制你需要的部分，尊重许可协议即可。我可能会持续更新，改进并支持更多标准元素。
这个文档在某些地方使用了一些额外的 class，但基本上就是普通的标记。比如，这就是一个普通的段落。
看看这条水平分割线：
很漂亮。我们可以把内容藏在 <details> 元素里：
隐藏的宝藏。
这是一个普通的无序列表：
有序列表看起来和你预期的差不多：
可视化树形结构也不错。这是一个带有 tree class
的普通无序列表：
/dev/nvme0n1p2
我们可以使用会自动适配等宽网格的普通表格。它们是响应式的。
| 名称 | 尺寸 | 坐标 |
|---|---|---|
| 波波里方尖碑 | 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 |
注意只允许一列自动增长。
这是一些按钮：
以及输入框：
还有单选按钮：
给容器添加 grid class
可以将水平空间均匀分配给单元格。注意它会保持等宽，所以总宽度可能不是
100%。以下是六个单元格数量递增的网格：
如果想让某个单元格填满剩余空间，给它设置 flex-grow: 1;
即可。
我们可以在 <pre> 标签中使用制表符绘图：
╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯<pre>
里的制表符默认占一格，和终端里一样，所以上面这个框可以直接从英文版复制过来。如果图里有汉字，想让制表符和汉字一样宽（占两格），就给
<pre> 加上
class="ascii-cjk"，下面两张图都是这样画的。
为了更突出，可以用 <figure> 标签包裹，再加上
<figcaption>。
┌────┐ ┌────┐ ┌────┐
│参与者１│ │参与者２│ │参与者３│
└──┬─┘ └──┬─┘ └──┬─┘
│ │ │
│ │ 消息１ │
│ │─────► │
│ │ │
│ 消息２ │ │
│─────► │ │
┌──┴─┐ ┌──┴─┐ ┌──┴─┐
│参与者１│ │参与者２│ │参与者３│
└────┘ └────┘ └────┘
再来画一个图表！
我拥有的东西
│ ██ 可用
15 │
│ ░░ 损坏
│
12 │ ░
│ ░
│ ░ ░
9 │ ░ ░
│ ░ ░
│ ░ ░ ░
6 │ █ ░ ░ ░
│ █ ░ ░ ░
│ █ ░ █ ░
3 │ █ █ █ ░
│ █ █ █ ░
│ █ █ █ ░
0 └──▀───▀───▀───▀──
袜子 牛仔裤 衬衫 U盘
支持媒体对象，如图片和视频：
它们会扩展到页面宽度，并在底部添加适当的内边距以保持等宽网格对齐。
目前就是这些了。我非常享受制作这个页面的过程，锻炼了我的 CSS 技能，设计也很有趣。如果你喜欢它，甚至决定使用它，请告诉我。
完整源代码在这里：github.com/owickstrom/the-monospace-web
最后，向 U.S. Graphics Company 致以崇高的敬意，感谢所有的灵感。