Tiered Page
Navigation
Tabs
Conversation
MarkerMessage
ComponentsTiered Page
Layout

Tiered Page

A static book page of vertical columns split into two stacked tiers · the vertical answer to the two-column spread. With a verse-number band, or as a plain two-row layout divided by rules.

$ npx verticallyworks add tiered-page
Design question

A tall page of short vertical columns wastes most of its height, and the horizontal fix — multi-column rows — doesn't exist on the vertical axis. How does structured text fill a page without scrolling?

Numbered (절별)

1글씨를 세로로 쓰는
것을 세로쓰기라 한다
2한국어와 중국어와
일본어가 세로로
쓰였다
3우종서의 가장 오래된
기록은 중국에서
발견되었다
4죽간을 쓰던 때부터
세로로 썼다

The numbered 절별 page: each verse starts a column under an upright number; a hairline underlines the number band, a heavier rule divides the tiers. Reading flows down each column, leftward across the tier, then drops to the second tier's rightmost column.

tsx
1import { TieredPage } from "@/components/vw/tiered-page"
2
3export function VersePage() {
4 return (
5 <TieredPage
6 height={500}
7 columns={[
8 // A label starts a verse · unlabeled columns continue it.

Plain two-tier

산에는 꽃 피네
꽃이 피네
갈 봄 여름 없이
꽃이 피네
산에서 우는 작은
새여 꽃이 좋아
산에서 사노라네
산에는 꽃 지네

The plain spread: two stacked runs of right-to-left columns divided by a single rule · no scroll, the page is the unit.

tsx
1import { TieredPage } from "@/components/vw/tiered-page"
2
3export function PoemPage() {
4 return (
5 <TieredPage
6 height={420}
7 columns={[
8 { text: "산에는 꽃 피네" },

Source

The exact file npx verticallyworks add tiered-page copies into your project · yours to edit. Styling comes entirely from the design tokens.

tsx
1"use client";
2
3/**
4 * TieredPage · the 절별 book-page layout.
5 *
6 * A static page of vertical text split into two stacked tiers, each a run of
7 * top→bottom columns reading right→left — the vertical answer to the
8 * two-column magazine spread. A long text would otherwise leave a tall page

Guidance

Do
  • Pin every column to a fixed width · a packed tier must never compress columns into each other
  • Keep the rule weights distinct: hairline under the number band, heavier between tiers · that contrast is the hierarchy
  • Keep the empty number band on continuation columns so every body starts on the same line
  • Turn pages with external controls along the reading axis (see chapter-navigation) · the page itself never scrolls
Don't
  • Mix scrolling and paging on the same surface · a tier that scrolls breaks the page as the unit of reading
  • Set the numbers in vertical writing mode · short numerals stay upright (tate-chu-yoko), so the band is horizontal text
  • Let a verse restart its number on a continuation column · the number marks the verse, not the column

Accessibility

DOM order must match reading order (row-reverse handles the visual R→L, the source stays first-to-last), so screen readers read verses in sequence. The rules are decorative · aria-hidden. Announce page turns via a live region on the external pager.

Open Question

How many tiers before the page reads as a grid instead of a spread? And when a verse breaks across the tier boundary, should its continuation column repeat a dimmed number as a landing cue?

PreviousVertical List Cell