Vertically Works - NFHN Reader

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

Components

All 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.

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?

How should AI chat interfaces adapt to vertical writing systems?

Derived Principles

Respect Reading Flow

Begin with how the reader moves, not convention.

Motion Has Meaning

Animation reinforces reading direction, never decoration.

Interaction Before Typography

Behavior is the goal; typography enables it.

Mixed Language First

Design for mixed scripts, not the average.

Accessibility Is Fundamental

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

Progressive Familiarity

New readers need a ramp · deepen the vertical commitment in stages.

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.

Interfaces forvertical writing