モノスペースWeb
(owickstrom.github.io)- 文字単位のグリッド上にWeb要素をぴったり配置し、テキスト・表・ダイアグラム・メディアを1970年代風の端末美学に近い形で見せる実験的なページ
- シンプルなMarkdown文書をPandocで変換し、CSSとごく少量のJavaScriptでセマンティックHTMLをモノスペースグリッド上にレンダリングする
- レスポンシブ対応はピクセルではなく文字サイズ単位で縮小する方式で、表はグリッドに合わせて自動調整されるが、伸縮できる列は1つに制限される
- 通常の段落、区切り線、
<details>、リスト、ツリー型リスト、表、フォーム、gridコンテナ、<pre>ベースのASCIIアート、画像や動画といった標準要素を扱う - ソースコード全体はGitHubで公開されており、必要な部分をライセンス条件に従ってフォークまたはコピーして活用できる
文字グリッドで構成したWebページ
- モノスペースフォントは、一部のユーザーにとってプロポーショナルフォントより読みやすく、一貫していて美しく感じられることがある
- このページは、すべての要素をモノスペースWebとして構成してみる技術的・創造的な実験
- 実装はMarkdown文書をPandocで変換したうえで、CSSと少量のJavaScriptにより、セマンティックHTMLを文字グリッド上に配置する方式
- レスポンシブレイアウトは画面幅に合わせて、ピクセルではなく文字サイズ単位で縮小する
- 目的は、標準HTML要素が追加の複雑な作業なしに、モノスペースグリッド内で自然に動作するようにすること
対応する要素と配置方式
- 基本マークアップには、通常の段落、水平区切り線、
<details>要素が含まれる - リストは通常の箇条書きリストと番号付きリストに対応し、
treeクラスを付けた順不同リストで、ファイルシステムのように見えるツリー構造を表現できる - 表はモノスペースグリッドに合わせて自動調整され、レスポンシブに動作する
- ただし、伸縮できる列は1つのカラムに制限される
- フォームも対応対象に含まれ、他の標準要素と同じ文字グリッド上に配置される
- コンテナに
gridクラスを追加すると、セルが横方向のスペースを均等に分割する- モノスペースの特性を維持するため、全体の幅が常に100%になるとは限らない
- 特定のセルに残りのスペースを埋めさせるには、そのセルに
flex-grow: 1;を設定する
<pre>タグと罫線素片を使ってASCII風の図を描ける<figure>と<figcaption>で囲むことで、より目立たせることができる- 例として、メッセージ伝達ダイアグラムと棒グラフが含まれる
- 画像や動画といったメディアオブジェクトにも対応する
- ページ幅いっぱいまで拡張され、モノスペースグリッドを維持するために下側のパディングが追加される
- ソースコード全体はgithub.com/owickstrom/the-monospace-webで公開されている
- デザインの着想元はU.S. Graphics Company
1件のコメント
Hacker Newsのコメント
等幅ページの一覧を集めている: https://wonger.dev/posts/monospace-dump#web。今は50個くらいある
スペーシングの扱いが難しく、プロポーショナルフォントを諦めると可読性もある程度失われる
プロポーショナルフォントのカーニングは、目が文字のまとまりの形を認識するうえで大きな違いを生むと思う
等幅テキストはコードエディタのように構造化されてハイライトされた場所では問題ないが、長文では避けたい
それでも特にユニコード表やASCIIアートでは本当に美しい
たとえば
15 space, 1 V, 3 U, 1 V,15 space, 5 U,12 space, 2 x, 5 U, 2 xのような感じで、250行ほど終えるとJordanがダンクする絵が現れて印刷できたこの質問をするにはぴったりのスレッドっぽい。数年前に見た、たぶんビデオゲームの攻略みたいな文章だったのだが、等幅フォント で読まれることを前提に書かれていて、何千行もの全体が単語選びだけで完璧に両端揃えされていた
何かわかってリンクを持っている人いる？
[0] http://www.catb.org/esr/jargon/html/B/bricktext.html
Googleの検索結果からこの概念が完全に消えてしまったのは少し驚きだ
https://github.com/laravel/laravel/blob/11.x/config/database...
ここ数年、Visual Studio Code拡張として、入力中にコメントをハイフネーションまで含めて両端揃えし、必要なら追加の空白も許容する機能を作りたいと思っていた
関連するアルゴリズムやライブラリを少し調べた以外は手を付けられていない。かなり複雑に見えたからだ
fmtやparのようなものを使おうとしたが、結局のところ手作業でやらない限り見栄えよく揃ったコメントは諦めるしかないと受け入れた。小さな変更ひとつで何行もやり直しになることが多く、時間がかかりすぎる長い識別子はできれば行の途中で切りたくないし、入れ子のリスト、表、コードブロック、コメント内のASCIIアート、単語内ハイフンとハイフネーションで入ったハイフンの区別、XMLドキュメントコメントやJavadocタグのような構造化コメントにも対応しなければならない
Tom7のBadness 0を見てLLMを投げてみようかとも思ったが、リアルタイムで動作し、幻覚コメントがあってはならないなら、まだ実用的ではないと思う
こういう機能はすでにあるのだろうか。それとも、拡張を作るのが1年がかりの仕事にならないようにしてくれる土台はあるだろうか？
等幅そのもの は気にならない
気になるのは 強制改行 だ
「レトロ」なウェブサイトだと言いながら、実際には
preタグを使っている場合がある携帯では小さな文字のテキストの壁になり、リーダーモードも効かず、横向きにするとスクロールバーが出ることもあれば出ないこともある
最近の技術系メーリングリストについてほぼ唯一の不満も、強制改行と硬直したレイアウトだ
今日見た動画では、こういうものを インディーウェブ と呼んでいた。アルゴリズムに反対し、昔のウェブを素晴らしくしていたものを受け入れようという思想だと言っていた
RSS、個人ブログ、フォーラム、ウェブリングのようなものだ
私も自分でひとつ始めたが、かなり気分がいい
見た目がよく、セマンティックでレスポンシブなのはよいが、根本的に 等幅フォント は本文テキストにはあまり向いていない。
いくつかのサイトで本文が等幅のブログ記事を読んでみて悪くはなかったが、私の基準ではプロポーショナルフォントのほうが正しい方向だ。
昔の印刷雑誌っぽさを出そうとする「美しい」ページより、こちらのほうがずっとよいと思う。
自分のブログでは視力があまりよくなく拡大設定を使うので等幅を使っているが、アクセシビリティは重要だと思っているので、みんなにとってより読みやすい選択が何なのかいつも気になっている。
他はともかく、
tree ul-listCSS クラスは HTML 仕様でタグとして入っていてもよいくらいだと思う。ものすごく 有用な構成要素 だ。行間が狭すぎて 可読性に悪影響を与えている。こういう詰まった本文の長い段落は読みにくい。
ただし表や文字グラフィックにはこうした狭い行間が必要だ。
同じ文字グリッドをグラフィックとテキストの両方に使っているのが問題だ。
x-height が特に低いので、文字の上下にもう少し余白を残すフォントを使えば緩和できそうだ。
行の高さ には同意する。16px のフォントサイズに 19.2px だと 1.2 倍しかなく、かなり窮屈だ。24px にするとかなりよくなる。
ただ、私の目には、より大きい行の高さが表や文字グラフィックに影響するようには見えない。こうした調整を入れれば等幅スタイルはかなりうまく成立する。
修正: 言いたいことは分かった気がする。著者の固定グリッドという考え方を壊してしまうのだ。
p要素にline-height: 24pxを入れて著者の「debug mode」を有効にしてグリッドを見ると確認できる。javascript: (function() {(function() {const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, td, th');textElements.forEach((element) => {const textColor = getComputedStyle(element).getPropertyValue('color');element.style.fontFamily = 'system-ui, -apple-system, sans-serif';element.style.WebkitTextStroke = \0.4px ${textColor}`;https://caiorss.github.io/bookmarklet-maker/
等幅の単語はプロポーショナルの単語より「形」が似通ってしまうからだ。
OpenBSD は数年前からコンソールフォントを Spleen に設定し始めた。
TrueType 版がないのは残念だ。
https://github.com/fcambus/spleen
今でも有名な C64 資料である、いわゆる VIC article は等幅で提供されている。
https://www.cebix.net/VIC-Article.txt
主な問題は出力だ。
この記事は 2 次元空間で固定された参照が必要な図を使っているので、ここでは等幅が非常に重要だ。
この記事は C64 に関する最重要の技術資料の 1 つであり、技術デモ効果の 99% はここにある基本トリックへ分解できる。
個人サイトのフォントを等幅に変えてみようかと考えている。
長文の可読性 が特に高い等幅フォントを知っている人はいる？
Google Fonts にあればなおよい。
Google Fonts にはないが無料だし、可変フォント版もとても安い。