Interfaces for
vertical writing

Every UI component you know assumes horizontal text. Vertically Works is what buttons, toggles, dialogs, and lists become when reading flows top to bottom, right to left.

20 componentsKorean, Japanese, Chinese4 applications

Explore Components

The original 2019 UX Collective article, Introducing Vertically Works

A living study by Jihoon Suh.

“Why don’t we have any user interfaces in vertical format?”

Asked in Introducing Vertically Works, the design exploration published on UX Collective in December 2019. Everything on this site is the long answer to that question.

Learn more about why I’m doing this

Components

01Vertical dialogTitle, body, and actions read as columns, right to left. The overlay is a layer above the flow, so it scales from center.02List-cell toggleThe on/off thumb travels the reading axis · up is on · and flipping it re-themes the cells, so the toggle matches the direction the eye moves.03Column accordionDisclosure widens the cell sideways: detail unfolds as new columns beside the title, so the column's reading length never breaks.04Tooltip on hoverHover still exists in vertical UI: the tooltip opens to the left of the trigger, following reading direction, never below, where it would break the column.05Edge sheetThe sheet enters from the reading direction · the left edge, where the next column would appear · not from screen geometry. Scrim, slide, and dismissal all travel the same axis.06Vertical tabsA tab rail on the reading axis: vertical labels stacked at the right edge, panels unfolding to their left, the selection indicator traveling down the rail · never across it.

Applications

All applications

Verse

A fully vertical, right-to-left Bible for Korean, Japanese, and Chinese.

Columns snap per column, not per page
Tate-chu-yoko (縦中横) verse numbers
RTL-native chrome, scroll-driven immersion

View case study

To-do

A to-do list where every task is a column you read top to bottom.

Tasks are full-height columns, newest at the reading start
Pull down to delete, drag sideways to reorder
한 / あ / 中 re-localizes the whole interface

View case study

News

A daily newspaper setting live Korean, Japanese, and Chinese headlines right to left.

View case study

Listen

A podcast player where transcripts fall as time-synced vertical verse.

View case study

What This Project Explores

Motion

Should a sheet animate from screen geometry or reading direction?

Typography

How should mixed CJK and Latin content behave in the same column?

Navigation

Where does the navigation rail belong in a vertical-first interface?

Interaction

How does text selection work when reading flows top-to-bottom, right-to-left?

IME

Where does the IME candidate window appear when input is vertical?

Accessibility

What do the arrow keys mean in a vertical, RTL interface?

Interaction

How does drag-and-drop reordering work when list items are columns?

AI

How should AI chat interfaces adapt to vertical writing systems?

Derived Principles

01

Respect Reading Flow

Begin with how the reader moves, not convention.

02

Motion Has Meaning

Animation reinforces reading direction, never decoration.

03

Interaction Before Typography

Behavior is the goal; typography enables it.

04

Mixed Language First

Design for mixed scripts, not the average.

05

Accessibility Is Fundamental

Keyboard, touch, screen reader, reduced motion, built in.

06

Progressive Familiarity

New readers need a ramp · deepen the vertical commitment gradually.

07

Research Never Ends

Document open questions beside resolved ones.

Bring them into your project

Use them in your own project. Open source on GitHub, MIT-licensed.

npx verticallyworks init

Say hello