罫線とブロック要素の SVG 化

端末の TUI ツールでは、ウィンドウ枠やプログレスバーを表現するために多彩な Unicode 記号が使われます。 しかし、これらの記号を通常のフォントグリフ（文字）としてそのまま <text> 要素で出力すると、隣接するセルの境界に不自然な隙間や線幅の不揃いが発生することが珍しくありません。 等幅フォントであっても、レンダリング環境（ブラウザ、OS、アンチエイリアス設定）によってフォントの文字枠（バウンディングボックス）やベースラインの解釈が微妙に異なるためです。 console2svg ではこの描画崩れを防ぐため、罫線文字 と ブロック要素 を文字としてではなく、セルの格子寸法から直接計算した純粋なベクター図形（<path> や <rect>）へと変換して描画します。

罫線文字の線分幾何への分解と結合

枠線を描く 罫線文字（Box-drawing characters：─、│、┌、┐ など）は、各セルの中心点から上下左右のどの方向へ線が伸びているかという接続情報へと分解します。 線の太さ（細線・太線）や二重線、部分線分といったバリエーションも、それぞれ対応する線幅とオフセット情報へ変換します。

レンダラーは、セルに遭遇するたびに個別の SVG パスを出力することはありません。 まず画面全体から水平線分と垂直線分を収集し、同じ座標軸、同じ色、同じ線幅を持つ線分同士をソートします。 そして、端点が接触または重複している線分を 1 本の長い線分へと結合（マージ）します。

結合判定の許容誤差は、絶対値ではなくセル寸法に対する相対値として計算します。 フォントサイズを極端に小さく設定した場合でも、隣接する無関係な線分を誤って結合してしまう事故を防ぐためです。 結合後の線分は矩形パスとして扱い、同一色のパスを 1 つの <path d="..."> 属性へ集約することで、DOM 要素数の削減と描画の高速化を同時に実現します。

角丸罫線のベジェ曲線描画

枠線の角を丸くする角丸罫線文字（╭、╮、╯、╰）は、直交する直線とは区別して処理します。 直交線分の接続モデルへ無理に落とし込むのではなく、セルの格子座標に合わせた 2 次ベジェ曲線（Quadratic Bézier curve：3 つの制御点で滑らかな弧を描く数式表現）として独立した円弧パスを生成します。 これにより、ウィンドウの角が滑らかに丸みを帯びた美しい TUI 表示を正確に再現します。

ブロック要素の格子矩形化

セルの領域を塗りつぶす ブロック要素（Block elements：全角塗りつぶし █、上下の半ブロック ▀ ▄、左右の半ブロック ▌ ▐、4 分の 1 ブロックなど）は、セルの横幅と高さから正確な幾何矩形を計算します。

フォントグリフの余白（ベアリング）を完全に無視し、端末セルのグリッド境界に厳密にスナップさせた <rect> を生成するため、隣接するブロックを並べても一切の隙間が生じません。 同じ色で連続するブロック矩形は、出力前に可能な限り 1 つの大きな矩形へ結合します。

なお、網掛けを表すシェード文字（░、▒、▓）に関しては、幾何図形への変換を行わず、通常の文字テキストとして出力します。 これらはベタ塗りの領域ではなく、フォント固有のドットパターンの密度表現を利用する記号だからです。

テキスト連なりからの幾何要素の分離

文字列を出力する際、罫線やブロック要素などの幾何図形文字に到達した時点で、現在進行中のテキスト要素（<text>）を一旦終了させます。

SVG では、文字列全体の描画幅を指定して等幅フォントの配置を揃えるために textLength 属性を使用します。 もし幾何図形文字をテキスト要素の中に含めてしまうと、textLength による字間調整が働き、幾何図形が配置されるべきセルの座標が歪んでしまうためです。 幾何図形を描画した直後から、改めて次の文字セルを起点として新しいテキスト要素を開始することで、テキストと幾何図形が混在する複雑な画面でも 1 ピクセルのズレもない完全な配置を保証します。