A hyperlink is conventionally underlined. Rotated into vertical text, that underline falls to one side of the column and collides with the neighbouring line. How is a link marked instead?

Decision

The underline is a horizontal-writing artifact · a rule that runs along the baseline. Vertical writing already has a mechanism for marking a run of characters: the emphasis mark (방점 / 傍點), a dot set beside each character, on the right in vertical text. Reused as the link affordance, it rides alongside the column instead of crossing into the next line.

Interpunct vs underline

글씨를 세로로 쓰는 것을 세로쓰기라 한다。 우종서의 기록은 죽간에서 처음 나타났다。

A dot (∙) sits to the right of each character in the linked run · one per character, centred · the CJK emphasis-mark convention. It marks the run without crossing into the neighbouring line.

tsx
1// The interpunct rides to the right of every character in the run,
2// this is the CSS text-emphasis (emphasis-mark) mechanism, which in
3// vertical writing places one mark per character on the right by default.
4
5// a.link {
6//   color: var(--color-fg);
7//   text-decoration: none;                 /* no underline */
8//   -webkit-text-emphasis: "·";

Guidance

Use text-emphasis (방점) to mark links · it is the native vertical-writing mechanism for a character run
Keep the mark to the right of the character (the vertical default), where readers expect emphasis
Pair the mark with a color shift so the link is legible without relying on the dot alone

Don't

Underline links in vertical text · the rule lands on the column's side and reads as a border
Rotate a horizontal underline 90° and call it done
Use the interpunct mark for non-interactive emphasis on the same screen · it will be mistaken for a link

Accessibility

Use a real <a> element so it is focusable and announced as a link. The mark is decorative (text-emphasis) · never encode the link's meaning in the dot alone; keep a color or focus cue. Ensure a visible focus ring on the vertical run.

Open question

Emphasis marks also signal non-link emphasis in CJK typography. When a page needs both, what second channel (color, weight, mark shape) keeps links distinct from emphasized text?

PreviousPopover Menu Next Tooltip

1	// The interpunct rides to the right of every character in the run,
2	// this is the CSS text-emphasis (emphasis-mark) mechanism, which in
3	// vertical writing places one mark per character on the right by default.
4
5	// a.link {
6	// color: var(--color-fg);
7	// text-decoration: none; /* no underline */
8	// -webkit-text-emphasis: "·";