原稿と明示ルビ
本ツールは，テキスト入力エリアに記述されたプレーンテキストに対して，青空文庫形式のルビ記法を解析し，HTMLのルビタグ構造へと変換する機能を有しています．具体的には，テキスト内に「｜漢字《かんじ》」または半角縦線を用いた「|文字列《ルビ》」という書式が含まれている場合，入力された文字列を対象として正規表現によるパターンマッチングを実行します．
この際，縦線「｜」から二重山括弧の開始「《」までの文字列を親文字（ルビを振られる対象の文字列）として抽出し，二重山括弧内に記述された文字列をルビ（読み仮名）として抽出します．抽出された要素はそれぞれ，HTMLにおけるruby要素の内部構造にマッピングされます．
親文字はそのまま配置され，ルビ部分は文字サイズや透明度をCSSクラス（例：text-[0.45em]など）で調整したrt要素内に格納されます．また，入力されたテキストに対しては，変換処理の前にHTMLエスケープが適用されます．アンパサンド（&），小なり記号（<），大なり記号（>）といった特殊文字は無害化された文字実体参照へと置き換えられるため，入力テキスト内にHTMLタグが含まれていた場合でも，ブラウザ上でそのままテキストとして表示されます．
これにより，ユーザーが入力したテキストの構造を保持したまま，ブラウザのDOMツリー上にルビ要素を構築する設計となっています．
区切りあり・なしの違い
ルビ記法の解析処理において，本ツールは区切り文字（縦線）を明記する場合と省略する場合の2つの異なる正規表現パターンを適用しています．第1章で述べたような区切り文字がある場合は，指定された範囲の文字列がそのまま親文字として認識されます．一方，区切り文字を省略した「漢字《かんじ》」という形式で入力された場合，直前の文字をどこまで親文字として扱うかの判定が必要となります．
このツールでは，ルビの開始を示す「《」の直前にある文字列を後方に向かって走査し，「UnicodeのU+4E00からU+9FFFまでの漢字」および「々（U+3005）」が連続している部分のみを親文字として自動的に抽出します．ひらがな，カタカナ，アルファベット，数字，句読点などは親文字の対象として判定されません．
そのため，たとえば「走る《はしる》」は《の直前がひらがなのため，この省略記法ではルビに変換されません．語全体に読みを付ける場合は「｜走る《はしる》」と入力してください．この判定は読みの自動推定や辞書による形態素解析によるものではなく，あくまで文字コードの範囲に基づく固定的な仕様です．
もし「赤い車《あかいくるま》」のように，漢字以外の文字を含む文字列全体にルビを振りたい場合は，この省略記法では「車」にのみルビが適用されてしまうため，「｜赤い車《あかいくるま》」のように明示的に区切り文字を使用して対象範囲を指定する必要があります．
縦書きと横スクロール
変換されたテキストをブラウザ上で縦書きとして表示するためのスタイリングには，CSS Writing Modes Level 3の仕様であるwriting-mode: vertical-rlプロパティが採用されています．この設定により，テキストのフローが上から下，ブロックの進行方向が右から左へと変更され，伝統的な日本語の縦書き組版がウェブブラウザの標準レンダリングエンジンによって再現されます．
同時に，text-orientation: mixedプロパティを適用することで，全角の日本語文字は正立した状態で配置され，半角の英数字などは横に寝た状態で配置されるという，一般的な縦書きの挙動が確保されます．レイアウトのインターフェースとしては，コンテナの高さを300pxから800pxの範囲でスライダーを用いて固定できる仕様となっており，高さを超えてテキストが続く場合は，コンテナの左方向に向かって要素が延長されます．
親要素には横方向のスクロール（overflow-x-auto）が設定されているため，ユーザーは本を読むときと同じように，右から左へとスクロールバーを動かしながら文章を読み進めることができます．改行については，入力テキスト内の改行文字（\n）がwhitespace-pre-wrapプロパティによって解釈され，そのまま行の折り返しとして反映されるため，段落の区切りや意図的な空白行も保持された状態で縦書きレイアウト上に展開されます．
書体と紙面調整
ユーザーは表示される縦書きテキストの見た目を，各種設定スライダーおよびボタンを通じて調整できます．書体（Font）は「明朝体（serif）」と「ゴシック体（sans）」の2種類から選択可能です．明朝体を選択した場合，テキストコンテナにfont-serifクラスが付与され，OSやブラウザにインストールされている「Hiragino Mincho ProN」や「MS PMincho」などの明朝体フォントが優先的に適用されます．
文字サイズは12pxから32pxまで1px刻みで，行間は文字サイズの1.4倍から3.0倍まで0.1倍刻みで調整でき，これらの値はDOM要素のインラインスタイルとして即座に反映されます．また，背景のカラーデザインを切り替える「背景紙テーマ」機能では，「原稿用紙風（parchment）」「白（white）」「夜間（dark）」の3種類が用意されています．
これらはTailwind CSSのユーティリティクラスの切り替えによって実装されており，テキストの色（color），背景色（background-color），および枠線の色（border-color）がセットで変更されます．例えば原稿用紙風テーマでは，やや黄味がかった背景色（#fbf5ec）と暗褐色のテキスト（#2c1d11）が適用され，コントラストを抑えた視認性の高い表示となります．
これらの表示調整は，設定を変更するたびにテキストのDOMへと直接反映される仕組みです．
PNG書出しの確認
プレビュー領域に表示された縦書きのレイアウトは，画像生成ライブラリであるhtml-to-imageを利用してPNG形式の画像ファイルとして書き出すことができます．画像化のプロセスでは，現在プレビューが表示されているHTMLのDOMノード（テキストやルビ，背景色などのスタイル情報を含む要素）が取得されます．
その後，DOMの現在のスクロール幅（scrollWidth）と表示幅（clientWidth）のうち大きい方を基準とし，コンテナの高さ（clientHeight）と組み合わせて描画範囲の寸法が計算されます．フォントの読み込み完了（document.fonts.ready）を待機したのち，設定された背景色とともに要素全体がCanvas上に描画され，最終的にData URL形式のPNG画像へと変換されます．
この処理において，ルビの位置や文字の折り返し，書体設定などは，ブラウザが画面上に描画している状態のままベクターデータとして解釈されピクセルへと変換されます．生成された画像データは，ブラウザのダウンロード機能を通じてvertical_text_YYYY-MM-DD.png（日付は実行日）というファイル名でローカル環境に保存されます．
この変換および画像生成のプロセスは，ユーザーが利用しているブラウザのJavaScript実行環境の内部で実行されます．
保存・字体・校正の限界
本ツールの実装においては，いくつかの機能的な制約と仕様上の限界が存在します．まず，出力可能なファイル形式はPNG画像のみであり，PDFやSVGフォーマットでのベクター書き出しには対応していません．また，入力した原稿データや設定内容をブラウザのLocal Storage等へ保存する機能は実装されていないため，ページをリロードしたりタブを閉じたりすると，入力内容はクリアされます．
文字の描画については，ユーザーのオペレーティングシステムやブラウザにインストールされているローカルフォントに依存しているため，利用環境によって字形や字体の細部，行間，ルビの垂直方向の配置等に差異が生じる場合があります．組版機能に関しても，ブラウザの標準的なCSS描画ルールに従うものであり，禁則処理の厳密な自動調整，孤立行の排除，文字組みの自動校正といった専用のDTP処理は行われません．
さらに，画像出力機能においては，ブラウザのCanvas環境が許容する最大描画サイズやメモリの制限を受けます．極端に長い文章を一括で画像化しようとした場合，ブラウザの描画領域上限を超過し，画像の一部がクリッピングされたり，正常に出力されない可能性があります．その場合は，章ごとに適切な分量へ分割して処理を行う必要があります．