パイプテーブル記法(Markdown / Djot)のソース上の列幅を、実際に使うフォントでの描画幅に基づいて自動で整形するための、単一HTMLファイルのブラウザツールです。
「MD」表記について このプロジェクト名の "MD" は "Markdown" の略ではなく、"Markdown/Djot" の略です。Markdown と Djot はテーブル記法(
| ... | ... |形式)を共有しているため、どちらの文書でも同じツールでソース上の列幅を整えられます。README・コード中の "Markdown" という表記は主に説明の簡潔さのためのものであり、Djot形式のテーブルにも同様に使えます。
日本語混じりのテキストを等幅フォントで表示するテーブルは、英数字と日本語の文字幅比率がフォントによって異なる(1:2, 2:3, 3:5 など)ため、スペースで列を揃えても別のフォントに変えると再びズレます。このツールは、
- フォント実測モード: ブラウザの Local Font Access API を使ってOSにインストールされている実際のフォント一覧を取得し、各フォントについて等幅かどうか・日英幅比を実測して分類・表示し、選んだフォントでの実際の描画幅をもとに列幅を再計算します。
- 手動比率モード: CJK（全角）と ASCII（半角）の幅比率を整数で指定し、フォント非依存の整数単位計算で列幅を揃えます。Chrome/Edge 以外のブラウザやモバイル端末でも利用できます。
- ローカルフォントの取得:
queryLocalFonts()によるフォント列挙(名前・スタイル・生SFNTデータへのアクセス) - 等幅判定: フォント内部のフラグ(
postテーブルのisFixedPitch等)には頼らず、Canvas上での実測(i,l,W,M,0,.,x,Aの描画幅比較)で等幅/プロポーショナルを判定 - CJK対応判定: OS/2テーブルの
ulUnicodeRange・ulCodePageRangeとcmapテーブルのグループ範囲を組み合わせ、BMP漢字・CJK拡張(B〜G)の有無を判定 - 日英幅比の自動計算: CJK対応の等幅フォントについて
Mとあの実測幅から比率を算出し、分母20以下の分数(例:3:5)に近似してラベル表示 - フォント選択プルダウンの自動分類:
<optgroup>で「等幅（CJK対応）」「等幅（CJK拡張専用）」「等幅（ASCII のみ）」「プロポーショナル」に分類 - TTC対応: TrueType Collection形式のフォント(MS Gothic, SimSun等)にも対応
- 選択フォントでのライブプレビュー
- CJK / ASCII 比率の直接指定: デフォルト 2:1（CJK=2, ASCII=1）。
type="number"による整数入力 - 簡易文字幅判定: ひらがな・カタカナ・CJK統合漢字・全角記号・ハングルを全角、それ以外を半角として整数単位で計算
- 全ブラウザ対応: Local Font Access API 不要
- プレビュー: ブラウザ標準の
monospaceフォントで表示（2:1 以外の比率では見た目が完全一致しない場合あり。コピー結果の構造的正しさは保証）
- 列幅の自動整形: テーブル行を解析し、列ごとの最大幅に合わせてセルにパディングを追加。左寄せ・中央・右寄せの指定(
:---,:---:,---:)や区切り行のダッシュ数も再生成 - 表示サイズ調整: スライダー + 数値入力（プレビューの font-size に反映）
- 整形結果のクリップボードコピー
| 機能 | 対応環境 |
|---|---|
| フォント実測モード | デスクトップ版 Chrome または Edge（Local Font Access API 必須） |
| 手動比率モード | すべてのモダンブラウザ（Firefox・Safari・モバイル含む） |
Local Font Access API 非対応の環境では、フォント実測タブでボタンがグレーアウトされます。手動比率モードに切り替えてご利用ください。
local-fonts 機能はブラウザの Permissions Policy により、デフォルトで self(自分自身のオリジン)にのみ許可されています。そのため、別オリジンの <iframe> に埋め込まれた状態(コードプレビュー系のサービスなど)では動作せず、SecurityError になります。この場合、ブラウザの許可プロンプト自体も表示されません(ポリシー違反はプロンプト表示より前の段階でブロックされるため)。
正しく動かすには、以下のいずれかの方法で トップレベルのページとして 開いてください。
- ローカルファイルを直接開く(最も簡単)
index.htmlをダブルクリックするか、ブラウザにドラッグ&ドロップしてfile:///.../index.htmlとして開く - ローカルサーバー経由で開く
その後ブラウザで
python -m http.server 8000
http://localhost:8000/index.htmlを開く - GitHub Pages などで自分のオリジンとしてホストする HTTPS配信かつトップレベルページであれば、埋め込みでない限り問題なく動作します
「ローカルフォントを読み込む」ボタンを押すと、初回のみブラウザから local-fonts へのアクセス許可を求めるプロンプトが表示されます。許可するとフォント一覧の取得・分類が行われます。拒否した場合や環境非対応の場合は、その旨がステータス欄に表示されます。
index.htmlをChrome/Edgeで(iframeに埋め込まずトップレベルで)開く- 「モード選択」で「フォント実測」を選択し、「ローカルフォントを読み込む」を押し、許可プロンプトが出たら許可する
- プルダウンから使いたいフォントを選ぶ(等幅フォントには
[日英 x:y]の比率が表示されます) - 表示サイズを必要に応じて調整する
- 入力欄にMarkdown/Djotのテーブルを貼り付け、または直接編集する
- 「列幅を揃える」を押すと、選択フォントでの実測幅に基づいて列が整形される
- プレビュー欄で見た目を確認し、「整形結果をコピー」で結果をクリップボードにコピーする
index.htmlを開く（非対応環境では自動的に手動比率モードが選択されます）- 「モード選択」で「手動比率」を選択する
- CJK / ASCII の比率を必要に応じて変更する（デフォルト 2:1）
- 入力欄にテーブルを貼り付け、「列幅を揃える」を押す
- 「整形結果をコピー」で結果を取得する
- 等幅判定・日英幅比の計算は簡易な実測ベースであり、フォントのヒンティングやレンダリング環境によって多少の誤差が生じる場合があります
- 列幅整形はスペース幅の丸め計算(最も近い整数個のスペース)によるため、フォントによっては1px前後のズレが残ることがあります
- 手動比率モードの文字幅判定は簡易正規表現ベースであり、UAX #11 の厳密な East Asian Width には準拠しません
- 手動比率モードのプレビューは
monospace固定のため、指定比率が 2:1 でない場合は見た目の列揃えが完全一致しないことがあります - テーブル行の判定は「
|を含む空でない行」という単純な条件に基づいており、テーブル外で偶然|を含む行(インラインコード内など)を誤ってテーブル行として扱う可能性があります - セル内でエスケープされたパイプ(
\|)や複数行セルなどの拡張記法には対応していません
このプロジェクトは Mozilla Public License 2.0 の下で公開されています。