ComponentsVerse
Text

Verse

The atomic unit of vertical scripture layout — a selectable, highlightable text cell within a vertical column.

Design question

How should selection and highlight behave for a body-text unit inside a top-to-bottom, right-to-left column layout?

Default

글씨를 세로로 쓰는 것을 세로쓰기라 한다전통적으로 한국어·중국어·일본어가 세로로 쓰였다
우종서의 가장 오래된 기록은 중국에서 발견되었다죽간을 쓰던 때부터 한자 문화권은 세로로 썼다
그에 따라 옛 문헌은 전부 세로쓰기로 되어 있다가로로 쓰면 두루마리를 말고 펴기가 불편했다
하이라이트

Columns flow right-to-left (sentences 1–2 on the right). Tap a line to select, then apply a highlight color. Selection must account for RTL column order.

tsx
1function Verse({ text, selected, highlighted, color, onTap }) {
2 return (
3 <div
4 style={{
5 position: "relative",
6 display: "flex",
7 cursor: "pointer",
8 }}

Guidance

Do
  • Keep the reading column as pure body text — surface the reference in the chrome or on selection
  • Treat tate-chu-yoko digit groups as single selection units
  • Use background-color + leading border for highlights — not text inversion
Don't
  • Use the OS text selection API for vertical content — it breaks at column boundaries
  • Inject verse numbers as inline column elements — they interrupt the vertical reading rhythm
  • Apply highlight via text-shadow or outline

Accessibility

Each verse is a paragraph with aria-label including reference. Highlight announced via live region.

Open Question

How should a multi-verse selection spanning a column break be represented visually? The rectangular selection model doesn't extend across RTL columns.

← PreviousTabsNext →Popover Menu