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

81–90 of 473 posts

Re: Hardest problem in computer science: centering things

#81

Post by strogonoff »

If there’s anything I learned from studying design and typography, it’s that there’s no singular correct rule you can use to align things.

Use precise measurements for your margins? Someone will say that perceptually it’s not symmetrical, and rightfully point out that perceived symmetry is the only one that matters. Adjust visually for your hanging punctuation, ascenders and descenders? Someone will draw a bunch of red lines and complain it’s not perfectly aligned with baseline, x-height, or whatever they prefer.

GUIs around us are rich with obviously broken examples where spinners spin out of their centers, text in boxes is misaligned, etc. However, as articles like this one show, even if every one of those is dealt with, us designers will still have everything to complain about. (Pro tip: if you struggle to find something to complain about in the English version of a GUI, just switch to, say, Arabic.)

Re: Hardest problem in computer science: centering things

#82

Post by naasking »

marcell wrote: post #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.

Arguably, "align" and "cross-align" are more direct and descriptive.

Re: Hardest problem in computer science: centering things

#83

Post by lelanthran »

jkaptur wrote: post #9

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 :)

For most designs, the visual centre is different to the geometrically accurate center: https://www.lelanthran.com/chap8/content.html

Mostly, you want to visually nudge things in one direction of the other until it "looks correct".

Re: Hardest problem in computer science: centering things

#85

Post by _factor »

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!)

Don’t forget the dead butterflies.

Re: Hardest problem in computer science: centering things

#87

Post by lifthrasiir »

sdwr wrote: post #80
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.…

Would setting constraints in the browser be feasible? Being able to define edges or midpoints that other elements can use for positioning. I guess it's way more complex than HTML rendering already is

It would be very hard and inconvenient to backport indeed. But webdev has moved much away from the initial HTML world anyway, so I believe it might be possible in a completely alternative rendering stack.

Re: Hardest problem in computer science: centering things

#89

Post by saurik »

anonymoushn wrote: post #67
saurik wrote: post #21

Earlier quoted context omitted.

I don't think you have to have a "pixel-perfect" rendering system to support centering things correctly?

If you don't, you'll be off by 1px?

So, I would use the term "pixel-perfect" to mean that the person making it can target some specific layout, choosing all aspects such as the sizes and fonts and exact colors and such. However, even without that, you can still say "I want this to be monospaced red on a blue background and larger than usual" and all of those properties can vary but hopefully something should happen that preserves at least some of that intent? The properties of vertically centering something inside of a table cell to me are not part of a pixel-perfect layout system, and yet I feel like my user agent is doing a pretty poor job if it doesn't have at least some sane strategy for this, and to the extent to which there are multiple different good ways to do it I hate that it seems to default to "if I can't select a good way I'll just use a bad way" in its zeal to refuse to expose multiple definitions of "centered" to the web developer (and again: I don't think being able to say "try to center this in a way useful for numbers" is part of "pixel perfect").

Re: Hardest problem in computer science: centering things

#90

Post by silisili »

mrbluecoat wrote: post #30

It's just as hard in the real world: https://ftw.usatoday.com/lists/nc-state-texas-ncaa-portland-...

Here's my real world example that seemed to break everyone's brain...I had a room in a house that I wanted two ceiling fans installed in, in a line, with even spacing between the fans themselves and between the fans and the walls at each end.

Everyone I called over to do said work said easy peasy, measure wall to wall, divide by 3, done and done.

I tried to explain this centers the bases, but then the fans will be closer to each other than the walls, but they'd either argue or just roll their eyes.

I finally just marked the ceiling myself, and found a person to do the work without asking why or arguing. Ah, perfectly spaced fans at last.

Post reply on HN