The page doesn't even mention the brand new align-content property: https://news.ycombinator.com/item?id=40064762
Hardest problem in computer science: centering things
11–20 of 473 posts
Re: Hardest problem in computer science: centering things
#12Is the author here? Can you give us a toggle so we can turn off the moving cursors? It's a little distracting. Reader mode isn't working so well, so I deleted the element in developer tools in the mean time.
[deleted]
Re: Hardest problem in computer science: centering things
#13> don’t ask why you need to remember four words instead of just horizontal/vertical, it’s still better than before
Because those things can do a whole lot more than just that?
Re: Hardest problem in computer science: centering things
#14> don’t ask why you need to remember four words instead of just horizontal/vertical, it’s still better than before
The reason is "display: flex" can be a column or row. The "align-items" property describes alignment along the axis, so vertical for column and horizontal for row. The "justify-content" property is the other direction.
Re: Hardest problem in computer science: centering things
#15A 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 :)
That’s actually arguably the source of the problem in a lot of these examples. In some of them, the bad alignment would look good if the text next to it contained more descenders.
This could be compensated for, of course. For e.g. a single checkbox and text, move the text a bit lower if there are no descenders in it. But that doesn’t work if the text is user input, or if there are multiple text boxes in a list: it’s noticeable (and unpleasant) if the baselines of the text are in different places next to their individual checkboxes if - even if they’d all individually look best in that alignment viewed alone.
And if the text is editable, it’s even worse. No-one wants their text to be jumping up and down while editing to maintain optical alignment.
The problem gets even worse if you have mixed language support, and the text might be in languages with ‘tall’ characters (Thai, Arabic, sometimes Vietnamese - and a long list of others) or a different idea of ‘line height’.
Compromises must be made, unfortunately.
Of course, that doesn’t excuse a lot of the examples here, which are of specific designs - but it does mean that a lot more ‘design’ time is required, especially if there are multiple localisations, than feels at-all intuitive to anyone who has not done this.
Re: Hardest problem in computer science: centering things
#16> 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.
I appreciate things that are well laid out. I just don't get satisfaction from pixel pushing myself. It might be different if it was a small product or one I was vested I from the beginning or owned. OTOH backend implementation details I go out of my way to do at my best probably goes beyond what many others consider necessary especially when no one really sees it or may never be a practically relevant design or performance issue.
Re: Hardest problem in computer science: centering things
#17No the hardest problem in CS is writing a reliable progress bar.
Re: Hardest problem in computer science: centering things
#18This 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.
Re: Hardest problem in computer science: centering things
#19If you Google “Why is CSS terrible?” you will get dozens of questions on SO or Reddit about noobs complaining about CSS and how it is outrageously hard to understand and use.
Nearly every one of those threads has at least one comment that reads like, “Well I’m a senior web developer and if you don’t like CSS it’s probably because you’re a fucking idiot!” Some will go so far as to say if you don’t like CSS and you’re a man, it’s probably because you’re a misogynist: https://youtu.be/dxY5CdZNzsk?si=BiVr0uPXKIq-T4dJ (Seriously, watch the video, it’s outrageous.)
Meanwhile, more than one web developer has communicated to me in private that they hate CSS and barely understand it after years of using it professionally to make money.
Re: Hardest problem in computer science: centering things
#20I'm out of the web development game, but in my day it was still quite possible to vertically center text and icons consistently. You just had to notice it was busted in the first place, and then go in and fix it. It's not a technological problem, or at least not a non-trivial one. The problem is that, if it's off by a couple pixels, the front-end engineer may not notice it, and the designer may not even look at it. O…
No, this was never possible, not in web development. You could do it in one browser on one OS, but then they could be off on another browser on another OS.
It's absolutely a technological problem because pixel-perfect rendering and alignment is not part of the HTML/CSS specs, when it comes to how fonts get drawn.
The only way to actually get it perfect is to do browser and OS detection and then hand-code a bunch of manual offsets that you keep up to date. And obviously that would be insane.