npm パッケージ

tate-chu-yoko

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

解決したいこと

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

3つの配布物

用途に合わせて必要なパッケージを選べます。コアは framework-agnostic なトークナイザー、React / Vue は公式アダプタです。

インストール

使いたいアダプタ（React / Vue）だけ入れれば、@love-rox/tcy-core は依存で自動的に引き込まれます。

使い方

writing-mode: vertical-rl を当てた親要素の中で、縦中横対象にしたい範囲を <Tcy> で包むだけです。

import { Tcy } from "@love-rox/tcy-react";

export function Chapter() {
  return (
    <p style={{ writingMode: "vertical-rl" }}>
      <Tcy>第1章 2026年4月、Webの縦書きは進化した。</Tcy>
    </p>
  );
}

<script setup lang="ts">
import { Tcy } from "@love-rox/tcy-vue";
</script>

<template>
  <p style="writing-mode: vertical-rl">
    <Tcy>第1章 2026年4月、Webの縦書きは進化した。</Tcy>
  </p>
</template>

import { tokenize } from "@love-rox/tcy-core";

tokenize("第1章 2026年4月");
// [
//   { type: "text", value: "第" },
//   { type: "tcy",  value: "1" },
//   { type: "text", value: "章 " },
//   { type: "tcy",  value: "2026" },
//   { type: "text", value: "年" },
//   { type: "tcy",  value: "4" },
//   { type: "text", value: "月" },
// ]

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

オプション

React / Vue の <Tcy> と tokenize() で共通のオプションです。

共通オプション

コンポーネント専用プロパティ

挙動の注記

• <em>12</em>34 のように要素境界をまたぐ文字列は連結されず、別々のスパンになります。
• 全角英数字（Ａ〜Ｚ / ０〜９）は既定で対象外。縦組みでも既に正立して表示されるためです。
• React / Vue のアダプタはどちらも SSR-safe で、サーバーとクライアントで同じ DOM を生成します。

ブラウザ対応

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

ライセンス

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