Jetpack text-verticalを使った縦書き表示

Jetpack にある text-vertical を使うことで簡単に縦書き実装ができるようになったので、ざっと使い方を紹介。
以下 1.0.0-alpha06 時点の内容になります。

text-vertical とは

• Jetpack ライブラリにある縦書きの表示をサポートするライブラリ
• Android 16 以降でしか使えなかった縦書きのレンダリングを、Android 16 未満でも動くようにバックポート
• 縦書きだけでなく、ルビや傍点の表示、向きの制御も機能として含まれている
• Jetpack Compose 用に text-vertical-compose のライブラリも用意されている

実装例

依存関係の追加

androidxText = "androidx.text:text-vertical-compose:X.X.X"

縦書き表示

VerticalText の Composable fun に buildVertialText で組み立てた縦書き用テキストを渡すことで縦書き表示ができます。

VerticalText(
    buildVerticalText {
        text("「春は、曙。」")
    }
)

向きの制御

縦書きの表示における向きに関しては TextOrientation で制御します。
デフォルトでは TextOrientation.mixed になっており、VerticalText 全体で制御することも、テキストに対して個別に制御することも可能です。
個別で制御する場合は、直立の upright 、横向きの sideways 、縦中横の combineUpright のバリエーションがあります。

VerticalText(
    buildVerticalText {
        text("2026/8/10 Mixedのサンプルです")
        text("\n")
        upright("2026/8/10 uprightのサンプルです")
        text("\n")
        sideways("2026/8/10 sidewaysのサンプルです")
        text("\n")
        combineUpright("2026")
        text("年")
        combineUpright("8")
        text("月")
        combineUpright("10")
        text("日")
        combineUpright("combineUpright")
        text("のサンプルです")
    },
    orientation = TextOrientation.Mixed // or Sideways or Upright
)

ルビ

buildVerticalText の中で withRuby を使います。
withRuby に渡した文字列がルビに、スコープ内の text がそのまま表示するテキストになります。

VerticalText(
    buildVerticalText {
        withRuby("わがはい") {
            text("吾輩")
        }
        text("は猫である。名前はまだない。")
    }
)

傍点

buildVerticalText の中で withEmphasis を使います。
withEmphasis のスコープ内 text に傍点が付与されます。

VerticalText(
    buildVerticalText {
        withEmphasis {
            text("これは傍点のSampleです")
        }
    }
)

TextOrientaion.mixed では英数字に傍点がつかず、TextOrientation.upright だと傍点がつくのは CSS でのスタイルと同じです。

VerticalText(
    buildVerticalText {
        withEmphasis {
            text("これは傍点のSampleです")
        }
        text("\n")
        withEmphasis {
            upright("これは傍点のSampleです")
        }
    }
)

実装の注意点

1.0.0-alpha06 時点ではいくつか実装の注意点があります。

• VerticalText は fillMaxHeight 相当の動きになる(wrapContentHeight 相当の動きができない)
  • ボタンとか UI コンポーネントに使うには注意が必要です
• VerticalText の align 設定ができない(上揃えのみ)
• VerticalText で表示されたテキストの選択はできない(SelectionContainer の Composable fun は使えない)
• 現状は縦書きテキストの表示のみで、入力を受け付けるには自前実装が必要

---

これまでレンダリングが難しかった縦書きの表示やルビや傍点といったテキストの装飾がとても簡単に実装できるようになりました。バックポートもされているので最新でない OS でも使えるのがとてもいいですね。
ぜひ使ってフィードバックしていきましょう。