入力内容は外部に送信されません。 すべてブラウザ内で処理し、透過を保ったままPNGで書き出します。
改行すると、左に新しい行が追加されます（右から左へ）。
縦方向の間隔です。
横方向の、行と行の間隔です。
「、」「。」を右にどれだけ寄せるか。文字サイズに対する比率です。
「ゃ」「ゅ」「っ」などの位置です。
縦書きの日本語を、背景を透過したままPNGで書き出すためのツールです。 画像に文字を重ねる場面や、縦組みの見出しを画像として使う場面を想定しています。
Canvasには縦書きの機能がないため、1文字ずつ位置を計算して並べています。 上の処理を入れないと、記号の向きが横組みのままになり、縦組みとして成立しません。
句読点や小書き文字の最適な位置は、書体によって変わります。 明朝とゴシックでも、文字の懐が違うためズレます。 固定値にせず、スライダーで調整できるようにしています。 値は文字サイズに対する比率で保持しているため、サイズを変えても位置関係が崩れません。
Canvasは初期状態で透明です。背景を塗らずに文字だけを描き、
toBlob("image/png") で書き出すと、透過が保持されます。
JPEGやWebPの一部設定では透過を扱えないため、PNGで出力しています。
Webフォントを使用する場合、読み込みが完了してから描画する必要があります。
document.fonts.ready の完了を待ってから描いています。
「端末の書体」を選んだ場合は、閲覧環境にその書体がないと別の書体で表示されます。