Search in a vertical reading app must handle CJK composition, display results in a vertical-compatible list, and navigate to matches without breaking the column reading position.

Default

세로 · 죽간 · 두루마리 · 우종서 를 검색해 보세요

The search field itself runs vertically on the reading-start (right) edge · the caret and query text advance top→bottom via `writing-mode: vertical-rl`. Results read as vertical columns flowing right-to-left on the same axis, each match highlighted by background, never rotation.

tsx
1function VerticalSearch() {
2  const [query, setQuery] = useState("")
3  const [results, setResults] = useState([])
4
5  return (
6    <div style={{
7      position: "fixed",
8      inset: 0,

Guidance

Keep the search input horizontal · composition requires horizontal baseline
Show results in a scannable list, not vertical columns
Highlight matches with background color, not text rotation

Don't

Display search results as vertical text · this slows scanning
Open search in a new page · use an overlay so position is preserved
Assume Korean/Japanese/Chinese input works without IME event handling

Accessibility

role='search'. aria-live region for results count. Results list with role='listbox'.

Open question

Should search results be displayed horizontally (for faster scanning) or vertically (to match the reader's current mode)?

PreviousText Field Next Slider

1	function VerticalSearch() {
2	const [query, setQuery] = useState("")
3	const [results, setResults] = useState([])
4
5	return (
6	<div style={{
7	position: "fixed",
8	inset: 0,