テキスト進捗バーの生成
テキスト処理はすべてブラウザ内で完結します。データは送信されません
入力
ファイルをここにドロップすると読み込めます
出力
「パーセント ラベル」の各行を等幅文字の進捗バーに描き、README にそのまま貼れるコードブロックにまとめます。 ⚠️ 八分ブロック `▏▎▍▌▋▊▉█` は 1 文字に 8 段あり、1 段ではありません。幅が十数文字しかなくても 35% と 37% の違いを描けるので、ブロックのスタイルより正確です。⚠️ 幅は表示幅(漢字は 2 マス)で数えるため、中国語などのラベルの列が揃います。0% はすべて空、100% はすべて満ちた状態になり、端に欠けは残しません。計算はすべてブラウザー内で完結します。
機能
- 5 つのスタイル:ブロック・グラデーション・ドット・矢印・八分ブロック
- 八分ブロック `▏▎▍▌▋▊▉█` は 1 文字 8 段で、狭い幅でも精密
- 幅は表示幅で計算し、CJK のラベルも揃います
- 0% はすべて空、100% はすべて満、端に欠けを残しません
- パーセントはバーの中にも、バーの後ろにも表示できます
- パーセントは省略でき、省略すると行数で均等に割り当てます
- 最後に README へそのまま貼れるコードブロックを出力
- 計算はすべて端末内で完結し、データは送信されません
使い方
- 1 行に 1 項目「パーセント ラベル」を書きます(例:`35 インストール`)
- スタイルと幅を選びます
- パーセントをバーの中に置くか、後ろに置くかを選びます
- コードブロックをコピーして README やチケットに貼ります
よくある質問
- 八分ブロックの方が正確なのはなぜですか
- 1 文字に 8 段あるからです(▏ は 1/8、▌ は 4/8、█ は 8/8)。ブロックは「塗りつぶし」と「空」の 2 状態しかありません。幅 10 のとき 35% は八分ブロックなら 3 マスと半マス(3.5 マス)ですが、ブロックは 4 マスに丸めるしかありません。幅が狭いほど差が出ます。
- CJK のラベルはどう揃えますか
- 文字数ではなく表示幅で数えるからです。等幅フォントでは漢字が 2 マスを占めるため、文字数で詰めるとその列が短くなり全体がずれます。ツールは displayWidth で実際の幅を測って空白を足すので、複数の文字体系が混ざっても揃います。
- 0% と 100% はどう描かれますか
- 0% はすべて空(ドットなら○、ブロックなら薄いマス、八分ブロックなら空白)、100% はすべて満ちます。この 2 つの端は丸めで 1 マス残りやすいので、別に扱っています。
- 本当に README に貼れますか
- 貼れます。出力の末尾が ```text で囲まれたコードブロックで、等幅文字を含みます。GitHub・GitLab や多くの Markdown レンダラーはそのまま表示します。ただし行末の空白を削るレンダラーもあるため、揃うかどうかはバーの幅が一致していることに依存します。
関連ツール
ASCII アート文字
テキスト英数字と記号を 5×7 のドットで大きな文字に描きます。塗り文字は変更可能。コメントの区切りや README の見出し、ターミナルのバナーに向いています。
文字幅
テキスト4 つの長さを一度に表示します:表示幅(漢字は 2)、コードポイント数、UTF-16 符号単位数、UTF-8 バイト数。80・100 桁を超える行も一覧にします。
行番号の追加・削除
テキスト各行に連番を付けたり、行頭の番号をまとめて外したりできます。形式は 6 通り、開始値・増分・ゼロ埋めは自由、空行は番号を消費しません。
テキスト差分
テキスト2つのテキストを行ごとに比較し、追加・削除・未変更の行をハイライト表示します。変更は最小差分で整列し、すべてブラウザ内で処理します。
文字数カウント
テキスト英語は単語数、日本語や中国語は字数で別々に数えます。文字数・行数・バイト数・読了時間も同時に出し、すべてブラウザ内で処理するので送信しません。
テキスト整形
テキストログや表からコピーした1列を整形します。重複行の削除、並べ替え、空行・前後の空白・行番号の削除、空白のまとめを個別に切り替えできます。