From c756eb54afc0393b27c9da07cdcd11c799afbd96 Mon Sep 17 00:00:00 2001
From: Kevin Deng <sxzz@sxzz.moe>
Date: Sun, 23 Aug 2026 06:24:16 +0900
Subject: [PATCH] Explain Japanese old-form characters in region controls (#51)

---
 app/components/FilterBar.vue    |   8 +-
 app/components/LitRegions.vue   |   4 +-
 app/components/OldFormHelp.vue  | 236 ++++++++++++++++++++++++++++++++
 app/components/OptionsMenu.vue  | 138 +++++++++++++++++--
 app/components/RegionOption.vue |   4 +-
 app/components/StrokeOrder.vue  |   5 +-
 app/locales/index.ts            |   9 ++
 app/locales/ja-jp.ts            |   8 +-
 app/locales/ko-kr.ts            |   8 +-
 app/locales/zh-cn.ts            |   8 +-
 app/locales/zh-hk.ts            |   8 +-
 app/locales/zh-tw.ts            |   8 +-
 app/pages/char/[key].vue        |  58 ++++----
 scripts/tests/i18n.test.ts      |  25 ++++
 14 files changed, 476 insertions(+), 51 deletions(-)
 create mode 100644 app/components/OldFormHelp.vue

diff --git a/app/components/FilterBar.vue b/app/components/FilterBar.vue
index 646e961..7066b7e 100644
--- a/app/components/FilterBar.vue
+++ b/app/components/FilterBar.vue
@@ -155,7 +155,11 @@ const listingOptions = computed(() =>
       ...entry,
       label,
       title,
-      ariaLabel: `${title} ${label}`,
+      ariaLabel: entry.kind === 'old' ? title : `${title} ${label}`,
+      parts:
+        entry.kind === 'old'
+          ? [{ suffix: label }]
+          : [{ region: entry.region, suffix: label }],
     }
   }),
 )
@@ -272,7 +276,7 @@ function toggleRegion(region: string) {
           :key="option.id"
           :active="chars.tiers.value.includes(option.id)"
           :label="option.ariaLabel"
-          :parts="[{ region: option.region, suffix: option.label }]"
+          :parts="option.parts"
           :title="option.title"
           @select="toggleTier(option.id)"
         />
diff --git a/app/components/LitRegions.vue b/app/components/LitRegions.vue
index dfe07c0..9823ed4 100644
--- a/app/components/LitRegions.vue
+++ b/app/components/LitRegions.vue
@@ -21,7 +21,7 @@ const { flagsOn } = usePrefs()
 const marks = computed(() =>
   props.columns.map((column) => ({
     column,
-    region: column === 'old' ? ('jp' as const) : column,
+    region: column === 'old' ? undefined : column,
     old: column === 'old' ? t('region.old.short') : undefined,
   })),
 )
@@ -30,7 +30,7 @@ const marks = computed(() =>
 <template>
   <span class="lit-regions eyebrow" :style="{ color: groupColor(group) }">
     <span v-for="mark in marks" :key="mark.column" class="lit-region">
-      <RegionLabel :flag="flagsOn" :region="mark.region" />
+      <RegionLabel v-if="mark.region" :flag="flagsOn" :region="mark.region" />
       <template v-if="mark.old">{{ mark.old }}</template>
     </span>
   </span>
diff --git a/app/components/OldFormHelp.vue b/app/components/OldFormHelp.vue
new file mode 100644
index 0000000..e0ecc36
--- /dev/null
+++ b/app/components/OldFormHelp.vue
@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { LOCALE_OLD_FORM_WIKIPEDIA } from '~/locales/index.ts'
+
+const { t, locale } = useT()
+const trigger = ref<HTMLButtonElement>()
+const card = ref<HTMLElement>()
+const link = ref<HTMLAnchorElement>()
+const descriptionId = useId()
+const cardId = useId()
+
+const open = ref(false)
+const below = ref(false)
+const left = ref(0)
+const top = ref(0)
+const width = ref(230)
+let triggerHovered = false
+let cardHovered = false
+let closeTimer: ReturnType<typeof setTimeout> | undefined
+
+const wikipedia = computed(() => LOCALE_OLD_FORM_WIKIPEDIA[locale.value])
+
+function clearCloseTimer() {
+  if (closeTimer !== undefined) clearTimeout(closeTimer)
+  closeTimer = undefined
+}
+
+function updatePosition() {
+  if (!trigger.value) return
+  const triggerRect = trigger.value.getBoundingClientRect()
+  const cardHeight = card.value?.getBoundingClientRect().height ?? 88
+  const viewportGap = 8
+  const nextWidth = Math.min(230, window.innerWidth - viewportGap * 2)
+
+  width.value = nextWidth
+  left.value = Math.min(
+    Math.max(
+      triggerRect.left + triggerRect.width / 2 - nextWidth / 2,
+      viewportGap,
+    ),
+    window.innerWidth - nextWidth - viewportGap,
+  )
+  below.value = triggerRect.top - viewportGap - cardHeight < viewportGap
+  top.value = below.value
+    ? triggerRect.bottom + viewportGap
+    : triggerRect.top - viewportGap
+}
+
+function show() {
+  clearCloseTimer()
+  open.value = true
+  nextTick(updatePosition)
+}
+
+function scheduleHide() {
+  clearCloseTimer()
+  closeTimer = setTimeout(() => {
+    const active = document.activeElement
+    if (
+      triggerHovered ||
+      cardHovered ||
+      active === trigger.value ||
+      (active && card.value?.contains(active))
+    )
+      return
+    open.value = false
+  }, 120)
+}
+
+function focusLink() {
+  show()
+  nextTick(() => {
+    updatePosition()
+    link.value?.focus()
+  })
+}
+
+function onTriggerEnter() {
+  triggerHovered = true
+  show()
+}
+
+function onTriggerLeave() {
+  triggerHovered = false
+  scheduleHide()
+}
+
+function onCardEnter() {
+  cardHovered = true
+  clearCloseTimer()
+}
+
+function onCardLeave() {
+  cardHovered = false
+  scheduleHide()
+}
+
+const onViewportChange = () => {
+  if (open.value) updatePosition()
+}
+
+onMounted(() => {
+  window.addEventListener('resize', onViewportChange)
+  window.addEventListener('scroll', onViewportChange, true)
+})
+
+onBeforeUnmount(() => {
+  clearCloseTimer()
+  window.removeEventListener('resize', onViewportChange)
+  window.removeEventListener('scroll', onViewportChange, true)
+})
+
+watch(locale, () => nextTick(updatePosition))
+</script>
+
+<template>
+  <span class="old-form-help">
+    <button
+      ref="trigger"
+      type="button"
+      class="old-form-trigger focus-ring"
+      :aria-label="t('region.old.full')"
+      :aria-describedby="descriptionId"
+      :aria-controls="cardId"
+      :aria-expanded="open"
+      @click.stop="focusLink"
+      @mouseenter="onTriggerEnter"
+      @mouseleave="onTriggerLeave"
+      @focus="show"
+      @blur="scheduleHide"
+    >
+      {{ t('region.old.short') }}
+    </button>
+    <span :id="descriptionId" class="sr-only">
+      {{ t('region.old.description') }}
+    </span>
+  </span>
+
+  <Teleport to="body">
+    <Transition name="old-form-pop">
+      <div
+        v-if="open"
+        :id="cardId"
+        ref="card"
+        class="old-form-card"
+        :style="{
+          left: `${left}px`,
+          top: `${top}px`,
+          width: `${width}px`,
+          transform: below ? undefined : 'translateY(-100%)',
+        }"
+        @mouseenter="onCardEnter"
+        @mouseleave="onCardLeave"
+        @focusin="clearCloseTimer"
+        @focusout="scheduleHide"
+      >
+        <p>{{ t('region.old.description') }}</p>
+        <a
+          ref="link"
+          :href="wikipedia"
+          class="old-form-link focus-ring"
+          target="_blank"
+          rel="noopener noreferrer"
+          @click.stop
+        >
+          <span>{{ t('region.old.wikipedia') }}</span>
+          <span
+            class="i-ri-external-link-line block shrink-0"
+            aria-hidden="true"
+          />
+        </a>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.old-form-help {
+  display: inline-flex;
+}
+
+.old-form-trigger {
+  padding: 0 0.125rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  text-decoration: underline dotted var(--c-rule);
+  text-underline-offset: 0.2em;
+  cursor: help;
+}
+
+.old-form-trigger:hover,
+.old-form-trigger[aria-expanded='true'] {
+  color: var(--c-ink);
+  text-decoration-color: currentColor;
+}
+
+.old-form-card {
+  position: fixed;
+  z-index: 50;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--c-rule);
+  border-radius: 6px;
+  background: var(--c-paper);
+  color: var(--c-ink-soft);
+  font-family: var(--font-ui);
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
+.old-form-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+  color: var(--c-ink);
+  text-decoration: underline;
+  text-decoration-color: var(--c-rule);
+  text-underline-offset: 0.18em;
+}
+
+.old-form-link:hover {
+  text-decoration-color: currentColor;
+}
+
+.old-form-pop-enter-active,
+.old-form-pop-leave-active {
+  transition: opacity 120ms ease;
+}
+
+.old-form-pop-enter-from,
+.old-form-pop-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/app/components/OptionsMenu.vue b/app/components/OptionsMenu.vue
index 915fd77..ac6aaf4 100644
--- a/app/components/OptionsMenu.vue
+++ b/app/components/OptionsMenu.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const { t } = useT()
+import { LOCALE_OLD_FORM_WIKIPEDIA } from '~/locales/index.ts'
+
+const { t, locale } = useT()
 const {
   flagLabels,
   outline,
@@ -9,6 +11,10 @@ const {
   toggleColumn,
 } = usePrefs()
 
+const regionColumns = COLUMNS.filter((column) => column !== 'old')
+const oldDescriptionId = useId()
+const oldFormWikipedia = computed(() => LOCALE_OLD_FORM_WIKIPEDIA[locale.value])
+
 /** Reader preferences, each labeled by `options.<key>` and `<key>Hint`. */
 const options = [
   { key: 'flags', model: flagLabels },
@@ -74,23 +80,13 @@ onKeyStroke('Escape', () => (open.value = false))
           }}</span>
           <div class="grid grid-cols-5 mt-2 gap-1.5">
             <RegionOption
-              v-for="column in COLUMNS"
+              v-for="column in regionColumns"
               :key="column"
               class="w-full"
-              :class="column === 'old' ? 'order-1 col-span-5' : ''"
               :active="columnShown(column)"
               :disabled="columnLocked(column)"
-              :label="
-                column === 'old'
-                  ? t('region.old.full')
-                  : t(`region.${column}.full`)
-              "
-              :parts="[
-                {
-                  region: column === 'old' ? 'jp' : column,
-                  suffix: column === 'old' ? t('region.old.short') : undefined,
-                },
-              ]"
+              :label="t(`region.${column}.full`)"
+              :parts="[{ region: column }]"
               :title="
                 columnLocked(column)
                   ? t('options.columnsLast')
@@ -98,6 +94,35 @@ onKeyStroke('Escape', () => (open.value = false))
               "
               @select="toggleColumn(column)"
             />
+
+            <div class="old-column">
+              <RegionOption
+                class="w-full"
+                :active="columnShown('old')"
+                :aria-describedby="oldDescriptionId"
+                :label="t('region.old.full')"
+                :native-title="false"
+                :parts="[{ suffix: t('region.old.short') }]"
+                @select="toggleColumn('old')"
+              />
+              <div class="old-tooltip">
+                <p :id="oldDescriptionId">
+                  {{ t('region.old.description') }}
+                </p>
+                <a
+                  :href="oldFormWikipedia"
+                  class="old-tooltip-link focus-ring"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span>{{ t('region.old.wikipedia') }}</span>
+                  <span
+                    class="i-ri-external-link-line block shrink-0"
+                    aria-hidden="true"
+                  />
+                </a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -117,4 +142,89 @@ onKeyStroke('Escape', () => (open.value = false))
   opacity: 0;
   transform: translateY(-4px);
 }
+
+.old-column {
+  position: relative;
+  grid-column: 1 / -1;
+}
+
+.old-tooltip {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 0.375rem);
+  left: 0;
+  z-index: 1;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--c-rule);
+  border-radius: 6px;
+  visibility: hidden;
+  background: var(--c-paper);
+  color: var(--c-ink-soft);
+  font-size: 0.75rem;
+  line-height: 1.5;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(0.25rem);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease,
+    visibility 0s linear 120ms;
+}
+
+/* Keep the hover path continuous across the small visual gap. */
+.old-tooltip::after {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  height: 0.5rem;
+  content: '';
+}
+
+.old-column:hover .old-tooltip,
+.old-column:focus-within .old-tooltip {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+  transition-delay: 0s;
+}
+
+.old-tooltip-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+  color: var(--c-ink);
+  text-decoration: underline;
+  text-decoration-color: var(--c-rule);
+  text-underline-offset: 0.18em;
+}
+
+.old-tooltip-link:hover {
+  text-decoration-color: currentColor;
+}
+
+@media (min-width: 768px) {
+  .old-tooltip {
+    right: calc(100% + 0.5rem);
+    bottom: 0;
+    left: auto;
+    width: 14.375rem;
+    transform: translateX(0.25rem);
+  }
+
+  .old-tooltip::after {
+    top: 0;
+    right: -0.5rem;
+    left: auto;
+    width: 0.5rem;
+    height: 100%;
+  }
+
+  .old-column:hover .old-tooltip,
+  .old-column:focus-within .old-tooltip {
+    transform: translateX(0);
+  }
+}
 </style>
diff --git a/app/components/RegionOption.vue b/app/components/RegionOption.vue
index 9f762f9..c14d967 100644
--- a/app/components/RegionOption.vue
+++ b/app/components/RegionOption.vue
@@ -11,12 +11,14 @@ const props = withDefaults(
     active: boolean
     disabled?: boolean
     label: string
+    nativeTitle?: boolean
     parts: readonly RegionOptionPart[]
     size?: 'compact' | 'default'
     title?: string
   }>(),
   {
     disabled: false,
+    nativeTitle: true,
     size: 'default',
     title: undefined,
   },
@@ -45,7 +47,7 @@ const iconOnly = computed(
       iconOnly ? 'region-option-icon' : '',
     ]"
     :disabled="disabled"
-    :title="title ?? label"
+    :title="nativeTitle ? (title ?? label) : undefined"
     :aria-label="label"
     :aria-pressed="active"
     @click="$emit('select')"
diff --git a/app/components/StrokeOrder.vue b/app/components/StrokeOrder.vue
index e482c62..648a350 100644
--- a/app/components/StrokeOrder.vue
+++ b/app/components/StrokeOrder.vue
@@ -93,12 +93,9 @@ const visibleChoice = computed(() => {
 const choiceOptions = computed(() =>
   props.choices.map((choice) => ({
     value: choice.column,
-    parts: choice.columns.map((column, index) =>
+    parts: choice.columns.map((column) =>
       column === 'old'
         ? {
-            ...(choice.columns[index - 1] === 'jp'
-              ? {}
-              : { region: 'jp' as const }),
             suffix: t('region.old.short'),
           }
         : { region: column },
diff --git a/app/locales/index.ts b/app/locales/index.ts
index ef3cc0c..200392d 100644
--- a/app/locales/index.ts
+++ b/app/locales/index.ts
@@ -36,6 +36,15 @@ export const LOCALE_FREQUENCY_REGION = {
   'ko-KR': 'cn',
 } as const satisfies Record<Locale, FrequencyRegion>
 
+/** The old-form explainer follows the reader to the matching Wikipedia. */
+export const LOCALE_OLD_FORM_WIKIPEDIA = {
+  'zh-CN': 'https://zh.wikipedia.org/zh-cn/%E8%88%8A%E5%AD%97%E9%AB%94',
+  'zh-TW': 'https://zh.wikipedia.org/zh-tw/%E8%88%8A%E5%AD%97%E9%AB%94',
+  'zh-HK': 'https://zh.wikipedia.org/zh-hk/%E8%88%8A%E5%AD%97%E9%AB%94',
+  'ja-JP': 'https://ja.wikipedia.org/wiki/%E6%97%A7%E5%AD%97%E4%BD%93',
+  'ko-KR': 'https://ko.wikipedia.org/wiki/%EA%B5%AC%EC%9E%90%EC%B2%B4',
+} as const satisfies Record<Locale, string>
+
 /** Dictionaries follow either the comparison or the active interface locale. */
 export function dictionaryRegionsFor(
   locale: Locale,
diff --git a/app/locales/ja-jp.ts b/app/locales/ja-jp.ts
index b74a0c2..80a0cf5 100644
--- a/app/locales/ja-jp.ts
+++ b/app/locales/ja-jp.ts
@@ -13,7 +13,13 @@ export const jaJP: typeof zhCN = {
     tw: { short: '台', full: '台湾' },
     jp: { short: '日', full: '日本' },
     kr: { short: '韓', full: '韓国' },
-    old: { short: '旧字体', full: '日本の旧字体' },
+    old: {
+      short: '旧',
+      full: '日本の旧字体',
+      description:
+        '「旧」は、日本で新字体が定められる前に使われていた漢字の字体を表します。',
+      wikipedia: 'Wikipediaで旧字体を見る',
+    },
   },
   hero: {
     title: '一つの漢字、{n}つの字形',
diff --git a/app/locales/ko-kr.ts b/app/locales/ko-kr.ts
index d431e77..b13efa0 100644
--- a/app/locales/ko-kr.ts
+++ b/app/locales/ko-kr.ts
@@ -13,7 +13,13 @@ export const koKR: typeof zhCN = {
     tw: { short: '대', full: '대만' },
     jp: { short: '일', full: '일본' },
     kr: { short: '한', full: '한국' },
-    old: { short: '구자체', full: '일본 구자체' },
+    old: {
+      short: '구',
+      full: '일본 구자체',
+      description:
+        '‘구’는 일본에서 신자체가 정해지기 전에 쓰이던 전통 한자 자형인 구자체를 뜻합니다.',
+      wikipedia: '위키백과에서 구자체 알아보기',
+    },
   },
   hero: {
     title: '하나의 한자, {n} 가지 자형',
diff --git a/app/locales/zh-cn.ts b/app/locales/zh-cn.ts
index 47a4cd3..e6eb29b 100644
--- a/app/locales/zh-cn.ts
+++ b/app/locales/zh-cn.ts
@@ -11,7 +11,13 @@ export const zhCN = {
     tw: { short: '台', full: '台湾' },
     jp: { short: '日', full: '日本' },
     kr: { short: '韩', full: '韩国' },
-    old: { short: '旧字体', full: '日本旧字体' },
+    old: {
+      short: '旧',
+      full: '日本旧字体',
+      description:
+        '“旧”表示日本旧字体，即日本在制定新字体前使用的传统汉字字体。',
+      wikipedia: '在Wikipedia上了解旧字体',
+    },
   },
   hero: {
     title: '一个汉字{n}种字形',
diff --git a/app/locales/zh-hk.ts b/app/locales/zh-hk.ts
index 5a495dc..8ee0d20 100644
--- a/app/locales/zh-hk.ts
+++ b/app/locales/zh-hk.ts
@@ -13,7 +13,13 @@ export const zhHK: typeof zhCN = {
     tw: { short: '台', full: '台灣' },
     jp: { short: '日', full: '日本' },
     kr: { short: '韓', full: '韓國' },
-    old: { short: '舊字體', full: '日本舊字體' },
+    old: {
+      short: '舊',
+      full: '日本舊字體',
+      description:
+        '「舊」表示日本舊字體，即日本制定新字體前使用的傳統漢字字體。',
+      wikipedia: '在Wikipedia了解舊字體',
+    },
   },
   hero: {
     title: '一個漢字{n}種字形',
diff --git a/app/locales/zh-tw.ts b/app/locales/zh-tw.ts
index b217975..dd2ddd5 100644
--- a/app/locales/zh-tw.ts
+++ b/app/locales/zh-tw.ts
@@ -13,7 +13,13 @@ export const zhTW: typeof zhCN = {
     tw: { short: '臺', full: '臺灣' },
     jp: { short: '日', full: '日本' },
     kr: { short: '韓', full: '韓國' },
-    old: { short: '舊字體', full: '日本舊字體' },
+    old: {
+      short: '舊',
+      full: '日本舊字體',
+      description:
+        '「舊」表示日本舊字體，也就是日本制定新字體前使用的傳統漢字字體。',
+      wikipedia: '在Wikipedia瞭解舊字體',
+    },
   },
   hero: {
     title: '一個漢字{n}種字形',
diff --git a/app/pages/char/[key].vue b/app/pages/char/[key].vue
index 494b762..d083e9a 100644
--- a/app/pages/char/[key].vue
+++ b/app/pages/char/[key].vue
@@ -213,10 +213,13 @@ const headerRuns = computed(() =>
 const columnsOf = (run: { from: number; span: number }) =>
   columns.value.slice(run.from, run.from + run.span)
 
-/**
- * Header label. The kyujitai belongs to Japan, so it carries Japan's mark and
- * says what it is: 日 旧字体, or the flag and the words when flags are on.
- */
+const headerControlPrefix = useId().replaceAll(':', '')
+const headerControlId = (from: number) => `${headerControlPrefix}-${from}`
+const columnLabel = (column: Column) =>
+  column === 'old' ? t('region.old.full') : t(`region.${column}.full`)
+const headerLabel = (run: { from: number; span: number }) =>
+  columnsOf(run).map(columnLabel).join(' + ')
+
 const columnRegion = (column: Column): Region =>
   column === 'old' ? 'jp' : column
 const strokeChoices = computed<StrokeOrderChoice[]>(() => {
@@ -404,34 +407,43 @@ useSeoMeta({
                     :colspan="run.span"
                     class="border-l border-rule/40 py-2 text-center font-normal first:border-l-0"
                   >
-                    <!-- A step down on narrow screens: six columns share the
-                         width, and “日 旧字体” would otherwise break mid-word -->
-                    <label
+                    <span
                       class="inline-flex items-center gap-1.5 text-xs text-soft sm:text-sm"
-                      :class="singleForm ? '' : 'cursor-pointer'"
                     >
                       <input
                         v-if="!singleForm"
+                        :id="headerControlId(run.from)"
                         type="checkbox"
                         class="focus-ring size-3.5 accent-$c-g2"
                         :checked="picked.includes(run.cell.column)"
+                        :aria-label="headerLabel(run)"
                         @change="toggle(columnsOf(run))"
                       />
-                      <span
-                        v-for="column in columnsOf(run)"
-                        :key="column"
-                        class="inline-flex items-center gap-1"
-                        :title="t(`region.${column}.full`)"
-                      >
-                        <RegionLabel
-                          :flag="flagsOn"
-                          :region="columnRegion(column)"
-                        />
-                        <span v-if="column === 'old'">{{
-                          t('region.old.short')
-                        }}</span>
-                      </span>
-                    </label>
+                      <template v-for="column in columnsOf(run)" :key="column">
+                        <OldFormHelp v-if="column === 'old'" />
+                        <label
+                          v-else-if="!singleForm"
+                          :for="headerControlId(run.from)"
+                          class="inline-flex cursor-pointer items-center"
+                          :title="t(`region.${column}.full`)"
+                        >
+                          <RegionLabel
+                            :flag="flagsOn"
+                            :region="columnRegion(column)"
+                          />
+                        </label>
+                        <span
+                          v-else
+                          class="inline-flex items-center"
+                          :title="t(`region.${column}.full`)"
+                        >
+                          <RegionLabel
+                            :flag="flagsOn"
+                            :region="columnRegion(column)"
+                          />
+                        </span>
+                      </template>
+                    </span>
                   </th>
                 </tr>
               </thead>
diff --git a/scripts/tests/i18n.test.ts b/scripts/tests/i18n.test.ts
index 8e14c42..ecf5e9c 100644
--- a/scripts/tests/i18n.test.ts
+++ b/scripts/tests/i18n.test.ts
@@ -3,11 +3,14 @@ import {
   dictionaryRegionsFor,
   LOCALE_DICTIONARY_REGION,
   LOCALE_FREQUENCY_REGION,
+  LOCALE_OLD_FORM_WIKIPEDIA,
   matchLocale,
 } from '../../app/locales/index.ts'
 import { jaJP } from '../../app/locales/ja-jp.ts'
 import { koKR } from '../../app/locales/ko-kr.ts'
 import { zhCN } from '../../app/locales/zh-cn.ts'
+import { zhHK } from '../../app/locales/zh-hk.ts'
+import { zhTW } from '../../app/locales/zh-tw.ts'
 import { hanNumber } from '../../app/utils/han-number.ts'
 
 function leaves(value: unknown, prefix = ''): Record<string, string> {
@@ -79,6 +82,28 @@ describe('locale-aware dictionaries', () => {
   })
 })
 
+describe('locale-aware old-form references', () => {
+  it('uses the short label as the single-character old-form marker', () => {
+    expect([
+      zhCN.region.old.short,
+      zhHK.region.old.short,
+      zhTW.region.old.short,
+      jaJP.region.old.short,
+      koKR.region.old.short,
+    ]).toEqual(['旧', '舊', '舊', '旧', '구'])
+  })
+
+  it('links each interface locale to its matching Wikipedia', () => {
+    expect(LOCALE_OLD_FORM_WIKIPEDIA).toEqual({
+      'zh-CN': 'https://zh.wikipedia.org/zh-cn/%E8%88%8A%E5%AD%97%E9%AB%94',
+      'zh-TW': 'https://zh.wikipedia.org/zh-tw/%E8%88%8A%E5%AD%97%E9%AB%94',
+      'zh-HK': 'https://zh.wikipedia.org/zh-hk/%E8%88%8A%E5%AD%97%E9%AB%94',
+      'ja-JP': 'https://ja.wikipedia.org/wiki/%E6%97%A7%E5%AD%97%E4%BD%93',
+      'ko-KR': 'https://ko.wikipedia.org/wiki/%EA%B5%AC%EC%9E%90%EC%B2%B4',
+    })
+  })
+})
+
 describe('locale-aware small numbers', () => {
   it('uses Korean counter forms in Korean copy', () => {
     expect(hanNumber(1, 'ko-KR')).toBe('한')
-- 
2.51.2