一个章节是怎么做出来的How a Chapter Gets Made

症状Symptom

用 B 给一个看起来不鲜艳的颜色，让 A 去匹配，怎么调都匹配不上。Set a dull-looking color with B and ask A to match it, and no amount of adjusting gets there.

原因Cause

A 用窄高斯峰、B 用宽高斯峰。振幅相同时，宽峰的积分能量是窄峰的 3–4 倍，A 永远追不上 B 的亮度。A uses narrow Gaussian peaks, B uses wide ones. At equal amplitude, a wide peak's integrated energy is 3–4× a narrow peak's, so A can never catch up to B's brightness.

修复Fix

对高斯峰按面积归一化，让振幅直接等于总功率，宽窄峰就能对称匹配。Area-normalize the Gaussian peaks so amplitude equals total power directly, and wide and narrow peaks can match symmetrically.

// 改前：振幅相同，宽峰积分能量是窄峰的 3–4 倍 → A 永远追不上 B
sum += (amps[k] / 100) * gaussian(lam, peak.c, peak.w);

// 改后：按面积归一化，振幅 = 总功率，宽窄峰可对称匹配
const norm = 1 / (peak.w * Math.sqrt(2 * Math.PI));
sum += (amps[k] / 100) * gaussian(lam, peak.c, peak.w) * norm;

// Before: equal amplitude → a wide peak's integrated energy is 3–4× a narrow one → A never catches B
sum += (amps[k] / 100) * gaussian(lam, peak.c, peak.w);

// After: area-normalize so amplitude = total power; wide/narrow peaks match symmetrically
const norm = 1 / (peak.w * Math.sqrt(2 * Math.PI));
sum += (amps[k] / 100) * gaussian(lam, peak.c, peak.w) * norm;

症状Symptom

演示 A 里有些颜色看起来并不鲜艳，但点击自动匹配后仍然只能逼近，读者会以为算法坏了。Some colors in Demo A don't look saturated, yet clicking auto-match only gets close — readers assume the algorithm is broken.

原因Cause

另一组光谱基函数只能做 0–100 的非负加法。精确解可能需要负峰值，或需要某个峰超过滑块上限。视觉上的「不鲜艳」不等于落在另一组光谱模型的可达 XYZ 范围内。The other set of spectral basis functions can only do non-negative addition over 0–100. An exact solution might need a negative peak, or a peak beyond the slider's ceiling. "Looks dull" doesn't mean it falls inside the XYZ range the other spectral model can reach.

修复Fix

按钮改成「尝试匹配」，失败状态改为「受光谱范围限制」，并把求解出的原始峰值显示给读者。交互演示不只要展示成功，也要解释失败为什么合理。Rename the button "Try to match", change the failure state to "limited by spectral range", and show readers the raw solved peak values. An interactive demo should not only show success but also explain why failure is reasonable.

症状Symptom

换光源后两个样本的色差只有 ΔE≈1.7，肉眼几乎看不出，失去教学冲击力。After switching illuminant, the two samples differ by only ΔE≈1.7, barely visible to the eye — losing the teaching impact.

原因Cause

样本反射率太平、太亮，对波长不够敏感，换光源时颜色变化被平均掉了。The sample reflectances were too flat and too bright, not wavelength-selective enough, so the color change averaged out when the illuminant changed.

修复Fix

把样本 A 设计成对波长高度选择性（黄橙窄峰、低底噪），样本 B 用三个分离峰。结果：D65 下 ΔE=0.48（匹配），换到白炽灯 A 光源 ΔE=6.72、F2 荧光 ΔE=4.35、商用 LED ΔE=4.62（明显失配）。Make sample A highly wavelength-selective (a narrow yellow-orange peak, low noise floor) and give sample B three separated peaks. Result: ΔE=0.48 under D65 (matched), then ΔE=6.72 under incandescent A, 4.35 under F2 fluorescent, and 4.62 under a commercial LED (clearly mismatched).

症状Symptom

图表在手机上只渲染成一条窄带，高度约 150px。The chart renders as a thin strip on mobile, about 150px tall.

原因Cause

canvas { height: 100% } 需要父元素有明确的 height 才能解析；父元素只有 min-height 时百分比高度失效，canvas 回退到 HTML 默认的 150px。canvas { height: 100% } needs the parent to have an explicit height to resolve; when the parent only has min-height, the percentage height fails and the canvas falls back to HTML's default 150px.

修复Fix

把父元素的 min-height 改成明确的 height（或让父元素进入 grid/flex 由布局给出确定高度）。Change the parent's min-height to an explicit height (or put the parent in a grid/flex so the layout gives it a definite height).

/* 失效：父元素只有 min-height，canvas 塌回 150px */
.canvas-box { min-height: 240px; }
canvas { height: 100%; }

/* 有效：父元素给明确 height，height:100% 才能解析 */
.canvas-box { height: 240px; }

/* Fails: parent only has min-height, canvas collapses to 150px */
.canvas-box { min-height: 240px; }
canvas { height: 100%; }

/* Works: parent has an explicit height, so height:100% resolves */
.canvas-box { height: 240px; }

症状Symptom

媒体查询里写了单列规则，但手机上多列布局没折叠。A single-column rule is written in the media query, but the multi-column layout doesn't collapse on mobile.

原因Cause

原规则是 .parent .child（两级），媒体查询里只写 .child（一级），优先级更低，覆盖不掉。The original rule is .parent .child (two levels); the media query only writes .child (one level), which has lower specificity and can't override it.

修复Fix

媒体查询里用同等或更高优先级的选择器。Use a selector of equal or higher specificity in the media query.

/* 不生效：优先级低于原规则 */
@media (max-width:560px){ .summary-chain{ grid-template-columns:1fr; } }

/* 生效：保持同等优先级 */
@media (max-width:560px){ .gamma-summary .summary-chain{ grid-template-columns:1fr; } }

/* Doesn't apply: lower specificity than the original rule */
@media (max-width:560px){ .summary-chain{ grid-template-columns:1fr; } }

/* Applies: keeps the same specificity */
@media (max-width:560px){ .gamma-summary .summary-chain{ grid-template-columns:1fr; } }

做法Approach

遇到争议点时，先问「为什么会这样」，再让 AI 修改。比如演示 A 里淡色也匹配失败，先确认原因是非负峰值约束，而不是直接改成「看起来能匹配」。On a contested point, ask "why does this happen" first, then have AI make changes. For example, when a pale color also fails to match in Demo A, first confirm the cause is the non-negative peak constraint, instead of just changing it to "looks like it matches".

价值Value

这样能避免把真实限制藏掉。好的科普页面不是把所有问题美化成成功，而是让读者知道失败在物理上为什么合理。This avoids hiding real constraints. A good explainer page doesn't dress every problem up as success; it lets readers see why failure is physically reasonable.

常见问题Common issue

曲线有了，但没有坐标轴数字；图能拖动，但横纵比例不对；模式切换按钮有了，但读者不知道当前看的是哪一种模式。There's a curve but no axis numbers; the chart is draggable but the aspect ratio is wrong; there's a mode-switch button but readers don't know which mode they're looking at.

改法Fix

每个交互图表都要回答三件事：X 轴是什么、Y 轴是什么、当前模式是什么。PQ / HLG / SDR 同图对比时，必须写明是线性亮度、对数亮度，还是分段线性亮度。Every interactive chart must answer three things: what's the X axis, what's the Y axis, and what's the current mode. When comparing PQ / HLG / SDR on one chart, state whether it's linear, log, or piecewise-linear luminance.

问题Problem

ST 2084、HLG、OOTF 这类公式如果挤成一行，读者只会跳过。AI 很容易把公式当成普通文本堆上去。Formulas like ST 2084, HLG, and OOTF, if crammed into one line, just get skipped. AI tends to dump formulas in as ordinary text.

改法Fix

把公式拆成步骤：先定义输入输出，再列分段条件，再列常数。需要时用「先算 N」「再算亮度比例」这样的短句代替一整条长公式。Break the formula into steps: define inputs and outputs first, then list the piecewise conditions, then the constants. Where it helps, use short phrases like "first compute N", "then the luminance ratio" instead of one long formula.

问题Problem

「时代的新痛」「奥秘」「神器」「物理学的代价」这类说法看起来顺，但会让技术页面显得不可信。Phrases like "the new pain of our era", "mystery", "killer tool", or "the price of physics" read smoothly but make a technical page feel untrustworthy.

改法Fix

把比喻改成可验证的描述：例如「OLED / QD-OLED 显示中的观察者差异」「窄峰原色会放大观察者同色异谱」。标题也要直接告诉读者这一节解决什么问题。Turn metaphors into verifiable descriptions: e.g. "observer differences on OLED / QD-OLED displays", "narrow-band primaries amplify observer metamerism". Headings should also tell readers directly what problem the section solves.