Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Hardest problem in computer science: centering things

tonsky.me

Post reply on HN
Print view View original

221–230 of 473 posts

Re: Hardest problem in computer science: centering things

#221

Post by robertlagrant »

I mostly agree, but not entirely. The problem is that things that are lined up look nice from far away, and very close up, but not always when reading text.

The Apple "Manage" button is the simplest to illustrate. You might think that just having equal vertical space above the M and below the g is the best, but when you read text you're also used to seeing letters stick out of the bottom of the line. So having the g not protrude might look odd.

Or if you have two buttons next to each other, one "Manage" and one "Add" - what should you do? Should you centre Manage, and put the text for both on the same imaginary horizontal line? That will make "Add" look odd when viewed in isolation.

Or should you centre Add? Then Manage will look odd when screenshotted by itself.

Or should you let each have their own vertical centre? Then they will be mismatched.

What to do?

Re: Hardest problem in computer science: centering things

#222

Post by shiomiru »

> Should you use icon fonts for icons in 2024?

> Are you limited by 1970-s tech e.g. terminal?

This accidentally highlights yet another problem with icon fonts.

Terminal-based browsers with image capabilities, e.g. w3m, can display image-based icons. Fonts on the other hand are (usually) unchangeable on terminal emulators. So if you use icon fonts, it will look like garbage on terminal browsers, but with images there is a chance that it will work.

Sure, who cares, nobody targets w3m in 2024. But the problem can surface for people using modern browsers too, if they explicitly override your font for accessibility reasons. (For example, there exist fonts designed to aid dyslexic readers.)

Then on (relatively) well-behaved sites they will see only a text description; on others they will just see some empty squares.

Re: Hardest problem in computer science: centering things

#223

Post by matsemann »

AlecSchueler wrote: post #184
atoav wrote: post #156

Earlier quoted context omitted.

The problem I see with using tables for layout is that it fucks up the semantic meaning of the html file. But that was an issue of philosophy that got trumped by practical needs. However, nowadays we have css grids with template areas. So we can just write our HTML semantically correct as if it was more or less just about the content (as it should be IMHO) and still move things around using CSS depending on the type…

> But that was an issue of philosophy that got trumped by practical needs Also very real issues like accessibility.

One thing I also seem to remember from the very old days, was that browsers wouldn't render the table until it was completely downloaded. So if your whole content was in a table, there would be nothing to see until the whole page was loaded and it could do the layout. But without tables you would see parts pop in as it was loaded.

Re: Hardest problem in computer science: centering things

#224

Post by TeMPOraL »

kqr wrote: post #165
devjab wrote: post #126

Earlier quoted context omitted.

I’m not entirely sure I agree with you on this. It’s hard for me to say because I really like the imperfections in things I build, for the most part. Like I’ll full spartle a wall (not entirely sure if this is the correct English description) and I’ll intentionally leave the finish less than “perfect” because I think it adds a little soul to it that will make me happy down the years. Then you have things like floorin…

> I think it adds a little soul to it that will make me happy down the years. The word for this is wabi-sabi.

My OCD self: "At last, I found you, wabi-sabi, my archnemesis".

Re: Hardest problem in computer science: centering things

#225

Post by 3rd3 »

Animats wrote: post #72

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.…

> 2D and 3D tools get this right

Except for (vector) graphics design, desktop publishing, page layout designing and reporting software... The reason is of course that most printed items are unica and non-variable, but proper parametric and constraint-based would definitely be useful in report generation and signage where print formats vary or where designs need to be automatically adjusted based on texts and other content varying in size/length.

Re: Hardest problem in computer science: centering things

#226

Post by TeMPOraL »

Akronymus wrote: post #198
rogual wrote: post #193

Earlier quoted context omitted.

I have this with grammar. When I read modern websites, articles, papers, emails from HR, etc. with their sloppy English and comma-splices everywhere, it annoys me way too much and it's a real challenge to push on through and keep reading. It feels like walking through a maze, with an uneven floor and bad lighting, full of dead-ends, compared to walking down a pleasant, well-lit corridor.

I used to write some of the worst English out there. Then I became part in a streamers community, where proper English grammar was encouraged/enforced. (Well, more like having to at least try to write proper English, there was quite a bit of leeway) Ever since then, I get incredibly annoyed at people just writing "liek this and not giving an crap about proper grammar or punctuation this makes text harder to read then…

Same. Also I get annoyed when pointing out (in good manner) misspellings, bad grammar, or technical inaccuracies gets called out as pedantry or policing, especially here on HN. Sure, it's not the end of the world - but the reason we have a nice place here is, in big part, because enough people care to set certain quality expectations. When that erodes, so do nice things.

Re: Hardest problem in computer science: centering things

#227

Post by virtualritz »

TLDR; understanding the math of centering stuff doesn't mean you know how to center stuff in design.

The visual/optical center is not the geometric center. It is slightly above.

Graphic design basics.

The author mentions the word 'optical' once and 'visual' twice. Never in the above context.

I.e. they never explain this, so we must assume they don't know about it.

And we actually have evidence they don't.

The image below the sentence "Apple can't do it" is an example of visually/optically correctly centered text on the vertical axis. Slightly above geometric and giving the lowercase letters more weight in the decision. Some designers would argue the text should be moved down one pixel in the example at hand but I'd disagree.

The problem here is a different one. The ellipsis (...) is very light, optically, so the horizontal center should account for that and the text moved slightly right.

That is not shown or talked about at all. Go figure ...

Yes, there is a problem, it's the enshittification of design everywhere. Centering not existing is part of it.

As are people like the author who understand the problem but lack knowledge (sea above) to detail a correct solution.

They say "we developers" in one sentence. Graphic design was something you studied at uni when I was young. Just as CS. Maybe I'm just old but you don't know shit about centering stuff in design if you know how to center stuff mathematically.

And yeah, since I'm ranting:

Don't get me started on Material design. Where to start?

Tiny text only buttons that don't even have an outline and whose size depends solely on the length of the text inside. Etc.

Re: Hardest problem in computer science: centering things

#228

Post by gonzo41 »

Maxion wrote: post #98
dr_kiszonka wrote: post #78

Don't read this article, if you are not in web dev. Once you start seeing it, you can't stop seeing it, and it will drive you crazy forever. It is the same for noticing misalignment, recognizing color oversaturation, high quality speakers/headphones, etc. (It is a good article!)

The same happens when you: - Install flooring - Install trim in your own home - Build / install cabinets You will now see: - Odd flooring patterns and uneven floors - Know what it looks like when trim isn't coped - Uneven gaps between doors

These happened to me. Its kind of a curse. And with only so much time in the day I can't fix it all.

Re: Hardest problem in computer science: centering things

#229

Post by TeMPOraL »

mark38848 wrote: post #123
Maxion wrote: post #98

Earlier quoted context omitted.

The same happens when you: - Install flooring - Install trim in your own home - Build / install cabinets You will now see: - Odd flooring patterns and uneven floors - Know what it looks like when trim isn't coped - Uneven gaps between doors

Gaps in doors are such an American thing.

Doors. That one is a double whammy, because even if I force myself to unsee that a wing was installed unevenly, eventually gravity itself will remind me, as it will start closing on its own, or stopping at a different angle than other doors in the house, etc.

Re: Hardest problem in computer science: centering things

#230

Post by GuB-42 »

watwut wrote: post #170
ryandrake wrote: post #59

Earlier quoted context omitted.

It doesn't give me much confidence in the company's seriousness about quality. When I see these kinds of things in applications, my mind starts thinking, "OK, I wonder what else they half-assed?" Does the main functionality really work? If they can't even notice problems that you can literally see with your eyes , what important invisible things are broken, too? Should I really fork over hard-earned money for the pre…

I dunno. I found out that people who do care about how things look like, tend not to care about how they work and whether they are practical. And the other way round too. The slightly misaligned button is not "basic shit". It is useless shit. And this works on company level too. The groups that spend a lot of time caring about visuals tend not to give a damm about much else.

I can see the difference between practical design and bad design. A misaligned button is usually the latter.

Those who just want the thing to work without much regard for the looks of it will tend to use whatever default their UI package comes with, with minimal styling, if at all. It is often not bad in terms of correctness. Defaults may not look great, but they are usually well designed and consistent.

If you have alignment problems, it is often because you tried to do something to the looks, but did it poorly.

Post reply on HN