From f9cb9671c4e72150f8341e29461d836d5763b568 Mon Sep 17 00:00:00 2001
From: Kevin Deng <sxzz@sxzz.moe>
Date: Thu, 20 Aug 2026 05:47:35 +0900
Subject: [PATCH] Add display option to hide comparison columns (#15)

---
 app/components/CharCells.vue     |  27 +++++--
 app/components/CharRowItem.vue   |  20 ++++--
 app/components/CharTable.vue     |   6 +-
 app/components/FilterBar.vue     |  35 ++++-----
 app/components/HeroOverprint.vue | 117 +++++++++++++++----------------
 app/components/OptionsMenu.vue   |  54 +++++++++++++-
 app/components/OverprintChar.vue |  64 ++++++++++++-----
 app/composables/chars.ts         | 117 ++++++++++++++++++++++---------
 app/composables/prefs.ts         | 101 +++++++++++++++++++++++++-
 app/locales/ja-jp.ts             |  10 ++-
 app/locales/zh-cn.ts             |   9 ++-
 app/locales/zh-hk.ts             |   9 ++-
 app/locales/zh-tw.ts             |   9 ++-
 app/pages/char/[key].vue         |  62 ++++++++++------
 app/utils/han-number.ts          |  12 ++++
 scripts/tests/columns.test.ts    | 105 +++++++++++++++++++++++++++
 shared/links.ts                  |  22 ++++--
 shared/listings.ts               |  15 +++-
 shared/row.ts                    |  33 +++++++++
 19 files changed, 643 insertions(+), 184 deletions(-)
 create mode 100644 app/utils/han-number.ts
 create mode 100644 scripts/tests/columns.test.ts

diff --git a/app/components/CharCells.vue b/app/components/CharCells.vue
index 445040d..3932f13 100644
--- a/app/components/CharCells.vue
+++ b/app/components/CharCells.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { fontRegionOf, segmentsOf } from '~~/shared/row.ts'
+import { fontRegionOf, projectSignature, segmentsOf } from '~~/shared/row.ts'
 import { REGIONS, type CharRow } from '~~/shared/types.ts'
 
 const props = withDefaults(
@@ -14,9 +14,17 @@ const props = withDefaults(
 )
 
 const { t } = useT()
+// The lighter half of usePrefs: this renders once per row, so it stays off the
+// preferences that have nothing to say about which columns exist.
+const { regions, regionIndices, tracks, showOld } = useColumnVisibility()
 
+// Read over the columns on show: with Japan hidden, a row that ran
+// CN | HK+TW | JP has two runs, not three with a gap where Japan was.
 const signature = computed(() =>
-  props.dimension === 'glyph' ? props.row.glyph : props.row.cp,
+  projectSignature(
+    props.dimension === 'glyph' ? props.row.glyph : props.row.cp,
+    regionIndices.value,
+  ),
 )
 const segments = computed(() => segmentsOf(signature.value))
 
@@ -27,7 +35,8 @@ const colorOf = (group: number) =>
 const LANG = { cn: 'zh-CN', hk: 'zh-HK', tw: 'zh-TW', jp: 'ja' } as const
 
 const cells = computed(() =>
-  REGIONS.map((region, index) => {
+  regions.value.map((region) => {
+    const index = REGIONS.indexOf(region)
     // REGIONS and chars are both length 4, so this index is always in range
     const char = props.row.chars[index]!
     return {
@@ -37,14 +46,14 @@ const cells = computed(() =>
       lang: LANG[region],
       codePoint: `U+${char.codePointAt(0)!.toString(16).toUpperCase()}`,
       // Only Japan has a second historical form to show
-      old: region === 'jp' ? props.row.old?.char : undefined,
+      old: region === 'jp' && showOld.value ? props.row.old?.char : undefined,
     }
   }),
 )
 </script>
 
 <template>
-  <div class="grid grid-cols-4">
+  <div class="grid" :style="{ gridTemplateColumns: tracks }">
     <div
       v-for="cell in cells"
       :key="cell.region"
@@ -79,7 +88,13 @@ const cells = computed(() =>
       Regions in one group join into a single run; the number of runs is the
       number of distinct forms.
     -->
-    <div class="grid col-span-4 grid-cols-4 mt-1.5 gap-[3px]">
+    <div
+      class="grid mt-1.5 gap-[3px]"
+      :style="{
+        gridColumn: `1 / span ${cells.length}`,
+        gridTemplateColumns: tracks,
+      }"
+    >
       <span
         v-for="segment in segments"
         :key="segment.start"
diff --git a/app/components/CharRowItem.vue b/app/components/CharRowItem.vue
index 777d529..e38b9ad 100644
--- a/app/components/CharRowItem.vue
+++ b/app/components/CharRowItem.vue
@@ -9,6 +9,17 @@ const props = defineProps<{
 
 const morphing = useMorphingKey()
 const route = useRoute()
+const { regionIndices } = useColumnVisibility()
+
+/**
+ * The stroke counts the row leads with: the first column on show, and the
+ * second only where it disagrees. Reading them off fixed regions would keep
+ * quoting a column the reader has taken off the page.
+ */
+const strokes = computed(() => {
+  const [first, second] = regionIndices.value.map((i) => props.row.strokes[i])
+  return { first, second: second !== first ? second : undefined }
+})
 
 /**
  * Hand the thumbnail its view-transition-name before navigating, so the
@@ -54,12 +65,9 @@ async function open(event: MouseEvent) {
     <CharCells :row="row" :dimension="dimension" />
 
     <div class="tabular text-right text-xs text-soft font-mono">
-      <span v-if="row.strokes[0]">{{ row.strokes[0] }}</span>
-      <span
-        v-if="row.strokes[1] && row.strokes[1] !== row.strokes[0]"
-        class="text-mute"
-      >
-        /{{ row.strokes[1] }}
+      <span v-if="strokes.first">{{ strokes.first }}</span>
+      <span v-if="strokes.second" class="text-mute">
+        /{{ strokes.second }}
       </span>
     </div>
 
diff --git a/app/components/CharTable.vue b/app/components/CharTable.vue
index cbb0d88..ca5f0f1 100644
--- a/app/components/CharTable.vue
+++ b/app/components/CharTable.vue
@@ -3,7 +3,7 @@ import { injectChars } from '~/composables/chars.ts'
 
 const chars = injectChars()
 const { t } = useT()
-const { regionLabel, labelClass, REGIONS } = usePrefs()
+const { regionLabel, labelClass, visibleRegions, columnTracks } = usePrefs()
 const scrollToTop = useScrollToTop()
 
 const list = ref<HTMLElement>()
@@ -20,9 +20,9 @@ function turnTo(page: number) {
       class="row-grid sticky top-0 z-10 items-center gap-2 border-b border-rule bg-paper px-2 py-2 sm:gap-3 sm:px-5"
     >
       <span />
-      <div class="grid grid-cols-4">
+      <div class="grid" :style="{ gridTemplateColumns: columnTracks }">
         <span
-          v-for="region in REGIONS"
+          v-for="region in visibleRegions"
           :key="region"
           class="text-center eyebrow !text-$c-ink-soft"
           :title="t(`region.${region}.full`)"
diff --git a/app/components/FilterBar.vue b/app/components/FilterBar.vue
index 70a5e73..95f9506 100644
--- a/app/components/FilterBar.vue
+++ b/app/components/FilterBar.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import { LISTING_OPTIONS } from '~~/shared/listings.ts'
-import { REGIONS } from '~~/shared/types.ts'
+import { listingOptionsFor } from '~~/shared/listings.ts'
 import {
   injectChars,
-  PATTERNS_BY_VARIETY,
   type Dimension,
   type SortKey,
 } from '~/composables/chars.ts'
 
 const chars = injectChars()
 const { t } = useT()
-const { regionLabel, labelClass } = usePrefs()
+const { regionLabel, labelClass, visibleColumns, visibleRegions } = usePrefs()
 
 // Every label has to be computed, not built once: t() reads the active locale
 // and the reader can change it after the component is set up
@@ -30,14 +28,16 @@ const sorts = computed<{ value: SortKey; label: string }[]>(() =>
 
 /** Only show patterns that actually occur in the chosen dimension. */
 const varieties = computed(() =>
-  PATTERNS_BY_VARIETY.map(({ variety, patterns }) => ({
-    variety,
-    label:
-      variety === 1
-        ? t('filter.identical')
-        : t('filter.variety', { n: variety }),
-    patterns: patterns.filter((p) => p in chars.counts.value),
-  })).filter((group) => group.patterns.length > 0),
+  chars.patternGroups.value
+    .map(({ variety, patterns }) => ({
+      variety,
+      label:
+        variety === 1
+          ? t('filter.identical', { n: hanNumber(visibleRegions.value.length) })
+          : t('filter.variety', { n: variety }),
+      patterns: patterns.filter((p) => p in chars.counts.value),
+    }))
+    .filter((group) => group.patterns.length > 0),
 )
 
 const [lo, hi] = chars.strokeBounds
@@ -60,7 +60,7 @@ const strokeHigh = computed({
 
 /** Tier labels live under char.tierCn and friends; old forms use region.old. */
 const listingOptions = computed(() =>
-  LISTING_OPTIONS.map((entry) => ({
+  listingOptionsFor(visibleColumns.value).map((entry) => ({
     ...entry,
     label:
       entry.kind === 'old'
@@ -144,7 +144,7 @@ function toggleRegion(region: string) {
         <span class="eyebrow">{{ t('filter.common') }}</span>
         <div class="flex gap-1">
           <button
-            v-for="region in REGIONS"
+            v-for="region in visibleRegions"
             :key="region"
             type="button"
             class="size-7 border rounded-md text-xs transition-colors duration-150 focus-ring"
@@ -196,9 +196,10 @@ function toggleRegion(region: string) {
     </div>
 
     <!--
-      The fifteen partitions, grouped by how many distinct forms they describe.
-      The chip is the same run graphic used under the four cells, so no wording
-      is needed: "CN+HK | TW | JP" reads slower than seeing three runs.
+      Every partition the columns on show can describe -- fifteen of them for
+      four columns, five for three -- grouped by how many distinct forms each
+      one names. The chip is the same run graphic used under the cells, so no
+      wording is needed: "CN+HK | TW | JP" reads slower than seeing three runs.
     -->
     <div class="flex flex-col gap-2">
       <div
diff --git a/app/components/HeroOverprint.vue b/app/components/HeroOverprint.vue
index c87d66a..4b2cb27 100644
--- a/app/components/HeroOverprint.vue
+++ b/app/components/HeroOverprint.vue
@@ -1,21 +1,31 @@
 <script setup lang="ts">
+import { projectSignature } from '~~/shared/row.ts'
 import { REGIONS, type CharRow } from '~~/shared/types.ts'
 
 const props = defineProps<{ row: CharRow }>()
 
 const { t, list } = useT()
-const { regionLabel, labelClass, outlineOn } = usePrefs()
+const { regionLabel, labelClass, outlineOn, visibleRegions, regionIndices } =
+  usePrefs()
 const split = ref(false)
 
-/** One persistent node per region. CSS moves these same four nodes between the
+/**
+ * Groups over the regions on show, so the opening claim counts what the reader
+ * is actually being shown rather than the four this row happens to carry.
+ */
+const groups = computed(() =>
+  projectSignature(props.row.glyph, regionIndices.value),
+)
+
+/** One persistent node per region. CSS moves these same nodes between the
  * overprint and the separated row, so toggling never needs a DOM swap. */
 const forms = computed(() =>
-  REGIONS.map((region, index) => ({
+  visibleRegions.value.map((region, position) => ({
     region,
-    char: props.row.chars[index]!,
-    group: Number(props.row.glyph[index]),
+    char: props.row.chars[REGIONS.indexOf(region)]!,
+    group: Number(groups.value[position]),
     /** Shared forms only draw once while stacked, then duplicate when split. */
-    lead: props.row.glyph.indexOf(props.row.glyph[index]!) === index,
+    lead: groups.value.indexOf(groups.value[position]!) === position,
   })),
 )
 
@@ -33,6 +43,14 @@ const label = computed(() =>
   ),
 )
 
+/** The places on show, named in full: what the standfirst enumerates. */
+const places = computed(() =>
+  list(
+    visibleRegions.value.map((region) => t(`region.${region}.full`)),
+    'narrow',
+  ),
+)
+
 function toggle() {
   split.value = !split.value
 }
@@ -42,6 +60,7 @@ function toggle() {
   <section
     class="hero grid gap-8 sm:grid-cols-[auto_minmax(0,1fr)] sm:items-center"
     :class="{ split, outlined: outlineOn }"
+    :style="{ '--n': forms.length }"
   >
     <div class="hero-stage">
       <div class="hero-plane" :title="label" :aria-label="label" role="img">
@@ -51,6 +70,7 @@ function toggle() {
           class="hero-form"
           :class="{ duplicate: !form.lead }"
           :style="{
+            '--i': index,
             '--layer-color': colorOf(form.group),
             '--arrival-delay': `${index * 90}ms`,
           }"
@@ -67,12 +87,16 @@ function toggle() {
     </div>
 
     <div class="max-w-lg">
-      <h2 class="text-2xl leading-snug sm:text-3xl">{{ t('hero.title') }}</h2>
+      <h2 class="text-2xl leading-snug sm:text-3xl">
+        {{ t('hero.title', { n: hanNumber(groupCount) }) }}
+      </h2>
       <p class="mt-3 text-sm text-soft leading-relaxed sm:text-base">
-        {{ t('hero.body') }}
+        {{ t('hero.body', { regions: places }) }}
       </p>
 
+      <!-- Nothing to pull apart when a single column is left on show -->
       <button
+        v-if="forms.length > 1"
         type="button"
         class="mt-4 inline-flex items-center gap-1.5 border border-rule rounded-md px-3 py-1.5 text-sm text-soft transition-colors duration-150 hover:border-ink/25 hover:text-ink focus-ring"
         :aria-pressed="split"
@@ -92,6 +116,16 @@ function toggle() {
 .hero {
   --hero-duration: 420ms;
   --hero-ease: cubic-bezier(0.32, 0.72, 0, 1);
+
+  /*
+   * Geometry of the separated row, sized from the number of columns on show:
+   * hiding a region narrows the row rather than leaving a hole where it stood.
+   * --stack-scale blows one slot up to the 11rem the stacked plane occupies.
+   */
+  --form-size: 3.25rem;
+  --form-step: 3.5rem;
+  --stack-scale: 3.384615;
+  --split-width: calc(var(--form-step) * (var(--n) - 1) + var(--form-size));
 }
 
 /* Padding and minimum height preserve the original 176px overprint's exact
@@ -115,13 +149,13 @@ function toggle() {
 }
 
 .hero-form {
-  --split-x: 0rem;
+  --split-x: calc((var(--i) - (var(--n) - 1) / 2) * var(--form-step));
 
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 3.25rem;
-  height: 3.25rem;
+  width: var(--form-size);
+  height: var(--form-size);
   color: var(--layer-color);
   mix-blend-mode: var(--overprint-blend);
   transform: translate3d(-50%, -50%, 0);
@@ -135,30 +169,14 @@ function toggle() {
   opacity: 0;
 }
 
-.hero-form:nth-child(1) {
-  --split-x: -5.25rem;
-}
-
-.hero-form:nth-child(2) {
-  --split-x: -1.75rem;
-}
-
-.hero-form:nth-child(3) {
-  --split-x: 1.75rem;
-}
-
-.hero-form:nth-child(4) {
-  --split-x: 5.25rem;
-}
-
 .hero-glyph {
   display: grid;
   width: 100%;
   height: 100%;
   place-items: center;
-  font-size: 3.25rem;
+  font-size: var(--form-size);
   line-height: 1;
-  transform: scale(3.384615);
+  transform: scale(var(--stack-scale));
   transform-origin: center;
   transition: transform var(--hero-duration) var(--hero-ease);
   animation: hero-arrive 620ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
@@ -178,7 +196,7 @@ function toggle() {
 }
 
 .hero.split .hero-plane {
-  width: 13.75rem;
+  width: var(--split-width);
 }
 
 .hero.split .hero-form {
@@ -213,44 +231,21 @@ function toggle() {
 }
 
 @media (min-width: 640px) {
+  .hero {
+    --form-size: 4.5rem;
+    --form-step: 5.25rem;
+    --stack-scale: 2.444444;
+  }
+
   .hero-stage {
     width: 12rem;
     justify-content: flex-start;
     transition: width var(--hero-duration) var(--hero-ease);
   }
 
+  /* The stage carries the plane plus its own 0.5rem of padding on each side. */
   .hero.split .hero-stage {
-    width: 21.25rem;
-  }
-
-  .hero.split .hero-plane {
-    width: 20.25rem;
-  }
-
-  .hero-form {
-    width: 4.5rem;
-    height: 4.5rem;
-  }
-
-  .hero-form:nth-child(1) {
-    --split-x: -7.875rem;
-  }
-
-  .hero-form:nth-child(2) {
-    --split-x: -2.625rem;
-  }
-
-  .hero-form:nth-child(3) {
-    --split-x: 2.625rem;
-  }
-
-  .hero-form:nth-child(4) {
-    --split-x: 7.875rem;
-  }
-
-  .hero-glyph {
-    font-size: 4.5rem;
-    transform: scale(2.444444);
+    width: calc(var(--split-width) + 1rem);
   }
 }
 
diff --git a/app/components/OptionsMenu.vue b/app/components/OptionsMenu.vue
index 9370f96..f10e948 100644
--- a/app/components/OptionsMenu.vue
+++ b/app/components/OptionsMenu.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
 import { localeName, type Locale } from '~/locales/index.ts'
 const { t } = useT()
-const { emojiFlags, outline } = usePrefs()
+const {
+  emojiFlags,
+  outline,
+  regionLabel,
+  labelClass,
+  COLUMNS,
+  columnShown,
+  columnLocked,
+  toggleColumn,
+} = usePrefs()
 const { locale, choose, locales } = useLocaleChoice()
 const languages = locales.map((code) => ({ code, label: localeName(code) }))
 
@@ -77,6 +86,49 @@ onKeyStroke('Escape', () => (open.value = false))
             }}</span>
           </span>
         </label>
+
+        <!--
+          Which columns are compared at all. Same chip as the filter bar, but
+          not the same state: down there the exceptional thing is a filter being
+          on, so selection is a filled slab. Here every column starts on, so the
+          exceptional thing is one being off -- and a chip that is off simply
+          fades. That also keeps a solid ink field from ever landing behind a
+          flag, where the emoji's own colors fight it.
+        -->
+        <div class="mt-3 border-t border-rule pt-3">
+          <span class="text-sm text-ink font-medium">{{
+            t('options.columns')
+          }}</span>
+          <span class="mt-1 block text-xs text-soft">{{
+            t('options.columnsHint')
+          }}</span>
+          <div class="mt-2 flex flex-wrap justify-center gap-1.5">
+            <button
+              v-for="column in COLUMNS"
+              :key="column"
+              type="button"
+              class="h-7 flex items-center gap-1.5 border rounded-md px-2 text-xs transition duration-150 disabled:cursor-not-allowed focus-ring"
+              :class="
+                columnShown(column)
+                  ? 'border-ink/35 bg-paper text-ink'
+                  : 'border-rule bg-sunk text-mute opacity-55 hover:opacity-85'
+              "
+              :disabled="columnLocked(column)"
+              :title="
+                columnLocked(column)
+                  ? t('options.columnsLast')
+                  : t(`region.${column}.full`)
+              "
+              :aria-pressed="columnShown(column)"
+              @click="toggleColumn(column)"
+            >
+              <span :class="labelClass">{{
+                regionLabel(column === 'old' ? 'jp' : column)
+              }}</span>
+              <span v-if="column === 'old'">{{ t('region.old.short') }}</span>
+            </button>
+          </div>
+        </div>
       </div>
     </Transition>
   </div>
diff --git a/app/components/OverprintChar.vue b/app/components/OverprintChar.vue
index c7bcf6f..cbe5a38 100644
--- a/app/components/OverprintChar.vue
+++ b/app/components/OverprintChar.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
-import { fontRegionOf } from '~~/shared/row.ts'
-import { COLUMNS, REGIONS, type CharRow, type Column } from '~~/shared/types.ts'
+import {
+  fontRegionOf,
+  glyphSignature,
+  projectSignature,
+} from '~~/shared/row.ts'
+import {
+  COLUMNS,
+  REGIONS,
+  type CharRow,
+  type Column,
+  type Region,
+} from '~~/shared/types.ts'
 
 const props = withDefaults(
   defineProps<{
@@ -29,6 +39,28 @@ const props = withDefaults(
   },
 )
 
+const { list } = useT()
+const { outlineOn, visibleColumns, visibleRegions } = usePrefs()
+
+/**
+ * The columns this stack is numbered against: everything the reader keeps on
+ * show that the row actually has. `only` narrows what gets drawn but not the
+ * numbering, so the colors still line up with a table showing every column.
+ */
+const basis = computed(() =>
+  (props.withOld ? visibleColumns.value : visibleRegions.value).filter(
+    (column) => column !== 'old' || props.row.old,
+  ),
+)
+
+/** Group per basis column, renumbered over the columns on show. */
+const groups = computed(() =>
+  projectSignature(
+    glyphSignature(props.row),
+    basis.value.map((column) => COLUMNS.indexOf(column)),
+  ),
+)
+
 /**
  * One layer per group, not per region. Regions in a group draw the identical
  * shape, so stacking them twice would just make that group darker than the
@@ -39,26 +71,22 @@ const layers = computed(() => {
     number,
     { char: string; region: string; group: number }
   >()
-  const allowed = props.only ?? COLUMNS
-  for (const [index, digit] of [...props.row.glyph].entries()) {
+  for (const [position, column] of basis.value.entries()) {
+    if (props.only && !props.only.includes(column)) continue
+    const group = Number(groups.value[position])
+    if (seen.has(group)) continue
+    if (column === 'old') {
+      // The kyujitai is Japan's own, so Japan's font draws it
+      seen.set(group, { char: props.row.old!.char, region: 'jp', group })
+      continue
+    }
+    const index = REGIONS.indexOf(column as Region)
     const char = props.row.chars[index]
-    const group = Number(digit)
-    if (!char || seen.has(group) || !allowed.includes(REGIONS[index]!)) continue
-    seen.set(group, {
-      char,
-      region: fontRegionOf(props.row, index),
-      group,
-    })
+    if (!char) continue
+    seen.set(group, { char, region: fontRegionOf(props.row, index), group })
   }
-  // The kyujitai is Japan's own, so Japan's font draws it
-  const old = props.withOld ? props.row.old : undefined
-  if (old && allowed.includes('old') && !seen.has(old.glyph))
-    seen.set(old.glyph, { char: old.char, region: 'jp', group: old.glyph })
   return [...seen.values()]
 })
-
-const { list } = useT()
-const { outlineOn } = usePrefs()
 /** Read aloud in place of the stack, so the forms are enumerated for a locale
  * rather than punctuated by hand. */
 const label = computed(() =>
diff --git a/app/composables/chars.ts b/app/composables/chars.ts
index 924d8f6..8d8eecb 100644
--- a/app/composables/chars.ts
+++ b/app/composables/chars.ts
@@ -1,7 +1,7 @@
 import charsRaw from '~~/public/data/chars.json?raw'
-import { createListingMatcher } from '~~/shared/listings.ts'
+import { createListingMatcher, listingOptionsFor } from '~~/shared/listings.ts'
 import { plainReading } from '~~/shared/readings.ts'
-import { varietyOf } from '~~/shared/row.ts'
+import { projectSignature, varietyOf } from '~~/shared/row.ts'
 import {
   REGIONS,
   type CharRow,
@@ -9,6 +9,7 @@ import {
   type Region,
 } from '~~/shared/types.ts'
 import { isUnicodeScalarValue } from '~/utils/unicode.ts'
+import { useColumnVisibility } from './prefs.ts'
 import {
   asList,
   asOneOf,
@@ -73,28 +74,33 @@ const charIndex = ((): Map<string, number[]> => {
   return index
 })()
 
-/** A row's partition signature under the chosen comparison dimension. */
-export const signatureOf = (row: CharRow, dimension: Dimension): string =>
-  dimension === 'glyph' ? row.glyph : row.cp
-
-/** Group the 14 patterns by how many distinct ways of writing they describe.
+/**
+ * A row's partition signature under the chosen comparison dimension, read over
+ * the columns on show. Hiding a column repartitions what is left, so a row
+ * whose four regions ran CN | HK+TW | JP becomes a two-form row once Japan is
+ * out -- and lands under the chip that says so.
+ */
+export const signatureOf = (
+  row: CharRow,
+  dimension: Dimension,
+  columns: readonly number[],
+): string =>
+  projectSignature(dimension === 'glyph' ? row.glyph : row.cp, columns)
+
+/** Group patterns by how many distinct ways of writing they describe.
  * Run count is variety count, which is the real structure of the content. */
-export const PATTERNS_BY_VARIETY: { variety: number; patterns: string[] }[] =
-  (() => {
-    const all = new Set<string>()
-    for (const row of data.rows) {
-      all.add(row.glyph)
-      all.add(row.cp)
-    }
-    const groups = new Map<number, string[]>()
-    for (const pattern of [...all].toSorted()) {
-      const variety = varietyOf(pattern)
-      groups.set(variety, [...(groups.get(variety) ?? []), pattern])
-    }
-    return [...groups]
-      .toSorted((a, b) => a[0] - b[0])
-      .map(([variety, patterns]) => ({ variety, patterns }))
-  })()
+function byVariety(
+  patterns: Iterable<string>,
+): { variety: number; patterns: string[] }[] {
+  const groups = new Map<number, string[]>()
+  for (const pattern of [...patterns].toSorted()) {
+    const variety = varietyOf(pattern)
+    groups.set(variety, [...(groups.get(variety) ?? []), pattern])
+  }
+  return [...groups]
+    .toSorted((a, b) => a[0] - b[0])
+    .map(([variety, patterns]) => ({ variety, patterns }))
+}
 
 const CODEPOINT = /^u\+?([\da-f]{4,6})$/i
 
@@ -154,6 +160,12 @@ export const morphName = (key: string) =>
 export const HERO_ROW = rowsByKey.get('返')!
 
 export function useChars() {
+  const {
+    columns: visibleColumns,
+    regions: visibleRegions,
+    regionIndices,
+  } = useColumnVisibility()
+
   const asDimension = asOneOf(DIMENSIONS)
   const dimension = useQueryState(
     'd',
@@ -241,19 +253,37 @@ export function useChars() {
     return hits
   })
 
-  /** Everything except the pattern filter, so chip counts react to the rest. */
+  /** Choices whose column is still on show; the rest have nothing to narrow. */
+  const availableListings = computed(
+    () => new Set(listingOptionsFor(visibleColumns.value).map((o) => o.id)),
+  )
+
+  /**
+   * Everything except the pattern filter, so chip counts react to the rest.
+   *
+   * A hidden column takes its own controls off the page, so its share of the
+   * selection is left out of the match too -- rather than narrowing the list
+   * from behind a control the reader can no longer see. The selection itself
+   * is kept, and comes back with the column.
+   */
   const base = computed(() => {
     const hits = searchHits.value
     const [lo, hi] = strokes.value
     const wide = lo <= STROKE_BOUNDS[0] && hi >= STROKE_BOUNDS[1]
+    const shown = regionIndices.value
     const required = common.value
       .map((r) => REGIONS.indexOf(r as Region))
-      .filter((i) => i >= 0)
-    const matchesListings = createListingMatcher(tiers.value)
+      .filter((i) => shown.includes(i))
+    const matchesListings = createListingMatcher(
+      tiers.value.filter((id) => availableListings.value.has(id)),
+    )
 
     return data.rows.filter((row, index) => {
       if (hits && !hits.has(index)) return false
-      if (!wide && row.strokes.every((n) => !(n >= lo) || !(n <= hi)))
+      if (
+        !wide &&
+        shown.every((i) => !(row.strokes[i]! >= lo) || !(row.strokes[i]! <= hi))
+      )
         return false
       for (const i of required) if (!row.tier[i]) return false
       return matchesListings(row)
@@ -263,26 +293,48 @@ export function useChars() {
   const counts = computed(() => {
     const tally: Record<string, number> = {}
     for (const row of base.value) {
-      const signature = signatureOf(row, dimension.value)
+      const signature = signatureOf(row, dimension.value, regionIndices.value)
       tally[signature] = (tally[signature] ?? 0) + 1
     }
     return tally
   })
 
+  /**
+   * The partitions the chips offer. Four columns describe fifteen of them,
+   * three describe five, so the grid is rebuilt whenever a column goes.
+   */
+  const patternGroups = computed(() => {
+    const all = new Set<string>()
+    for (const row of data.rows)
+      for (const dim of DIMENSIONS)
+        all.add(signatureOf(row, dim, regionIndices.value))
+    return byVariety(all)
+  })
+
   const FREQ_LAST = Number.MAX_SAFE_INTEGER
+  /** How many of the columns on show list the character among their common. */
+  const listedIn = (row: CharRow) =>
+    regionIndices.value.filter((i) => row.tier[i]).length
+  /** The stroke count the row leads with, which is the first column on show. */
+  const leadStrokes = (row: CharRow) => row.strokes[regionIndices.value[0] ?? 0]
   const comparators: Record<SortKey, (a: CharRow, b: CharRow) => number> = {
     common: (a, b) =>
-      b.common - a.common || (a.freq ?? FREQ_LAST) - (b.freq ?? FREQ_LAST),
-    strokes: (a, b) => (a.strokes[0] || 99) - (b.strokes[0] || 99),
+      listedIn(b) - listedIn(a) ||
+      (a.freq ?? FREQ_LAST) - (b.freq ?? FREQ_LAST),
+    strokes: (a, b) => (leadStrokes(a) || 99) - (leadStrokes(b) || 99),
     cp: (a, b) => a.key.codePointAt(0)! - b.key.codePointAt(0)!,
     freq: (a, b) => (a.freq ?? FREQ_LAST) - (b.freq ?? FREQ_LAST),
   }
 
   const rows = computed(() => {
-    const chosen = new Set(patterns.value)
+    // A selection made against a different set of columns describes partitions
+    // that no longer exist; it waits, unapplied, until those columns return.
+    const chosen = new Set(
+      patterns.value.filter((p) => p.length === visibleRegions.value.length),
+    )
     const filtered = chosen.size
       ? base.value.filter((row) =>
-          chosen.has(signatureOf(row, dimension.value)),
+          chosen.has(signatureOf(row, dimension.value, regionIndices.value)),
         )
       : base.value
 
@@ -389,6 +441,7 @@ export function useChars() {
     canShowAll,
     style,
     counts,
+    patternGroups,
     dimension,
     patterns,
     sortKey,
diff --git a/app/composables/prefs.ts b/app/composables/prefs.ts
index c7dd0ab..4016e15 100644
--- a/app/composables/prefs.ts
+++ b/app/composables/prefs.ts
@@ -1,4 +1,4 @@
-import { REGIONS, type Region } from '~~/shared/types.ts'
+import { COLUMNS, REGIONS, type Column, type Region } from '~~/shared/types.ts'
 
 const FLAGS: Record<Region, string> = {
   cn: '🇨🇳',
@@ -7,6 +7,84 @@ const FLAGS: Record<Region, string> = {
   jp: '🇯🇵',
 }
 
+export const HIDDEN_KEY = 'hanji:hidden'
+
+const isColumn = (value: string): value is Column =>
+  (COLUMNS as readonly string[]).includes(value)
+
+/**
+ * Which columns take part in the comparison at all.
+ *
+ * A reader who never writes Japanese is not filtering Japan out of a result
+ * set -- they are saying the Japanese column is not one of the things being
+ * compared. So a hidden column leaves no cell, no chip and no group: the
+ * remaining forms are partitioned again among themselves, and two regions that
+ * only ever parted company through the hidden one now read as one form.
+ *
+ * Stored as what is hidden rather than what is shown, so the default is the
+ * whole comparison and a column added later starts out visible.
+ */
+export function useColumnVisibility() {
+  const hidden = useLocalStorage<string[]>(HIDDEN_KEY, [])
+
+  // Read on the client only: the prerendered HTML has to match what hydration
+  // produces, and localStorage is not available while prerendering.
+  const mounted = ref(false)
+  onMounted(() => (mounted.value = true))
+
+  const off = computed<Set<Column>>(() => {
+    if (!mounted.value) return new Set()
+    const chosen = new Set(hidden.value.filter(isColumn))
+    // A table with no columns compares nothing. A stored value that hides
+    // every region is unusable, so none of it is applied -- which keeps the
+    // toggles and what is drawn saying the same thing.
+    return REGIONS.every((region) => chosen.has(region)) ? new Set() : chosen
+  })
+
+  /** Columns on show, in CN-HK-TW-JP-old order. */
+  const columns = computed(() =>
+    COLUMNS.filter((column) => !off.value.has(column)),
+  )
+  const regions = computed(() =>
+    REGIONS.filter((region) => !off.value.has(region)),
+  )
+  /** The same regions as indices into REGIONS, which is how a Quad is read. */
+  const regionIndices = computed(() =>
+    regions.value.map((region) => REGIONS.indexOf(region)),
+  )
+  const showOld = computed(() => !off.value.has('old'))
+
+  /** Grid template for a row of cells, one track per region on show. */
+  const tracks = computed(
+    () => `repeat(${regions.value.length}, minmax(0, 1fr))`,
+  )
+
+  const shown = (column: Column) => !off.value.has(column)
+
+  /** The last region on show cannot go: something has to be compared. */
+  const locked = (column: Column) =>
+    column !== 'old' && shown(column) && regions.value.length === 1
+
+  function toggle(column: Column): void {
+    if (locked(column)) return
+    const chosen = new Set(off.value)
+    if (chosen.has(column)) chosen.delete(column)
+    else chosen.add(column)
+    hidden.value = COLUMNS.filter((entry) => chosen.has(entry))
+  }
+
+  return {
+    columns,
+    regions,
+    regionIndices,
+    tracks,
+    showOld,
+    shown,
+    locked,
+    toggle,
+  }
+}
+
 /**
  * Display preferences. These belong to the reader rather than to the result
  * set, so they live in localStorage and stay out of the URL.
@@ -39,6 +117,17 @@ export function usePrefs() {
 
   const outlineOn = computed(() => mounted.value && outline.value)
 
+  const {
+    columns: visibleColumns,
+    regions: visibleRegions,
+    regionIndices,
+    tracks: columnTracks,
+    showOld,
+    shown: columnShown,
+    locked: columnLocked,
+    toggle: toggleColumn,
+  } = useColumnVisibility()
+
   return {
     emojiFlags,
     flagsOn,
@@ -46,6 +135,14 @@ export function usePrefs() {
     outlineOn,
     regionLabel,
     labelClass,
-    REGIONS,
+    visibleColumns,
+    visibleRegions,
+    regionIndices,
+    columnTracks,
+    showOld,
+    columnShown,
+    columnLocked,
+    toggleColumn,
+    COLUMNS,
   }
 }
diff --git a/app/locales/ja-jp.ts b/app/locales/ja-jp.ts
index e62ac4d..752411d 100644
--- a/app/locales/ja-jp.ts
+++ b/app/locales/ja-jp.ts
@@ -15,8 +15,8 @@ export const jaJP: typeof zhCN = {
     old: { short: '旧字体', full: '日本の旧字体' },
   },
   hero: {
-    title: '一つの漢字、四つの字形',
-    body: '中国大陸、香港、台湾、日本。同じ漢字でも、地域によって書き方が異なることがあります。',
+    title: '一つの漢字、{n}つの字形',
+    body: '{regions}。同じ漢字でも、地域によって書き方が異なることがあります。',
     split: '分けて見る',
     merge: '重ねて見る',
   },
@@ -35,6 +35,10 @@ export const jaJP: typeof zhCN = {
     outline: '重ね表示で輪郭線を使う',
     outlineHint:
       '重ねた字形を輪郭線で表示します。画が一つに潰れにくくなり、違いが分かりやすくなります。',
+    columns: '比較する字形',
+    columnsHint:
+      '外した列は漢字表にも詳細ページにも表示されず、残った字形だけで改めてグループ分けします。',
+    columnsLast: '地域は少なくとも一つ残してください。',
   },
   style: {
     label: '書体',
@@ -58,7 +62,7 @@ export const jaJP: typeof zhCN = {
     pattern: '差異パターン',
     tier: '収録区分',
     variety: '{n}種類の字形',
-    identical: '4地域で同形',
+    identical: '{n}地域で同形',
     clear: '絞り込みを解除',
     matched: '{n}字',
   },
diff --git a/app/locales/zh-cn.ts b/app/locales/zh-cn.ts
index 4bcd195..a83cab5 100644
--- a/app/locales/zh-cn.ts
+++ b/app/locales/zh-cn.ts
@@ -13,8 +13,8 @@ export const zhCN = {
     old: { short: '旧字体', full: '日本旧字体' },
   },
   hero: {
-    title: '一个汉字四种写法',
-    body: '中国大陆、香港、台湾、日本，同一个字写出来常常不一样。',
+    title: '一个汉字{n}种写法',
+    body: '{regions}，同一个字写出来常常不一样。',
     split: '拆开看',
     merge: '叠回去',
   },
@@ -32,6 +32,9 @@ export const zhCN = {
     emojiHint: '把「中港台日」换成对应的旗帜符号。',
     outline: '叠印用空心字',
     outlineHint: '把叠在一起的字形改成描边，笔画不再糊成一团，分歧处更清楚。',
+    columns: '参与对照的字形',
+    columnsHint: '关掉的一列在字表和详情页都不再出现，剩下的字形重新分组。',
+    columnsLast: '至少要留一个地区。',
   },
   style: {
     label: '字体',
@@ -53,7 +56,7 @@ export const zhCN = {
     pattern: '差异模式',
     tier: '收录于',
     variety: '{n}种写法',
-    identical: '四地同形',
+    identical: '{n}地同形',
     clear: '清空筛选',
     matched: '{n}字',
   },
diff --git a/app/locales/zh-hk.ts b/app/locales/zh-hk.ts
index ef83cbe..fe4434d 100644
--- a/app/locales/zh-hk.ts
+++ b/app/locales/zh-hk.ts
@@ -15,8 +15,8 @@ export const zhHK: typeof zhCN = {
     old: { short: '舊字體', full: '日本舊字體' },
   },
   hero: {
-    title: '一個漢字四種寫法',
-    body: '中國大陸、香港、台灣、日本，同一個字寫出來常常不一樣。',
+    title: '一個漢字{n}種寫法',
+    body: '{regions}，同一個字寫出來常常不一樣。',
     split: '拆開看',
     merge: '疊回去',
   },
@@ -34,6 +34,9 @@ export const zhHK: typeof zhCN = {
     emojiHint: '把「中港台日」換成對應的旗幟符號。',
     outline: '疊印用空心字',
     outlineHint: '把疊在一起的字形改成描邊，筆畫不再糊成一團，分歧處更清楚。',
+    columns: '參與對照的字形',
+    columnsHint: '關掉的一列在字表和詳情頁都不再出現，剩下的字形重新分組。',
+    columnsLast: '至少要留一個地區。',
   },
   style: {
     label: '字體',
@@ -55,7 +58,7 @@ export const zhHK: typeof zhCN = {
     pattern: '差異模式',
     tier: '收錄於',
     variety: '{n}種寫法',
-    identical: '四地同形',
+    identical: '{n}地同形',
     clear: '清除篩選',
     matched: '{n}字',
   },
diff --git a/app/locales/zh-tw.ts b/app/locales/zh-tw.ts
index 75462f3..61204f5 100644
--- a/app/locales/zh-tw.ts
+++ b/app/locales/zh-tw.ts
@@ -15,8 +15,8 @@ export const zhTW: typeof zhCN = {
     old: { short: '舊字體', full: '日本舊字體' },
   },
   hero: {
-    title: '一個漢字四種寫法',
-    body: '中國大陸、香港、臺灣、日本，同一個字寫出來常常不一樣。',
+    title: '一個漢字{n}種寫法',
+    body: '{regions}，同一個字寫出來常常不一樣。',
     split: '拆開看',
     merge: '疊回去',
   },
@@ -34,6 +34,9 @@ export const zhTW: typeof zhCN = {
     emojiHint: '把「中港臺日」換成對應的旗幟符號。',
     outline: '疊印用空心字',
     outlineHint: '把疊在一起的字形改成描邊，筆畫不再糊成一團，分歧處更清楚。',
+    columns: '參與對照的字形',
+    columnsHint: '關掉的一列在字表和詳情頁都不再出現，剩下的字形重新分組。',
+    columnsLast: '至少要留一個地區。',
   },
   style: {
     label: '字體',
@@ -55,7 +58,7 @@ export const zhTW: typeof zhCN = {
     pattern: '差異模式',
     tier: '收錄於',
     variety: '{n}種寫法',
-    identical: '四地同形',
+    identical: '{n}地同形',
     clear: '清除篩選',
     matched: '{n}字',
   },
diff --git a/app/pages/char/[key].vue b/app/pages/char/[key].vue
index 2095e02..5c6fc7c 100644
--- a/app/pages/char/[key].vue
+++ b/app/pages/char/[key].vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { dictGroups } from '~~/shared/links.ts'
-import { fontRegionOf } from '~~/shared/row.ts'
+import {
+  fontRegionOf,
+  glyphSignature,
+  projectSignature,
+} from '~~/shared/row.ts'
 import { COLUMNS, REGIONS, type Column } from '~~/shared/types.ts'
 import {
   charPath,
@@ -17,7 +21,7 @@ definePageMeta({ layout: 'plain', middleware: 'char-alias' })
 
 const route = useRoute()
 const { t, list } = useT()
-const { regionLabel, labelClass } = usePrefs()
+const { regionLabel, labelClass, visibleColumns, visibleRegions } = usePrefs()
 
 const key = computed(() => decodeURIComponent(String(route.params.key)))
 const row = computed(() => rowsByKey.get(key.value))
@@ -45,9 +49,13 @@ const hex = (char: string) =>
  * where there is one. The kyujitai is compared alongside the rest rather than
  * noted underneath, because it is usually the very character Hong Kong and
  * Taiwan still write, and that reads off the table itself.
+ *
+ * A column the reader has switched off is not on offer at all -- it leaves no
+ * cell to tick and no group to count, so what remains is partitioned among
+ * itself.
  */
 const columns = computed<Column[]>(() =>
-  row.value?.old ? [...COLUMNS] : [...REGIONS],
+  visibleColumns.value.filter((column) => column !== 'old' || row.value?.old),
 )
 
 /**
@@ -58,7 +66,7 @@ const columns = computed<Column[]>(() =>
  */
 const picked = ref<Column[]>([...columns.value])
 const hoveredGroup = ref<number>()
-watch(key, () => {
+watch([key, columns], () => {
   picked.value = [...columns.value]
   hoveredGroup.value = undefined
 })
@@ -84,9 +92,21 @@ function toggle(group: Column[]) {
 /** Where the reader came from, so returning keeps their filters and place. */
 const backTo = computed(() => listPlace.value?.fullPath ?? '/')
 
+/**
+ * Glyph groups renumbered over the columns on show, so the accents start at
+ * the first one and the stack beside the table is colored the same way.
+ */
+const groups = computed(() =>
+  projectSignature(
+    glyphSignature(row.value!),
+    columns.value.map((column) => COLUMNS.indexOf(column)),
+  ),
+)
+
 const cells = computed(() =>
-  columns.value.map((column) => {
+  columns.value.map((column, position) => {
     const here = row.value!
+    const group = Number(groups.value[position])
     if (column === 'old') {
       const old = here.old!
       return {
@@ -99,7 +119,7 @@ const cells = computed(() =>
         strokes: String(old.strokes || '—'),
         tier: 0,
         listing: undefined,
-        group: old.glyph,
+        group,
       }
     }
     const index = REGIONS.indexOf(column)
@@ -112,7 +132,7 @@ const cells = computed(() =>
       strokes: String(here.strokes[index] || '—'),
       tier: here.tier[index]!,
       listing: here.listing[index]!,
-      group: Number(here.glyph[index]),
+      group,
     }
   }),
 )
@@ -230,26 +250,24 @@ const alsoSee = computed(() => {
       out.push({ key, text })
   }
 
-  // A column of this row that heads a group of its own
-  for (const [index, char] of here.chars.entries())
+  // A column of this row that heads a group of its own. Every one of these
+  // names a region, so a region off the page has nothing to say here either.
+  for (const region of visibleRegions.value) {
+    const char = here.chars[REGIONS.indexOf(region)]!
     if (rowsByKey.has(char))
-      add(
-        char,
-        t('char.alsoOut', {
-          region: t(`region.${REGIONS[index]}.full`),
-          char,
-        }),
-      )
+      add(char, t('char.alsoOut', { region: t(`region.${region}.full`), char }))
+  }
 
   // Groups that write one of their columns with this row's key
   for (const other of rowsNaming(here.key)) {
     const index = other.chars.indexOf(here.key)
-    if (index >= 0)
+    const region = REGIONS[index]
+    if (region && visibleRegions.value.includes(region))
       add(
         other.key,
         t('char.alsoIn', {
           char: other.key,
-          region: t(`region.${REGIONS[index]}.full`),
+          region: t(`region.${region}.full`),
         }),
       )
   }
@@ -261,12 +279,16 @@ const alsoSee = computed(() => {
     { chars: Set<string>; regions: Set<(typeof REGIONS)[number]> }
   >()
   for (const relation of here.uncertain ?? []) {
+    const evidence = relation.regions.filter((region) =>
+      visibleRegions.value.includes(region),
+    )
+    if (evidence.length === 0) continue
     const group = uncertain.get(relation.key) ?? {
       chars: new Set<string>(),
       regions: new Set<(typeof REGIONS)[number]>(),
     }
     group.chars.add(relation.char)
-    for (const region of relation.regions) group.regions.add(region)
+    for (const region of evidence) group.regions.add(region)
     uncertain.set(relation.key, group)
   }
   for (const [related, relation] of uncertain)
@@ -284,7 +306,7 @@ const alsoSee = computed(() => {
 })
 
 /** One row of references per character the group is written with. */
-const references = computed(() => dictGroups(row.value!))
+const references = computed(() => dictGroups(row.value!, visibleRegions.value))
 
 /**
  * Receives the morph from the list. The name goes on whatever the thumbnail
diff --git a/app/utils/han-number.ts b/app/utils/han-number.ts
new file mode 100644
index 0000000..8104aed
--- /dev/null
+++ b/app/utils/han-number.ts
@@ -0,0 +1,12 @@
+/**
+ * A small count as a Han numeral.
+ *
+ * Every interface language here is written in Han script and spells these the
+ * same way, so the numeral is a formatting detail rather than a message of its
+ * own: 三地同形 reads in Chinese exactly as 三つの字形 reads in Japanese.
+ * Anything past the handful of columns a row can have falls back to figures.
+ */
+const HAN_DIGITS = ['〇', '一', '二', '三', '四', '五']
+
+export const hanNumber = (value: number): string =>
+  HAN_DIGITS[value] ?? String(value)
diff --git a/scripts/tests/columns.test.ts b/scripts/tests/columns.test.ts
new file mode 100644
index 0000000..df54e85
--- /dev/null
+++ b/scripts/tests/columns.test.ts
@@ -0,0 +1,105 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import { formsOf } from '../../shared/links.ts'
+import { listingOptionsFor } from '../../shared/listings.ts'
+import {
+  glyphSignature,
+  projectSignature,
+  varietyOf,
+} from '../../shared/row.ts'
+import { COLUMNS, REGIONS } from '../../shared/types.ts'
+import { DATA_DIR } from '../sources.ts'
+import type { CharRow, CharsData, Column, Region } from '../../shared/types.ts'
+
+const data: CharsData = JSON.parse(
+  readFileSync(join(DATA_DIR, 'chars.json'), 'utf8'),
+)
+const rows = new Map(data.rows.map((row) => [row.key, row]))
+const row = (key: string): CharRow => {
+  const found = rows.get(key)
+  if (!found) throw new Error(`${key} is not listed`)
+  return found
+}
+
+/** Indices of the regions left when `hidden` are switched off. */
+const without = (...hidden: Region[]) =>
+  REGIONS.filter((region) => !hidden.includes(region)).map((region) =>
+    REGIONS.indexOf(region),
+  )
+
+const ALL_COLUMNS = [...REGIONS].map((region) => REGIONS.indexOf(region))
+
+describe('reading a partition over the columns on show', () => {
+  it('leaves a full row exactly as the data ships it', () => {
+    for (const key of ['返', '骨', '海', '的'])
+      expect(projectSignature(row(key).glyph, ALL_COLUMNS)).toBe(row(key).glyph)
+  })
+
+  it('renumbers from the first column still on show', () => {
+    // 骨 runs CN | HK | TW | HK. Drop the mainland and Hong Kong leads.
+    expect(projectSignature(row('骨').glyph, without('cn'))).toBe('010')
+    expect(varietyOf(projectSignature(row('骨').glyph, without('cn')))).toBe(2)
+  })
+
+  it('merges regions that only ever differed through a hidden column', () => {
+    // 海 is written one way everywhere but Japan, so hiding Japan leaves one
+    // form rather than a row of three cells and a gap.
+    expect(row('海').glyph).toBe('0001')
+    expect(projectSignature(row('海').glyph, without('jp'))).toBe('000')
+  })
+
+  it('keeps a genuine disagreement when an unrelated column goes', () => {
+    expect(projectSignature(row('返').glyph, without('jp'))).toBe('012')
+  })
+
+  it('compares the kyujitai on the same numbering as the regions', () => {
+    // 國: the mainland and Japan write 国, Hong Kong and Taiwan write 國 --
+    // and so does the Japanese old form.
+    expect(glyphSignature(row('國'))).toBe('01101')
+    const columns = (...keep: Column[]) =>
+      keep.map((column) => COLUMNS.indexOf(column))
+    expect(
+      projectSignature(glyphSignature(row('國')), columns('hk', 'tw', 'old')),
+    ).toBe('000')
+    expect(
+      projectSignature(glyphSignature(row('國')), columns('cn', 'old')),
+    ).toBe('01')
+  })
+
+  it('has nothing to say about a row with no old form', () => {
+    expect(glyphSignature(row('返'))).toBe(row('返').glyph)
+  })
+})
+
+describe('controls that belong to a hidden column', () => {
+  it('offers every listing choice while every column is on show', () => {
+    expect(listingOptionsFor([...COLUMNS])).toHaveLength(9)
+  })
+
+  it('drops the levels of a region that is off the page', () => {
+    const ids = listingOptionsFor(['cn', 'hk', 'tw', 'old']).map((o) => o.id)
+    expect(ids).not.toContain('jp1')
+    expect(ids).not.toContain('jp2')
+    // The old forms are a column of their own and stay on their own terms.
+    expect(ids).toContain('old')
+  })
+
+  it('drops the old-form choice with the old-form column', () => {
+    expect(listingOptionsFor([...REGIONS]).map((o) => o.id)).not.toContain(
+      'old',
+    )
+  })
+})
+
+describe('outside references follow the columns on show', () => {
+  it('lists every form by default', () => {
+    expect(formsOf(row('國')).map((form) => form.char)).toContain('国')
+  })
+
+  it('leaves out a form only a hidden region writes', () => {
+    expect(
+      formsOf(row('國'), ['hk', 'tw']).map((form) => form.char),
+    ).not.toContain('国')
+  })
+})
diff --git a/shared/links.ts b/shared/links.ts
index 8b00392..9a4ac6f 100644
--- a/shared/links.ts
+++ b/shared/links.ts
@@ -30,18 +30,24 @@ export interface Form {
  * carry the variants as entries of their own. One that does not simply
  * answers nothing, which costs the reader a click and no more.
  */
-export function formsOf(row: CharRow): Form[] {
+export function formsOf(
+  row: CharRow,
+  /** Regions to draw the columns from; a reader may have hidden some. */
+  regions: readonly Region[] = REGIONS,
+): Form[] {
   const out: Form[] = []
   const add = (char: string, font: Region) => {
     if (char && out.every((form) => form.char !== char))
       out.push({ char, font })
   }
-  for (const [index] of row.chars.entries())
+  for (const region of regions) {
+    const index = REGIONS.indexOf(region)
     add(row.chars[index]!, fontRegionOf(row, index))
+  }
   // The key and the names it merged with are not always a column of their own
   add(row.key, 'cn')
   for (const name of row.aka ?? []) add(name, 'cn')
-  for (const region of REGIONS)
+  for (const region of regions)
     for (const entry of row.alternatives?.[region] ?? [])
       add(entry.char, region)
   return out
@@ -101,6 +107,12 @@ export function dictLinks(char: string): DictLink[] {
 }
 
 /** Every character the group is written with, each with its references. */
-export function dictGroups(row: CharRow): { form: Form; links: DictLink[] }[] {
-  return formsOf(row).map((form) => ({ form, links: dictLinks(form.char) }))
+export function dictGroups(
+  row: CharRow,
+  regions?: readonly Region[],
+): { form: Form; links: DictLink[] }[] {
+  return formsOf(row, regions).map((form) => ({
+    form,
+    links: dictLinks(form.char),
+  }))
 }
diff --git a/shared/listings.ts b/shared/listings.ts
index 6e8b204..0c79871 100644
--- a/shared/listings.ts
+++ b/shared/listings.ts
@@ -1,4 +1,4 @@
-import { REGIONS, type CharRow, type Region } from './types.ts'
+import { REGIONS, type CharRow, type Column, type Region } from './types.ts'
 
 export type ListingOption =
   | { id: string; kind: 'tier'; region: Region; tier: number }
@@ -22,6 +22,19 @@ export const LISTING_OPTIONS: readonly ListingOption[] = [
   { id: 'old', kind: 'old', region: 'jp' },
 ]
 
+/**
+ * The choices worth offering for a given set of columns. A region the reader
+ * has hidden has no forms on the page, so its listing levels have nothing left
+ * to narrow.
+ */
+export function listingOptionsFor(
+  columns: readonly Column[],
+): readonly ListingOption[] {
+  return LISTING_OPTIONS.filter((option) =>
+    columns.includes(option.kind === 'old' ? 'old' : option.region),
+  )
+}
+
 const OPTIONS_BY_ID = new Map(
   LISTING_OPTIONS.map((option) => [option.id, option]),
 )
diff --git a/shared/row.ts b/shared/row.ts
index a4a3413..801c818 100644
--- a/shared/row.ts
+++ b/shared/row.ts
@@ -56,3 +56,36 @@ export function segmentsOf(signature: string): Segment[] {
 export function varietyOf(signature: string): number {
   return new Set(signature).size
 }
+
+/**
+ * The glyph partition over every column a row offers: the four regions, then
+ * Japan's pre-reform form where the row has one. The kyujitai is numbered on
+ * the same scale as the regions, so a fifth digit compares against the four.
+ */
+export function glyphSignature(row: CharRow): string {
+  return row.old ? row.glyph + row.old.glyph : row.glyph
+}
+
+/**
+ * A signature restricted to the columns on show, renumbered so groups are
+ * named by first appearance among them.
+ *
+ * Dropping a column is not enough on its own: "0122" with the first column
+ * hidden reads "122", which no chip matches and which colors the survivors
+ * from the second accent onward. Renumbering makes it "011" -- the same
+ * partition every other three-column row of that shape carries.
+ */
+export function projectSignature(
+  signature: string,
+  columns: readonly number[],
+): string {
+  const groups = new Map<string, number>()
+  let out = ''
+  for (const index of columns) {
+    const digit = signature[index]
+    if (digit === undefined) continue
+    if (!groups.has(digit)) groups.set(digit, groups.size)
+    out += groups.get(digit)
+  }
+  return out
+}
-- 
2.51.2