About this project
Where this came from
Vertically Works began with Korean type. I kept going back to older settings: manuscripts, printed books, hand-lettered posters. What struck me was that the vertical column was never loose. It ran on rules. Where a line may break, how numerals and Latin sit inside a column, how much air a column needs before it stops being readable. Print spent centuries working those rules out. Screens started horizontal and stayed there, and almost none of it carried over.
In 2019, I turned the itch into an essay and some scrappy explorations, all asking one question: can vertical type work in an interface? Nobody knew. The components you would need to find out did not exist.
The question outlasted the essay. Every few months I came back and hit the same wall: you cannot study vertical interaction with horizontal parts. So I built the parts.
Vertically Works is the result. Components built on true writing-mode: vertical-rl, applications that put them under load, and open questions given the same weight as the answers.
Jihoon Suh, New York
Questions
Isn't most digital CJK text horizontal anyway?
Yes, and that's the point. Korean went almost fully horizontal within living memory, and Japanese and Chinese screens default to horizontal too. But vertical setting never died: novels, manga, scripture, newspapers, signage. The toolchain picks the axis now, not the designer. I built this to give the choice back.
Why not just rotate existing components?
Rotation moves pixels, not behavior. A rotated toggle animates on the wrong axis. Rotated text stops being text: selection breaks, screen readers read the wrong order, IME composition falls apart. I build everything on true writing-mode: vertical-rl, so text stays selectable, searchable, and accessible, and I design motion, focus, and gesture for the axis instead of spinning them ninety degrees.
Does this work with keyboards and screen readers?
It is the hardest part, so I build it in from the start. The arrow keys remap (down for the next character, left for the next line), focus traverses columns right to left, and every duration collapses to zero under prefers-reduced-motion. Each component documents its accessibility behavior, and I keep whatever I have not solved in Challenges, out in the open.
Can I use this in production?
The components are MIT-licensed source you copy and own, with zero runtime dependencies. Nothing to lock into, nothing to break under you. The system is young, though. Treat it like early shadcn/ui: read the source, adapt it, and file what you find.