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

121–130 of 473 posts

Re: Hardest problem in computer science: centering things

#121

Post by Inviz »

dumbo-octopus wrote: post #107
Inviz wrote: post #102

Earlier quoted context omitted.

margin: 0 auto; (or simply auto for two-axis centering) will not have that issue. For multiple things in line, gotta use :nth-child to apply margin-left: auto on first item in row, and margin-right: auto for last item. Finally you can allow container to grow with the contents.

`width: fit-content;` is a good tip. Still, it's annoying that the current behavior is the default. I was not able to get the nth child variants to work: A B C D main { display: flex; flex-direction: row; justify-content: center; /* width: fit-content; */ } div { min-width: 400px; height: 300px; background-color: wheat; margin: 4px; } div:nth-child(1){ margin-left: auto; } div:nth-last-child(1){ margin-right: auto; }

Simply dont use justify-content in that case. https://codepen.io/inviz/pen/XWQxaOp

Re: Hardest problem in computer science: centering things

#123

Post by mark38848 »

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

Gaps in doors are such an American thing.

Re: Hardest problem in computer science: centering things

#126

Post by devjab »

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

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 flooring, installing windows, and anything on outside, however, where I’ll absolutely make sure it’s perfectly everything. Basically so my floors have none of the issues you describe as an example. Part of the success behind this is to hide the imperfections. You’re not going to ever build a perfect floor if you build it all the way to the wall. So what you do is that you leave a gap between the wall and the floor and you cover that gap up with wooden “footlists” (again not sure if that’s the correct English description). This gives you a “perfect” floor which aligns with everything in the room. The more crooked a room is, the more you have to cheat, but if you put in the effort it’s almost always achievable.I would like the small imperfections in these things as well. Ok, maybe not on the outside unless I was very sure it wouldn’t have an impact on the integrity of weather protection, but I wouldn’t mind crooked floors. The reason I strive to make them perfect is that other people won’t, which will make a property much harder to sell. Because unlike imperfect ”walling”, a floor correction/replacement will absolutely impact the value of a property.

But then there is the part where you will absolutely notice it when it’s not installed correctly. Which is what I guess you’re getting at, and I agree with you. The thing with buildings, however, is that you have to cheat. Buildings are imperfect and they can even more around a bit as weather conditions change. So with buildings you have to cheat. Which is different than with aligning things on the web, or at least it should be. So this is the part I disagree with a little.

As a side note people shouldn’t accept crooked floors and so on, especially not when you’ve hired professionals. They should know how to cheat.

Re: Hardest problem in computer science: centering things

#127

Post by strogonoff »

atoav wrote: post #119
strogonoff wrote: post #81

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…

Jup. Somw people like to think centering things is taking the bounding box of the visible pixel and centering the center of the bounding box. But some letters have more pixels in one half or the other, so that would leave you with more whitespace one one or the other side. That means despite being metrically centered it still doesn't look optically centered. I guess one could devise algorithms for that, but I haven't…

> Somw people like to think centering things is taking the bounding box of the visible pixel and centering the center of the bounding box.

That was my naive understanding for probably my first year at the uni. It got cleared up fairly quickly.

I imagine there can be typesetting/layout styles where this holds, but I would classify them as niche (maybe brutalism or something like that).

Funnily enough, in the very first example under Fonts I thought the author didn’t like “Manage…” because it could be pushed slightly to the right (due to ellipsis), but it turns out to be about vertical alignment which I didn’t see anything obviously wrong about in that particular case.

Once you deal with the obvious cases of lopsidedness in your design, the important quality becomes simply: stay consistent. Here, no self-respecting designer would pull one random example and say it’s wrong—you have to assess in context of design model as a whole, where you can either 1) show how one particular button breaks the model, or 2) argue that the model is wrong (which can be done, but good luck).

Re: Hardest problem in computer science: centering things

#129

Post by zarzavat »

I use position: relative; to make slight 1px adjustments. Of course it only works for me, but if I didn’t do this I would go insane.

The long term solution is leading-trim (or whatever it is called now). Pressure your favourite rendering engine to implement it!

Post reply on HN