{"slug": "show-hn-vertically-works-ui-components-built-on-writing-mode-vertical-rl", "title": "Show HN: Vertically Works – UI components built on writing-mode: vertical-RL", "summary": "Vertically Works, a new open-source UI component library, offers 20 components designed for vertical writing systems (top-to-bottom, right-to-left) used in Korean, Japanese, and Chinese, challenging the horizontal-text assumption of standard interfaces. The project explores issues such as animation direction, mixed CJK/Latin content, navigation placement, text selection, IME input, arrow key behavior, drag-and-drop, and AI chat adaptation for vertical layouts.", "body_md": "# Interfaces for\n\nvertical writing\n\nEvery 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.\n\n**20** componentsKorean, Japanese, Chinese\n\n**4** applications\n\n## Applications\n\n[All applications](/apps)\n\n## What This Project Explores\n\n[All challenges](/challenges)\n\nShould a sheet animate from screen geometry or reading direction?\n\nHow should mixed CJK and Latin content behave in the same column?\n\nWhere does the navigation rail belong in a vertical-first interface?\n\nHow does text selection work when reading flows top-to-bottom, right-to-left?\n\nWhere does the IME candidate window appear when input is vertical?\n\nWhat do the arrow keys mean in a vertical, RTL interface?\n\nHow does drag-and-drop reordering work when list items are columns?\n\nHow should AI chat interfaces adapt to vertical writing systems?\n\n### Derived Principles\n\n### Respect Reading Flow\n\nBegin with how the reader moves, not convention.\n\n### Motion Has Meaning\n\nAnimation reinforces reading direction, never decoration.\n\n### Interaction Before Typography\n\nBehavior is the goal; typography enables it.\n\n### Mixed Language First\n\nDesign for mixed scripts, not the average.\n\n### Accessibility Is Fundamental\n\nKeyboard, touch, screen reader, reduced motion, built in.\n\n### Progressive Familiarity\n\nNew readers need a ramp · deepen the vertical commitment gradually.\n\n### Research Never Ends\n\nDocument open questions beside resolved ones.", "url": "https://wpnews.pro/news/show-hn-vertically-works-ui-components-built-on-writing-mode-vertical-rl", "canonical_source": "https://vertically.works", "published_at": "2026-07-21 04:22:39+00:00", "updated_at": "2026-07-21 04:53:15.105763+00:00", "lang": "en", "topics": ["developer-tools", "ai-products"], "entities": ["Vertically Works"], "alternates": {"html": "https://wpnews.pro/news/show-hn-vertically-works-ui-components-built-on-writing-mode-vertical-rl", "markdown": "https://wpnews.pro/news/show-hn-vertically-works-ui-components-built-on-writing-mode-vertical-rl.md", "text": "https://wpnews.pro/news/show-hn-vertically-works-ui-components-built-on-writing-mode-vertical-rl.txt", "jsonld": "https://wpnews.pro/news/show-hn-vertically-works-ui-components-built-on-writing-mode-vertical-rl.jsonld"}}