【Hacker News搬运】计算机科学中最棘手的问题：以事物为中心

hackernews

Title: Hardest problem in computer science: centering things

计算机科学中最棘手的问题：以事物为中心

Text:

Url: https://tonsky.me/blog/centering/

文章标题为“计算机科学中最难的问题：居中事物”。作者提出了一个观点，即我们这个文明忘记了如何居中事物。虽然我们知道如何做到这一点（例如使用 CSS 属性 `display: flex; justify-content: center; align-items: center;`），但在实际应用中，这些方法并没有被广泛使用。作者通过展示各种实际应用中的例子，如苹果、微软、GitHub、Valve、Slack 和 Telegram 等公司的界面，来证明这一点。

文章接着讨论了字体、行高和图标对居中效果的影响。作者指出，许多流行的字体在 metrics 上略有偏差，这可能导致文本对齐问题。对于图标，作者建议使用常规的图像格式而不是字体图标，因为字体图标很难正确对齐。

最后，作者提供了一些解决方案，包括字体设计师如何调整字体 metrics 以实现更好的居中效果，以及开发者如何使用 CSS 属性来对齐文本和图标。作者还强调了关注细节和细心调整的重要性，以创建美观、平衡的用户界面。

Post by: tobr

Comments:

Animats: That's because CSS layout was designed by people who thought "float" and "clear" were a good idea, tables were bad, and, when in doubt, make it Turing-complete and dump the problem on someone else.2D and 3D tools get this right. CAD programs, game engines, and animation programs are all far better at positioning things. They have far better layout engines and constraint systems. This is really a constraint problem. Autodesk Inventor and Fusion 360 have good 2D constraint solvers, ones that can put something on a centerline, or parallel, or whatever, including curve tools. Webland never got that far.

Animats: 那个；因为CSS布局是由那些认为“；浮动“；以及“；清晰”；是个好主意，表格很糟糕，当有疑问时，让它成为图灵完备的，并将问题推给其他人 二维和三维工具可以做到这一点。CAD程序、游戏引擎和动画程序在定位方面都要好得多。他们有更好的布局引擎和约束系统。这确实是一个约束问题。Autodesk Inventor和Fusion 360具有良好的二维约束解算器，这些解算器可以将某些东西放置在中心线上、平行线上或其他位置，包括曲线工具。韦伯兰从来没有走那么远。

mckn1ght: > That’s exactly why people love web programming so much. There’s always a challenge.LOL, these examples are exactly why I got out of web programming. Thankfully I never had to deal with any of the modern frameworks. I was getting hot flashes just scrolling through this page.

mckn1ght: &gt；这正是人们如此喜爱网络编程的原因。挑战总是存在的 哈哈，这些例子正是我退出网络编程的原因。谢天谢地，我从来没有处理过任何现代框架。我刚浏览这一页就有点热。

mrbluecoat: It's just as hard in the real world: <a href="https://ftw.usatoday.com/lists/nc-state-texas-ncaa-portland-court-wrong-reaction-march-madness" rel="nofollow">https://ftw.usatoday.com/lists/nc-state-texas-ncaa-portland-...</a>

mrbluecoat: 它；在现实世界中同样困难：<a href=“https://；&#x2F；ftw.usatoday.com&#x2F，lists&#x2F！nc state texas ncaa portland court wrong reaction march疯狂”rel=“nofollow”>https://&#x2F；ftw.usatoday.com&#x2F；lists&#x2F；nc州得克萨斯州ncaa波特兰-</一

crazygringo: This is an excellent piece, about how virtually impossible it is to center things accurately mostly because of how fonts are displayed.But I'll add two more wrinkles that the author doesn't mention:First, that font rendering isn't just about metrics but varies across operating systems and browsers. So even if you center perfectly on Chrome on your Mac, it may very well be off on Firefox on Windows.And second, that the author's proposed solutions only work for Western-style fonts that have ascenders and descenders. It gets even trickier when you consider a range of totally different scripts from Asia etc.

crazygringo: 这是一篇很好的文章，讲述了几乎不可能准确地将事物居中——主要是因为字体的显示方式 但是我；I’我再加两条作者没有加的皱纹；不要提：＜p＞首先，字体渲染是；这不仅仅是关于指标，而且在操作系统和浏览器之间也有所不同。因此，即使你在Mac上完全专注于Chrome，在Windows上的Firefox上也很可能会关闭 第二，作者；s提出的解决方案仅适用于具有升序和降序的西式字体。当你考虑到一系列与亚洲完全不同的剧本时，这就变得更加棘手了。

jkaptur: A designer once advised me to align an icon with the "typographical center of gravity" - as in, of the "ink". This would make the location of an icon next to text depend on the text itself, not just the font. Obviously, we compromised in practice

jkaptur: 一位设计师曾建议我将图标与“；印刷重心“-如在“；墨水”；。这将使图标在文本旁边的位置取决于文本本身，而不仅仅是字体。显然，我们在实践中妥协了：）