Hardest problem in computer science: centering things

Original Article ↗ Hacker News Discussion ↗

Centering text and icons in user interfaces turns out to be far trickier than simple geometry suggests, largely because font metrics, optical perception, and inconsistent rendering across browsers and operating systems all interact in non-obvious ways. Commenters trade war stories about CSS, flexbox, and grid, debate whether the web’s layout model is fundamentally flawed compared to constraint-based systems, and highlight emerging fixes like `text-box-trim` and font metric overrides. Many also note that subtle misalignments affect perceived quality and trust, yet are often ignored in practice, while others argue that chasing pixel perfection is rarely worth the effort.

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.