OpenType features

<div class="stage">
  <div class="tagrow" id="tagrow"></div>
  <div class="readout" id="readout">측정 중…</div>
</div>

.stage{display:grid;gap:12px;justify-items:center;width:min(94%,520px)}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tag{font:11px ui-monospace,Menlo,monospace;padding:4px 8px;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
.tag.on{border-color:var(--accent);color:var(--accent)}
.tag.off{border-color:var(--line);color:var(--muted);opacity:.5}
.readout{font:11px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center;line-height:1.6}

const probe = document.createElement('span');
probe.style.cssText = 'position:absolute;visibility:hidden;white-space:nowrap;font:16px -apple-system,system-ui,sans-serif';
probe.textContent = '0123456789 AVATAR office';
document.body.appendChild(probe);
function widthWith(setting){
  probe.style.fontFeatureSettings = setting;
  return probe.getBoundingClientRect().width;
}
const off = widthWith('"kern" 0, "liga" 0, "calt" 0');
const tags = [
  { tag: 'kern', setting: '"kern" 1, "liga" 0, "calt" 0' },
  { tag: 'liga', setting: '"kern" 0, "liga" 1, "calt" 0' },
  { tag: 'calt', setting: '"kern" 0, "liga" 0, "calt" 1' },
  { tag: 'tnum', setting: '"tnum" 1' },
];
const results = tags.map(function(t){
  const w = widthWith(t.setting);
  const base = t.tag === 'tnum' ? widthWith('"pnum" 1') : off;
  return { tag: t.tag, active: Math.abs(w - base) > 0.4 };
});
const tagrow = document.getElementById('tagrow');
const readout = document.getElementById('readout');
results.forEach(function(r){
  const el = document.createElement('span');
  el.className = 'tag ' + (r.active ? 'on' : 'off');
  el.textContent = r.tag + (r.active ? ' ✓' : ' —');
  tagrow.appendChild(el);
});
const activeCount = results.filter(function(r){ return r.active; }).length;
readout.textContent = '현재 시스템 폰트에서 폭 변화가 측정된 기능 ' + activeCount + '/' + results.length + '개 (실측, 폰트마다 다를 수 있음)';