Hardest problem in computer science: centering things

Original Article ↗ Hacker News Discussion ↗

Site UX and “multiplayer cursors”

  • Many found the animated cursors and bright yellow background distracting or unusable; several disabled JS, used reader mode, or blocked the websocket/DOM element.
  • Others thought the cursors and dark‑mode “flashlight” were clever, funny branding.
  • Some argued such effects should respect prefers-reduced-motion; others rejected “opt‑out” distractions entirely.

Why centering is hard

  • Core theme: geometric centering is trivial; optical centering with real fonts is not.
  • Font metrics are ambiguous and inconsistent across OSes, browsers, and even between Windows/macOS conventions.
  • Ascenders/descenders, diacritics, and non‑Latin scripts (CJK, Arabic, Vietnamese, etc.) break simple baseline or bounding‑box assumptions.
  • Fallback or user‑overridden fonts (e.g., for dyslexia) further ruin carefully tuned alignments.

CSS, layout models, and historical baggage

  • Flexbox/grid make centering easier but still often give optically “wrong” results; properties like justify-content, align-items, main/cross axis naming confuse many.
  • Multiple posters revisit old battles: tables vs floats vs display: table vs modern grid; accusations that tables were discouraged prematurely, with accessibility and “semantic web” arguments partly to blame.
  • Constraint-based layout (like CAD/game engines or iOS auto layout) is seen as conceptually better but historically rejected as too costly.
  • Some note centering failures (e.g., flex with overflow to the left) and propose margin: auto, width: fit-content, or nth‑child tricks as workarounds.

Does pixel-perfect alignment matter?

  • One side: small misalignments signal sloppiness and erode trust, especially in banking or premium apps.
  • Other side: most users don’t notice; effort is better spent on functionality, and perfect centering is not worth complex per‑browser/per‑font hacks.
  • Consensus-ish nuance: details matter more in crowded or design‑sensitive markets, less in niche or low‑bandwidth contexts.

Perception, neurodivergence, and “can’t unsee it”

  • Many report once they learn to see misalignments, kerning errors, or construction flaws, they can’t stop noticing them.
  • Several connect this hyper‑sensitivity to autism/ADHD and pattern‑detection; others compare it to noticing audio mastering errors.

Tools and proposed fixes

  • Mentioned: text-box-trim / leading‑trim (not widely supported), font metric overrides (ascent-override, descent-override), and JS tools like Capsize.
  • Some advocate simply nudging with position: relative and accepting that perfect, universal centering is unattainable.