Hardest problem in computer science: centering things (tonsky.me)

Article summary

The article discusses the difficulties of centering elements in computer science, particularly in web development, and how it is a common problem despite being theoretically simple. The author provides examples of poorly aligned text and icons from various companies, including Apple, Microsoft, and Google. The article also explores the reasons behind this issue, including font metrics, line height, and the use of icon fonts. The author offers solutions, such as using tight bounding boxes and choosing fonts that follow certain rules, to improve centering in web development.

Main themes

• Centering in web development
• Font metrics and line height
• Icon fonts and alignment
• Web development challenges
• UI design and usability

What commenters say

• The article's use of moving cursors on the webpage is distracting and invasive, and a toggle to turn it off would be appreciated.
• The challenges of centering elements in web development are due to inherent complexity, rather than accidental complexity caused by overcomplicated tools or architectural decisions.
• Some commenters enjoy the challenge of working with complex web development tools, while others find it frustrating and prefer simpler approaches.
• The use of icon fonts can cause alignment issues and is not a recommended practice, with some commenters suggesting the use of normal image formats instead.
• The article's examples of poorly aligned text and icons are not just aesthetically pleasing, but also affect the usability of the UI.
• Some commenters disagree with the article's tone and approach, finding it sarcastic or ironic, while others appreciate its humor and insight.
• The discussion highlights the trade-offs between different approaches to web development, including the use of frameworks like React, and the importance of understanding state flow and backend data models.
• The concept of 'typographical center of gravity' is mentioned as a potential solution to alignment issues, but its implementation can be complex and dependent on the specific text and font used.