Challenges

Why Vertical Interfaces Are Difficult

Design problems that have no obvious answer when the reading axis changes. Some are resolved. Most remain open questions.

01
MotionOpen

Should a sheet animate from screen geometry or reading direction?

When a bottom sheet slides up in a horizontal interface, the direction matches gravity and screen edge proximity. In a vertical, RTL interface, dismissal toward the bottom-right conflicts with the reading direction. Which axis wins?

DrawerSheetModal
02
TypographyPartially Resolved

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

A verse reference like 「창 1:1」 contains hangul, ASCII colon, Latin digits, and CJK brackets — each needing different orientation. Unicode defines orientation per character class, but browser and OS implementations vary significantly.

Tate-chu-yokoGlyph OrientationMixed Scripts
03
NavigationOpen

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

Horizontal apps put navigation at the bottom (mobile) or left (desktop) based on thumb reach and primary reading axis. In a vertical, RTL reading interface, the primary axis is down-the-column, and columns flow right-to-left. The "natural" position of a rail is not obvious.

SidebarTab Bar
04
InteractionOpen

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

Click-drag selection assumes a left-to-right baseline. The OS text selection rectangle must account for RTL column ordering, column breaks, and tate-chu-yoko groups that behave as single units.

Text SelectionHighlightCopy
05
IMEOpen

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

Input Method Editors (CJK composition) display candidate windows horizontally by default. In a vertical context, the candidate window placement must not obscure the composition point — but the platform IME API rarely exposes enough control to correct this.

SearchText FieldCJK Input
06
AccessibilityOpen

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

Arrow keys in a horizontal interface move left/right within a line and up/down between lines. In a vertical interface, "next character" is downward; "next line" is leftward. The keyboard navigation model must remap these to prevent disorientation.

Keyboard NavigationFocus ManagementAccessibility
07
InteractionOpen

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

List reordering assumes a vertical list of horizontal rows. In a vertical reading interface, a list of columns flowing RTL has a different primary axis for reorder gestures — left-right drag maps to position change, not the usual up-down.

Sortable ListDrag and DropGesture
08
AIOpen

How should AI chat interfaces adapt to vertical writing systems?

AI conversation UIs are designed around horizontal text bubbles alternating left and right. For a CJK user reading vertically, this model imposes a foreign interaction pattern. What would a native vertical AI chat interface look like?

MessagingAI InterfaceChat