MD Table Aligner

パイプテーブル記法(Markdown / Djot)のソース上の列幅を、実際に使うフォントでの描画幅に基づいて自動で整形するための、単一HTMLファイルのブラウザツールです。

「MD」表記について このプロジェクト名の "MD" は "Markdown" の略ではなく、"Markdown/Djot" の略です。Markdown と Djot はテーブル記法(| ... | ... | 形式)を共有しているため、どちらの文書でも同じツールでソース上の列幅を整えられます。README・コード中の "Markdown" という表記は主に説明の簡潔さのためのものであり、Djot形式のテーブルにも同様に使えます。

これは何をするツールか

日本語混じりのテキストを等幅フォントで表示するテーブルは、英数字と日本語の文字幅比率がフォントによって異なる(1:2, 2:3, 3:5 など)ため、スペースで列を揃えても別のフォントに変えると再びズレます。このツールは、

1. ブラウザの Local Font Access API を使ってOSにインストールされている実際のフォント一覧を取得し、
2. 各フォントについて等幅かどうか・日英幅比を実測して分類・表示し、
3. 選んだフォントでの実際の描画幅をもとに、テーブルの列区切りが揃うようソース上のスペース数を再計算します。

主な機能

• ローカルフォントの取得: queryLocalFonts() によるフォント列挙(名前・スタイル・生SFNTデータへのアクセス)
• 等幅判定: フォント内部のフラグ(postテーブルのisFixedPitch等)には頼らず、Canvas上での実測(i, l, W, M, 0, ., x, A の描画幅比較)で等幅/プロポーショナルを判定
• 日英幅比の自動計算: 等幅と判定されたフォントについて M と あ の実測幅から比率を算出し、分母20以下の分数(例: 3:5)に近似してラベル表示
• フォント選択プルダウンの自動分類: <optgroup> で「等幅」「プロポーショナル」に分離、等幅を上位表示
• 列幅の自動整形: テーブル行を解析し、列ごとの最大描画幅に合わせてセルにパディングを追加。左寄せ・中央・右寄せの指定(:---, :---:, ---:)や区切り行のダッシュ数も再生成
• 選択フォントでのライブプレビュー
• 整形結果のクリップボードコピー

実行環境・注意事項

対応ブラウザ

Local Font Access API はデスクトップ版 Chrome または Edge でのみ動作します。Firefox・Safari・モバイル版ブラウザには未実装のため、これらの環境ではフォント取得部分が動作しません(それ以外の手動フォント指定などは影響を受けません)。

重要: 必ずトップレベルの文書として開くこと

local-fonts 機能はブラウザの Permissions Policy により、デフォルトで self(自分自身のオリジン)にのみ許可されています。そのため、別オリジンの <iframe> に埋め込まれた状態(コードプレビュー系のサービスなど)では動作せず、SecurityError になります。この場合、ブラウザの許可プロンプト自体も表示されません(ポリシー違反はプロンプト表示より前の段階でブロックされるため)。

正しく動かすには、以下のいずれかの方法で トップレベルのページとして 開いてください。

1. ローカルファイルを直接開く(最も簡単) index.html をダブルクリックするか、ブラウザにドラッグ&ドロップして file:///.../index.html として開く
2. ローカルサーバー経由で開く

   python -m http.server 8000

   その後ブラウザで http://localhost:8000/index.html を開く
3. GitHub Pages などで自分のオリジンとしてホストする HTTPS配信かつトップレベルページであれば、埋め込みでない限り問題なく動作します

初回アクセス時の許可プロンプト

「ローカルフォントを読み込む」ボタンを押すと、初回のみブラウザから local-fonts へのアクセス許可を求めるプロンプトが表示されます。許可するとフォント一覧の取得・分類が行われます。拒否した場合や環境非対応の場合は、その旨がステータス欄に表示されます。

使い方

1. index.html をChrome/Edgeで(iframeに埋め込まずトップレベルで)開く
2. 「ローカルフォントを読み込む」を押し、許可プロンプトが出たら許可する
3. プルダウンから使いたいフォントを選ぶ(等幅フォントには [日英 x:y] の比率が表示されます)
4. 表示サイズを必要に応じて調整する
5. 入力欄にMarkdown/Djotのテーブルを貼り付け、または直接編集する
6. 「列幅を揃える」を押すと、選択フォントでの実測幅に基づいて列が整形される
7. プレビュー欄で見た目を確認し、「整形結果をコピー」で結果をクリップボードにコピーする

既知の制限事項

• 等幅判定・日英幅比の計算は簡易な実測ベースであり、フォントのヒンティングやレンダリング環境によって多少の誤差が生じる場合があります
• 列幅整形はスペース幅の丸め計算(最も近い整数個のスペース)によるため、フォントによっては1px前後のズレが残ることがあります
• テーブル行の判定は「| を含む空でない行」という単純な条件に基づいており、テーブル外で偶然 | を含む行(インラインコード内など)を誤ってテーブル行として扱う可能性があります
• セル内でエスケープされたパイプ(\|)や複数行セルなどの拡張記法には対応していません

ライセンス

このプロジェクトは Mozilla Public License 2.0 の下で公開されています。