npm パッケージ

tate-chu-yoko

日本語の縦組み本文で、半角英数字を自動的に「縦中横」として組版する軽量ライブラリ。書き手はプレーンテキストのままで、組版はライブラリに任せましょう。

解決したいこと

新聞や書籍の縦組みでは、半角英数字を横並びのまま正立させる「縦中横」が当たり前に使われてきました。CSS には text-combine-upright: all があるものの、どの文字をまとめるかは開発者が明示しなければなりません。結果として、書き手が原稿の中で <span class="tcy"> を毎回書く羽目になりがちです。tate-chu-yoko はこの組版処理を自動化し、書き手を組版の都合から解放します。

5つの配布物

中心にあるのは framework-agnostic なトークナイザー @love-rox/tcy-core。スタックに合わせて好みのアダプタを1つ（または複数）選んでください。core は依存として自動的に引き込まれます。

共通の CSS

どのアダプタを使っても、生成される <span class="tcy"> には同じ CSS を当ててください。Safari の歴史的経緯から -webkit-text-combine を併記しておくと安心です。

.tcy {
  -webkit-text-combine: horizontal;
  text-combine-upright: all;
}

全体に共通する性質

• <em>12</em>34 のように要素境界をまたぐ文字列は連結されず、別々のスパンになります。
• 全角英数字（Ａ〜Ｚ / ０〜９）は既定で対象外。縦組みでも既に正立して表示されるためです。
• React / Vue / Astro <Tcy> のいずれも SSR-safe で、サーバーとクライアントで同じ DOM を生成します。
• rehype プラグイン（および Astro インテグレーション内部）は冪等です。同じ HAST に2回適用しても出力は変わりません。
• maxLength / excludeWords で対象外になった run はプレーンテキストに戻り、隣接するテキストと自動的にマージされます。

ブラウザ対応

writing-mode: vertical-rl と text-combine-upright: all は主要なモダンブラウザで動作します。Safari では歴史的に -webkit-text-combine: horizontal を併記しておくと安心です。

バージョンの揃え方

5 つのパッケージはバージョン番号を @love-rox/tcy-core に揃えてリリースしています。「core は 0.3 だけど react は 0.2.5」のような不整合で迷わないよう、どれか一つでも変更があれば他もまとめて同じ番号に上がる運用です。

ライセンス

MIT License。個人・法人問わず自由に利用できます。