npm package

tate-chu-yoko

A small library that automatically wraps half-width alphanumerics inside vertical Japanese text so CSS `text-combine-upright` can compose them as tate-chu-yoko (縦中横). Authors write plain text; typesetting is handled for them.

What it solves

Japanese vertical writing (writing-mode: vertical-rl) leaves half-width Latin letters and digits lying on their side. The fix — text-combine-upright: all — exists, but the developer still has to decide *which* runs to apply it to, usually by wrapping them in <span class="tcy"> by hand. That chore leaks into manuscripts, CMSes, and Markdown. tate-chu-yoko does the wrapping for you, so authors can keep writing plain text.

Three packages

Install only the adapter you need. The core tokenizer is pulled in automatically as a dependency.

Install

Pick the adapter (React or Vue) for your stack — @love-rox/tcy-core will be installed as a dependency.

Usage

Wrap the vertical content with <Tcy> inside an element that has writing-mode: vertical-rl.

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;
}

Options

These options are shared by the React / Vue <Tcy> components and by tokenize().

Shared options

Component-only props

Behavior notes

• Runs are not joined across element boundaries — <em>12</em>34 produces two separate spans.
• Full-width alphanumerics (Ａ–Ｚ / ０–９) are left alone because they already render upright in vertical text.
• Both React and Vue adapters are SSR-safe: the DOM emitted on the server matches the client.

Browser support

writing-mode: vertical-rl and text-combine-upright: all are supported in all modern browsers. For Safari it's still worth including -webkit-text-combine: horizontal alongside the standard property.

License

MIT License. Free to use in personal and commercial projects.