等幅フォントのウェブ

はじめに

等幅フォントは多くの人に愛されています。プロポーショナルフォントよりも読みやすく、一貫性があり、美しいと感じる人もいます。ターミナルで何年も過ごして洗脳されただけかもしれません。それとも、どうしようもなくノスタルジックなのでしょうか。よくわかりません。でも好きなんです。だから等幅フォントだけのウェブを試してみることにしました。

このページでは、等幅グリッドを使ってテキストの整列や図の描画を行っています。シンプルな Markdown ドキュメント（Pandoc を使用）から生成され、CSS と少しの Javascript でグリッド上にレンダリングされます。ページはレスポンシブで、文字サイズ単位で段階的に縮小します。標準要素はそのまま動くはずです。少なくともそれが目標です。セマンティックな HTML を、まるで 70 年代に戻ったかのようにレンダリングしています。

さて、これは本当に良いアイデアなのでしょうか？技術的・創造的な挑戦であり、この美学が好きです。使いたい方は、ライセンスを尊重した上で、自由にフォークやコピーしてください。改善や標準要素のサポート追加で更新するかもしれません。

基本

このドキュメントはところどころ追加のクラスを使っていますが、基本的にはただのマークアップです。例えば、これは普通の段落です。

この水平線を見てください：

素敵ですね。<details> 要素にコンテンツを隠すことができます：

リスト

これは普通の箇条書きリストです：

• バナナ
• 紙の船
• きゅうり
• ロケット

番号付きリストも期待通りの見た目です：

1. 目標
2. 動機
   1. 内発的
   2. 外発的
3. 二次的効果

ツリーの視覚化も便利です。これは tree クラスを付けた普通の非順序リストです：

• /dev/nvme0n1p2

  • usr
    • local
      
    • share
      
    • libexec
      
    • include
      
    • sbin
      
    • src
      
    • lib64
      
    • lib
      
    • bin
      
    • games
      • solitaire
      • snake
      • tic-tac-toe
    • media
      
  • media
    
  • run
    
  • tmp

テーブル

等幅グリッドに自動調整される通常のテーブルが使えます。レスポンシブです。

拡張できるカラムは一つだけです。

フォーム

ボタンはこちら：

入力欄：

ラジオボタン：

グリッド

コンテナに grid クラスを追加すると、水平方向のスペースをセルに均等に分割します。等幅を維持するため、合計幅が 100% にならない場合があります。以下はセル数が増えていく 6 つのグリッドです：

特定のセルを残りのスペースで埋めたい場合は、そのセルに flex-grow: 1; を設定します。

ASCII 描画

<pre> タグで罫線素片を使って描画できます：

╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯

<pre> の罫線素片は、ターミナルと同じく既定で1マス幅です。そのため上の枠は英語版からそのままコピーできます。図に漢字や仮名が入り、罫線を文字と同じ全角（2マス幅）で揃えたいときは、<pre> に class="ascii-cjk" を付けます。下の2つの図はこの方法で描いています。

より目立たせるために <figure> タグで囲み、<figcaption> を追加することもできます。

┌────┐  ┌────┐  ┌────┐
│参加者１│  │参加者２│  │参加者３│
└──┬─┘  └──┬─┘  └──┬─┘
      │            │            │
      │            │  通知１    │
      │            │─────► │
      │            │            │
      │  通知２    │            │
      │─────► │            │
┌──┴─┐  ┌──┴─┐  ┌──┴─┐
│参加者１│  │参加者２│  │参加者３│
└────┘  └────┘  └────┘

チャートも描いてみましょう！

              持っているもの

    │                              ██ 使える
15  │
    │                              ░░ 壊れた
    │
12  │            ░
    │            ░
    │    ░      ░
 9  │    ░      ░
    │    ░      ░
    │    ░      ░              ░
 6  │    █      ░      ░      ░
    │    █      ░      ░      ░
    │    █      ░      █      ░
 3  │    █      █      █      ░
    │    █      █      █      ░
    │    █      █      █      ░
 0  └──▀───▀───▀───▀──
         靴下   ズボン  シャツ  USB

メディア

画像や動画などのメディアオブジェクトに対応しています：

ページ幅まで拡張され、等幅グリッドを維持するために下部に適切なパディングが追加されます。

おわりに

今のところは以上です。 CSS のスキルを磨き、デザインを楽しみながら、この制作をとても楽しみました。気に入った方、使ってみようと思った方は、ぜひお知らせください。

ソースコード全体はこちら：github.com/owickstrom/the-monospace-web

最後に、すべてのインスピレーションをくれた U.S. Graphics Company に大きな感謝を。