From 7c84f7a91643f5773bc00f53c0ded09c3f8f2b69 Mon Sep 17 00:00:00 2001
From: Kevin Deng <sxzz@sxzz.moe>
Date: Mon, 24 Aug 2026 04:20:33 +0900
Subject: [PATCH] Improve overprint color separation and density handling (#62)

---
 .gitignore                       |  3 ++
 app/components/HeroOverprint.vue | 27 +++++++++++++---
 app/components/LitRegions.vue    |  7 +++-
 app/components/OverprintChar.vue | 34 +++++++++++++-------
 app/locales/ja-jp.ts             |  2 +-
 app/locales/ko-kr.ts             |  2 +-
 app/locales/zh-cn.ts             |  3 +-
 app/locales/zh-hk.ts             |  3 +-
 app/locales/zh-tw.ts             |  3 +-
 app/styles/overprint.css         | 55 ++++++++++++++++----------------
 app/styles/vars.css              | 48 ++++++++++++++--------------
 app/utils/overprint.ts           | 34 ++++++++++++++++++++
 12 files changed, 147 insertions(+), 74 deletions(-)
 create mode 100644 app/utils/overprint.ts

diff --git a/.gitignore b/.gitignore
index d0bf8a9..2f78989 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,9 @@ dist
 .DS_Store
 .eslintcache
 
+# Local Impeccable live-design session state.
+.impeccable/live/
+
 # Cached downloads of external sources, verified against data/sources.lock.json
 data/raw/
 
diff --git a/app/components/HeroOverprint.vue b/app/components/HeroOverprint.vue
index 247776b..3c0862b 100644
--- a/app/components/HeroOverprint.vue
+++ b/app/components/HeroOverprint.vue
@@ -11,6 +11,7 @@ import {
   useMorphingKey,
   useMorphTo,
 } from '~/composables/chars.ts'
+import { overprintColor, overprintOpacity } from '~/utils/overprint.ts'
 
 const { t, list, locale } = useT()
 const { flagsOn, outlineOn, visibleRegions, regionIndices } = usePrefs()
@@ -94,6 +95,20 @@ const groupCount = computed(
   () => new Set(forms.value.map((form) => form.group)).size,
 )
 
+/**
+ * A uniform character needs no color encoding and remains ordinary ink. Once
+ * forms differ, every distinct shape takes an equal color from the same fixed
+ * five-ink sequence; dense rows lower all plates together rather than
+ * favoring one of them.
+ */
+const plateOpacity = computed(() =>
+  groupCount.value === 1
+    ? 1
+    : overprintOpacity(shown.value, visibleRegions.value),
+)
+const plateColor = (group: number) =>
+  groupCount.value === 1 ? 'var(--c-ink)' : overprintColor(group)
+
 /**
  * Walking the forms is the stacked view answering "how many are in here". Once
  * they are separated the row answers that by itself, and lighting one of them
@@ -223,7 +238,7 @@ async function openFromField(event: KeyboardEvent) {
 <template>
   <section
     class="hero grid gap-8 sm:grid-cols-[auto_minmax(0,1fr)] sm:items-center"
-    :class="{ split, outlined: outlineOn }"
+    :class="{ split }"
     :style="{ '--n': forms.length }"
   >
     <div class="hero-stage">
@@ -236,11 +251,13 @@ async function openFromField(event: KeyboardEvent) {
         <div
           class="hero-plane overprint"
           :class="{
+            outlined: outlineOn,
             fanned: cycle.hovering.value,
             scrubbing: cycle.scrubbing.value,
           }"
           :style="{
             '--fan-step': cycle.fan.value,
+            '--overprint-opacity': plateOpacity,
             viewTransitionName: morph,
           }"
           :aria-label="label"
@@ -254,13 +271,12 @@ async function openFromField(event: KeyboardEvent) {
             class="hero-form overprint-layer"
             :class="{
               duplicate: !form.lead,
-              baseline: form.group === 0,
               dimmed:
                 cycle.lit.value !== undefined && form.group !== cycle.lit.value,
             }"
             :style="{
               '--i': index,
-              '--layer-color': groupColor(form.group),
+              '--layer-color': plateColor(form.group),
               '--arrival-delay': `${index * 90}ms`,
             }"
             aria-hidden="true"
@@ -319,6 +335,7 @@ async function openFromField(event: KeyboardEvent) {
           v-if="litRegions.length"
           :columns="litRegions"
           :group="cycle.lit.value!"
+          :color="plateColor(cycle.lit.value!)"
         />
         <template v-else-if="missing">{{
           t('hero.missing', { char: missing })
@@ -618,9 +635,9 @@ async function openFromField(event: KeyboardEvent) {
   transition-delay: 140ms;
 }
 
-.hero.outlined:not(.split) .hero-glyph {
+.hero:not(.split) .hero-plane.outlined .hero-glyph {
   color: transparent;
-  -webkit-text-stroke: max(0.6px, 0.014em) var(--layer-color);
+  -webkit-text-stroke: clamp(0.65px, 0.009em, 1.35px) var(--layer-color);
 }
 
 @keyframes hero-blink {
diff --git a/app/components/LitRegions.vue b/app/components/LitRegions.vue
index 9823ed4..5f73704 100644
--- a/app/components/LitRegions.vue
+++ b/app/components/LitRegions.vue
@@ -12,6 +12,8 @@ const props = defineProps<{
   /** Columns sharing the lit form, in display order. */
   columns: readonly Column[]
   group: number
+  /** Match a stack whose row rotates the overprint palette. */
+  color?: string
 }>()
 
 const { t } = useT()
@@ -28,7 +30,10 @@ const marks = computed(() =>
 </script>
 
 <template>
-  <span class="lit-regions eyebrow" :style="{ color: groupColor(group) }">
+  <span
+    class="lit-regions eyebrow"
+    :style="{ color: color ?? groupColor(group) }"
+  >
     <span v-for="mark in marks" :key="mark.column" class="lit-region">
       <RegionLabel v-if="mark.region" :flag="flagsOn" :region="mark.region" />
       <template v-if="mark.old">{{ mark.old }}</template>
diff --git a/app/components/OverprintChar.vue b/app/components/OverprintChar.vue
index 3ddd9b4..a4c2e89 100644
--- a/app/components/OverprintChar.vue
+++ b/app/components/OverprintChar.vue
@@ -11,6 +11,7 @@ import {
   type Column,
   type Region,
 } from '~~/shared/types.ts'
+import { overprintColor, overprintOpacity } from '~/utils/overprint.ts'
 
 const props = withDefaults(
   defineProps<{
@@ -67,6 +68,10 @@ const groups = computed(() =>
   ),
 )
 
+const drawnColumns = computed(() =>
+  basis.value.filter((column) => !props.only || props.only.includes(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
@@ -93,6 +98,14 @@ const layers = computed(() => {
   }
   return [...seen.values()]
 })
+
+/** One shared opacity for every visible shape; dense rows get more air. */
+const plateOpacity = computed(() =>
+  layers.value.length === 1
+    ? 1
+    : overprintOpacity(props.row, drawnColumns.value),
+)
+
 /**
  * Read aloud in place of the stack, so the forms are enumerated for a locale
  * rather than punctuated by hand.
@@ -110,12 +123,11 @@ const label = computed(() =>
 )
 
 /**
- * Color encodes which group a layer belongs to; groupColor() gives the first
- * one ink and the rest an accent. With a single group there is no grouping to
- * encode, and it is already the first -- so a uniform character is drawn in
- * ink either way.
+ * Color encodes shapes within this stack in one fixed five-ink sequence. A
+ * uniform character has nothing to distinguish and remains ordinary ink.
  */
-const colorOf = (group: number) => groupColor(group)
+const colorOf = (group: number) =>
+  layers.value.length === 1 ? 'var(--c-ink)' : overprintColor(group)
 
 const cycle = useOverprintCycle(
   () => layers.value.map((layer) => layer.group),
@@ -157,10 +169,9 @@ const activeFocus = computed(() =>
 <template>
   <!--
     isolation keeps the layers blending with each other rather than with the
-    row behind them: the baseline lands on a transparent backdrop and comes
-    through as itself, and only later layers blend into what is already there.
-    So "the baseline stays ink, departures show color" holds on any background
-    -- including the tinted one a row takes under the pointer.
+    row behind them. Equal translucent plates therefore accumulate into one
+    neutral shared form while their departures keep their own color, including
+    above the tinted background a row takes under the pointer.
   -->
   <span
     class="overprint"
@@ -174,6 +185,7 @@ const activeFocus = computed(() =>
       '--size': typeof size === 'number' ? `${size}px` : size,
       '--n': layers.length,
       '--fan-step': cycle.fan.value,
+      '--overprint-opacity': plateOpacity,
       viewTransitionName: morph && morphWhole ? morph : undefined,
     }"
     :aria-label="label"
@@ -187,7 +199,6 @@ const activeFocus = computed(() =>
       :class="[
         `hanji-${layer.region}`,
         {
-          baseline: layer.group === 0,
           dimmed: activeFocus !== undefined && layer.group !== activeFocus,
         },
       ]"
@@ -209,6 +220,7 @@ const activeFocus = computed(() =>
       class="lit"
       :columns="litColumns"
       :group="cycle.lit.value!"
+      :color="colorOf(cycle.lit.value!)"
       aria-hidden="true"
     />
   </span>
@@ -251,6 +263,6 @@ const activeFocus = computed(() =>
    the stroke visible on the row thumbnails, where an em is only 32px. */
 .outlined .layer {
   color: transparent;
-  -webkit-text-stroke: max(0.6px, 0.014em) var(--layer-color);
+  -webkit-text-stroke: clamp(0.65px, 0.009em, 1.35px) var(--layer-color);
 }
 </style>
diff --git a/app/locales/ja-jp.ts b/app/locales/ja-jp.ts
index 6bf3127..40d7462 100644
--- a/app/locales/ja-jp.ts
+++ b/app/locales/ja-jp.ts
@@ -62,7 +62,7 @@ export const jaJP: typeof zhCN = {
     flagsHint: '「中・日・港・台・韓」を対応する旗の記号に置き換えます。',
     outline: '重ね表示で輪郭線を使う',
     outlineHint:
-      '重ねた字形を輪郭線で表示します。画が一つに潰れにくくなり、違いが分かりやすくなります。',
+      '重ねた字形の半透明の塗りをなくし、各レイヤーの輪郭だけを表示します。複雑な字形の重なりも見分けやすくなります。',
     columns: '比較の範囲',
     columnsHint: '外した列は表示されず、残った字形で分け直します。',
     columnsLast: '地域は少なくとも一つ残してください。',
diff --git a/app/locales/ko-kr.ts b/app/locales/ko-kr.ts
index e92fe53..da21614 100644
--- a/app/locales/ko-kr.ts
+++ b/app/locales/ko-kr.ts
@@ -62,7 +62,7 @@ export const koKR: typeof zhCN = {
     flagsHint: '‘중·일·홍·대·한’ 표기를 해당 국기 기호로 바꿉니다.',
     outline: '겹쳐 보기에서 윤곽선 사용',
     outlineHint:
-      '겹친 자형을 윤곽선으로 표시해 획이 한 덩어리로 뭉치지 않고 차이가 더 잘 보이게 합니다.',
+      '겹친 자형의 반투명 채움을 없애고 각 층의 윤곽선만 남겨, 복잡한 글자의 겹침을 더 쉽게 구분합니다.',
     columns: '비교 범위',
     columnsHint: '해제한 열은 표시되지 않고, 남은 자형끼리 다시 묶입니다.',
     columnsLast: '지역을 하나 이상 선택해야 합니다.',
diff --git a/app/locales/zh-cn.ts b/app/locales/zh-cn.ts
index b87cc1b..4d0f77d 100644
--- a/app/locales/zh-cn.ts
+++ b/app/locales/zh-cn.ts
@@ -59,7 +59,8 @@ export const zhCN = {
     flags: '用旗帜显示地区',
     flagsHint: '把「中日港台韩」换成对应的旗帜符号。',
     outline: '叠印用空心字',
-    outlineHint: '把叠在一起的字形改成描边，笔画不再糊成一团，分歧处更清楚。',
+    outlineHint:
+      '去掉叠印字形的半透明填充，只保留各层轮廓，复杂字的重叠关系更容易分辨。',
     columns: '对照范围',
     columnsHint: '关掉的一列不再出现，其余字形重新分组。',
     columnsLast: '至少要留一个地区。',
diff --git a/app/locales/zh-hk.ts b/app/locales/zh-hk.ts
index a9f8edb..b78ca3a 100644
--- a/app/locales/zh-hk.ts
+++ b/app/locales/zh-hk.ts
@@ -60,7 +60,8 @@ export const zhHK: typeof zhCN = {
     flags: '用旗幟顯示地區',
     flagsHint: '把「中日港台韓」換成對應的旗幟符號。',
     outline: '疊印用空心字',
-    outlineHint: '把疊在一起的字形改成描邊，筆畫不再糊成一團，分歧處更清楚。',
+    outlineHint:
+      '移除疊印字形的半透明填色，只保留各層輪廓，複雜字的重疊關係更容易分辨。',
     columns: '對照範圍',
     columnsHint: '關掉的一列不再出現，其餘字形重新分組。',
     columnsLast: '至少要留一個地區。',
diff --git a/app/locales/zh-tw.ts b/app/locales/zh-tw.ts
index 039deca..599fe04 100644
--- a/app/locales/zh-tw.ts
+++ b/app/locales/zh-tw.ts
@@ -60,7 +60,8 @@ export const zhTW: typeof zhCN = {
     flags: '用旗幟顯示地區',
     flagsHint: '把「中日港臺韓」換成對應的旗幟符號。',
     outline: '疊印用空心字',
-    outlineHint: '把疊在一起的字形改成描邊，筆畫不再糊成一團，分歧處更清楚。',
+    outlineHint:
+      '移除疊印字形的半透明填色，只保留各層輪廓，複雜字的重疊關係更容易分辨。',
     columns: '對照範圍',
     columnsHint: '關掉的一列不再出現，其餘字形重新分組。',
     columnsLast: '至少要留一個地區。',
diff --git a/app/styles/overprint.css b/app/styles/overprint.css
index a1272a3..652aef9 100644
--- a/app/styles/overprint.css
+++ b/app/styles/overprint.css
@@ -5,7 +5,7 @@
  * things that make a stack recognizably the same object everywhere live here.
  *
  * See useOverprintCycle() for the behavior these classes are the appearance
- * of, and groupColor() for why one layer is ink and the rest are accents.
+ * of, and utils/overprint.ts for the equal plate colors and density response.
  */
 
 .overprint {
@@ -21,6 +21,12 @@
      so the layers spring back to whichever of these applies. */
   --fan-step: 0px;
 
+  /* Every distinct form is an equal plate. Components lower this value for
+     dense glyphs; hollow mode then lifts the outlines without changing their
+     balance against one another. */
+  --overprint-opacity: 0.54;
+  --overprint-active-opacity: var(--overprint-opacity);
+
   /* Positioned so the layers have something to sit in, and so a stack being
      scrubbed can be raised above the copy it fans across. */
   position: relative;
@@ -35,6 +41,10 @@
   user-select: none;
 }
 
+.overprint.outlined {
+  --overprint-active-opacity: 0.82;
+}
+
 /*
  * Fanned by a hair while a pointer rests on the stack: enough to say the
  * picture has parts, far short of taking it apart. Mostly sideways, with a
@@ -81,6 +91,7 @@
 
   color: var(--layer-color);
   mix-blend-mode: var(--overprint-blend);
+  opacity: var(--overprint-active-opacity);
   translate: var(--fan) calc(var(--fan) * 0.42);
 
   /*
@@ -104,25 +115,22 @@
 }
 
 /*
- * An accent annotates the baseline rather than standing beside it as an equal
- * plate. Held a little short of solid it is still perfectly legible alone,
- * while the places where two of them cross settle further back again -- which
- * is where a stack of four gets busiest, and where it has the least to say.
+ * Filled plates keep a hairline registration edge. The translucent interior
+ * preserves the overprint mass, while the firmer contour prevents several
+ * related forms (里 / 裏 / 裡 is the hard case) from collapsing into one dark
+ * block. Hollow mode remains the stronger, edge-only treatment below each
+ * component's scoped styles.
  */
-.overprint-layer:not(.baseline) {
-  opacity: 0.78;
-}
-
-/*
- * On a dark ground the baseline is the near-white layer, and near-white wins
- * the blend against everything: the accents survived only where they reached
- * outside it, so a form differing from the baseline somewhere inside its own
- * strokes had nothing to show for it. Held back far enough that the accents
- * carry across it, while it stays the largest and most solid shape and so
- * still the one the character is read from.
- */
-.overprint-layer.baseline {
-  opacity: var(--overprint-baseline, 1);
+.overprint:where(:not(.outlined)) .overprint-layer {
+  color: color-mix(
+    in oklch,
+    var(--layer-color) calc(var(--overprint-active-opacity) * 100%),
+    transparent
+  );
+  -webkit-text-stroke: clamp(0.4px, 0.006em, 0.9px)
+    color-mix(in oklch, var(--layer-color) 76%, transparent);
+  opacity: 1;
+  paint-order: stroke fill;
 }
 
 /*
@@ -132,12 +140,3 @@
 .overprint-layer.dimmed {
   opacity: 0.12;
 }
-
-/*
- * The baseline keeps more of itself than the others. Lighting an accent form
- * is a question about where it departs, and the answer needs the form it
- * departs from still faintly on the page to be read against.
- */
-.overprint-layer.dimmed.baseline {
-  opacity: 0.3;
-}
diff --git a/app/styles/vars.css b/app/styles/vars.css
index 776963d..8b99c19 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -9,12 +9,9 @@
  * five accents cover the six columns a row can offer, and the accents carry
  * only departures from the baseline form.
  *
- * Which is what calibrates them. The overprint blend keeps the darker mark on
- * light and the lighter one on dark, so every accent has to lose that contest
- * against ink: comfortably lighter than ink here, comfortably darker than the
- * near-white ink under html.dark. Both sets therefore sit around the middle of
- * the lightness range, far enough from the baseline that no overlap of them
- * can be mistaken for it, and far enough from the paper to be legible alone.
+ * These accents continue the proof-sheet language in bars and filters. The
+ * overprint itself has a separate equal-strength plate palette below: no one
+ * region is promoted to the ink baseline there.
  */
 :root {
   --c-ink: #16151a; /* ink, softer and slightly cooler than black */
@@ -31,15 +28,19 @@
   --c-g5: #1f8d81; /* verdigris */
 
   /*
-   * Overprint: at every point the strongest mark on the page wins -- darkest
-   * here, lightest on a dark ground. Against the baseline an accent always
-   * loses, so it shows itself exactly where it departs and nowhere else.
-   *
-   * This used to accumulate instead, multiply over ink. Two accents crossing
-   * compounded past the baseline's own weight, and the darkest thing in the
-   * picture was then a place where the baseline had no stroke at all -- the
-   * stack at its loudest exactly where it had least to say. Taking the extreme
-   * rather than the product bounds every overlap by its own layers.
+   * Five fixed, equal-strength overprint inks. Low chroma keeps dense strokes
+   * legible; wide hue spacing still separates the outlines without making a
+   * region's plate brighter or darker than its peers.
+   */
+  --c-o1: oklch(0.5 0.065 24);
+  --c-o2: oklch(0.5 0.065 247);
+  --c-o3: oklch(0.5 0.065 104);
+  --c-o4: oklch(0.5 0.065 315);
+  --c-o5: oklch(0.5 0.065 175);
+
+  /*
+   * Keep overlaps bounded: a fourth plate should reveal another form, not
+   * compound the shared strokes into an opaque block.
    */
   --overprint-blend: darken;
 
@@ -125,20 +126,19 @@ html.dark {
   --c-paper-sunk: #1b1b1f;
   --c-rule: #2f2f35;
 
-  /* Held down rather than lifted: on a dark ground the baseline is the
-     near-white layer, so an accent has to stay well below it to lose the
-     blend where the two agree. Accents bright enough to rival it washed the
-     whole stack into the same undifferentiated glare. */
+  /* The proof-sheet accents keep their identities on dark paper. */
   --c-g1: #d2604f;
   --c-g2: #5d8fd4;
   --c-g3: #c08f33;
   --c-g4: #9d79c9;
   --c-g5: #3da294;
 
-  --overprint-blend: lighten;
+  --c-o1: oklch(0.68 0.055 24);
+  --c-o2: oklch(0.68 0.055 247);
+  --c-o3: oklch(0.68 0.055 104);
+  --c-o4: oklch(0.68 0.055 315);
+  --c-o5: oklch(0.68 0.055 175);
 
-  /* Brought down to about the accents' own lightness, so a departure crossing
-     the baseline still registers instead of being erased by it. On paper the
-     baseline is ink against a light ground and needs no such help. */
-  --overprint-baseline: 0.62;
+  /* The lightest visible plate wins on dark paper without accumulating glare. */
+  --overprint-blend: lighten;
 }
diff --git a/app/utils/overprint.ts b/app/utils/overprint.ts
new file mode 100644
index 0000000..75924fb
--- /dev/null
+++ b/app/utils/overprint.ts
@@ -0,0 +1,34 @@
+import { REGIONS, type CharRow, type Column } from '~~/shared/types.ts'
+
+/** Five fixed, equal-strength inks shared by every stack in the product. */
+const PLATE_COUNT = 5
+
+/**
+ * Keep the same group order for every character so changing the row never
+ * reshuffles its colors. A rare sixth distinct form reuses the first ink
+ * rather than expanding the deliberately limited palette.
+ */
+export function overprintColor(group: number): string {
+  return `var(--c-o${(group % PLATE_COUNT) + 1})`
+}
+
+/**
+ * Dense glyphs need more paper showing through than sparse ones. Their fill
+ * recedes while the shared registration edge stays firm, so every plate keeps
+ * the same visual weight without turning a complex stack into a dark block.
+ */
+export function overprintOpacity(
+  row: CharRow,
+  columns: readonly Column[],
+): number {
+  const strokes = columns.flatMap((column) => {
+    if (column === 'old') return row.old ? [row.old.strokes] : []
+    const index = REGIONS.indexOf(column)
+    return index === -1 ? [] : [row.strokes[index]!]
+  })
+  const max = Math.max(0, ...strokes)
+  if (max >= 20) return 0.24
+  if (max >= 15) return 0.28
+  if (max >= 10) return 0.32
+  return 0.42
+}
-- 
2.51.2