Components›Hyperlink Treatment
Text

Hyperlink Treatment

Marking an inline run of text as a link without an underline.

Design question

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?

Interpunct vs underline

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

An interpunct (·) sits to the right of every character in the linked run — the CJK emphasis-mark (방점) convention, reused as the hyperlink affordance. It rides alongside the column without crossing into the next 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

Do
  • ✓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?

← PreviousChapter NavigationNext →Tooltip