Vertical Text and Layout Considerations in Japanese Apps

Most mobile apps targeting Japan use horizontal text. A small but important category — reading apps, novels, manga, classical literature, calligraphy — uses vertical text (縦書き / tategaki). This article covers when to support it, what's involved, and the layout decisions that matter.

For broader typography context, see Japanese typography for mobile apps.

When You Need Vertical Text

Vertical text is required (or strongly expected) in:

Novel reading apps (BOOK☆WALKER, ピッコマ for some titles, kobo).
Manga apps that follow traditional reading flow (right-to-left, vertical-flow speech bubbles).
Classical literature apps (Aozora Bunko-style readers).
Calligraphy and shodo apps.
Stylistic display elements in apps that aren't fundamentally vertical (loading screens, splash screens, decorative banners).

It is not needed in:

Standard consumer apps (productivity, social, finance, etc.).
News apps (modern Japanese news sites are horizontal online, even though print uses vertical).
E-commerce apps.
Most reading apps for non-fiction and modern content.

If you're not sure whether your app needs it: it probably doesn't. Vertical text is an opt-in for specific cultural-content categories.

How Vertical Japanese Text Works

In vertical writing:

Lines run top to bottom.
Lines progress right to left (the second line is to the left of the first).
Punctuation rotates 90° (the comma 「、」 sits in the upper-right of its grid cell rather than the lower-right).
Numbers and Latin letters are typically rotated to be readable horizontally, or split character-by-character to be readable as upright vertical letters (this is a style choice).
Page navigation flows right-to-left: advancing to the next page moves you left.

This affects everything: text rendering, page navigation, scroll direction, layout flow.

iOS Implementation

CoreText supports vertical text. The basic flow:

let attributedString = NSMutableAttributedString(string: yourJapaneseText)

// Set vertical orientation
attributedString.addAttribute(
    .verticalGlyphForm,
    value: NSNumber(value: 1),
    range: NSRange(location: 0, length: attributedString.length)
)

// Use a CTFrame with verticalForms
let path = CGPath(rect: yourFrame, transform: nil)
let frameAttributes: [String: Any] = [
    kCTFrameProgressionAttributeName as String: CTFrameProgression.rightToLeft.rawValue
]

let frame = CTFramesetterCreateFrame(
    framesetter,
    CFRange(location: 0, length: attributedString.length),
    path,
    frameAttributes as CFDictionary
)

You'll be drawing the frame yourself in a CALayer or custom view. This is meaningfully more work than horizontal text.

SwiftUI doesn't have a built-in vertical-text view. For a vertical-text reading app, you build a UIViewRepresentable wrapper over a custom CoreText view.

Android Implementation

Android's TextView does not natively support vertical Japanese text in the way CoreText does. Options:

Option 1: Custom View

Subclass View and implement onDraw. Paint each character with calculated x/y positions for vertical layout. Significant custom work; you handle line-wrapping, character orientation, and page flow yourself.

Option 2: Compose with Canvas

In Jetpack Compose, use Canvas and drawText with manual positioning. Same complexity as the View approach, just in Compose idioms.

Option 3: WebView with vertical CSS

The path of least resistance for many teams. CSS writing-mode: vertical-rl is well-supported in WebView. You render Japanese text as HTML with vertical writing-mode and embed the WebView.

<div style="writing-mode: vertical-rl; height: 100vh; padding: 20px;">
  これは縦書きの日本語テキストです。<br>
  上から下へ、右から左へ読みます。
</div>

This works on both iOS and Android (via WebView/WKWebView) and gives you correct line breaking, punctuation rotation, and basic layout for free. For most apps that need vertical text, this is the pragmatic choice.

Page Navigation Conventions

Vertical-text apps inherit conventions from print Japanese books:

Right-to-left page progression. Page 2 is to the left of page 1.
Tap right edge → previous page. Tap left edge → next page.
Swipe left → next page. Swipe right → previous page.
Page progress indicator counts up as the user moves left.

These are the opposite directions of Western reading apps. Don't compromise — vertical-text users expect this. Mixing conventions confuses everyone.

For manga apps: the same right-to-left convention holds for panel order within a page. Speech bubbles are read top-right to bottom-left.

Mixing Horizontal and Vertical

Some apps mix vertical for content and horizontal for chrome. A novel reader might have:

Content area: vertical text.
Top bar (settings, brightness): horizontal text.
Bottom bar (page progress): horizontal text.
Settings screens: entirely horizontal text.

This mixing is normal and JP users are used to it. The convention is: only the "content" — what the user is reading or studying — uses vertical. App chrome stays horizontal.

Embedded Latin and Numbers

Latin letters and numbers within vertical Japanese text have two conventions:

Convention A: Tate-chu-yoko (縦中横)

2-digit numbers and short Latin runs (2–3 chars) are rotated as a group so they read horizontally inside the vertical column. "2026年" displays with "20" or "26" upright as a horizontal pair.

Convention B: Rotated 90°

Longer Latin runs (proper nouns, long brand names) are rotated 90° clockwise so the reader tilts their head to read.

Most rendering engines handle convention A automatically when you specify it; convention B is the default for longer runs.

Font Considerations

For vertical text, certain Japanese fonts have explicit vertical variants. The system fonts (Hiragino on iOS, Noto Sans CJK JP on Android) handle vertical orientation correctly. Using a custom font that doesn't support vertical orientation produces incorrect punctuation rotation and broken character orientation.

If you ship a custom font for a vertical-text app, verify:

Punctuation glyphs rotate correctly.
「ー」 (long vowel mark) rotates from horizontal-dash to vertical-dash.
Quote marks 「」 rotate to vertical orientation.
「（）」 and 「。」 sit in the correct position within the cell.

If any of these break, choose a different font or use system fonts.

Right-to-Left Layout in Non-Reading Contexts

Vertical text is tied to right-to-left reading flow. But right-to-left isn't only for vertical apps — it sometimes appears in:

Manga apps with horizontal layout that still flow right-to-left at the panel level.
Calendar apps displaying Japanese months/eras.
Educational apps teaching traditional Japanese.

For these cases, mirror navigation arrows and progress indicators. Don't blanket-flip your whole UI — only the content portion should mirror.

Testing Vertical Text

The JP-localization QA checklist (see testing Japanese localization) extends with vertical-specific items:

Test on real devices, with native users who read vertical novels regularly. They'll catch positioning issues that look subtly wrong but that specs don't reveal.

A Decision Framework

Before adding vertical text support:

Is your app in a category where vertical text is conventional? (Novels, manga, classical content.) If no, default to horizontal.
Is vertical text a feature your users will actively prefer? Ask them. Some prefer horizontal even for novels on mobile.
Can you afford the implementation cost? Custom rendering is significant work.
Can you maintain it? Vertical text bugs are subtle and require native review to catch.

If the answers are yes, support it well. If you can't support it well, default to horizontal — most modern Japanese mobile readers support both modes anyway, with horizontal as the default for mobile and vertical as an opt-in.

Where to Go Next

We work with reading and manga apps on vertical-text implementation, including font selection, layout review, and native testing. Contact us if you're scoping a vertical-text feature.