等寬字體網頁一次極簡設計探索 |
版本 | 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 └──▀───▀───▀───▀──
襪子 牛仔褲 襯衫 隨身碟
支援媒體物件，如圖片和影片：
它們會擴展到頁面寬度，並在底部添加適當的內邊距以保持等寬網格對齊。
目前就是這些了。我非常享受製作這個頁面的過程，鍛鍊了我的 CSS 技能，設計也很有趣。如果你喜歡它，甚至決定使用它，請告訴我。
完整原始碼在這裡：github.com/owickstrom/the-monospace-web
最後，向 U.S. Graphics Company 致以崇高的敬意，感謝所有的靈感。