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

61–70 of 473 posts

Re: Hardest problem in computer science: centering things

#61

Post by mirekrusin »

zagrebian wrote: post #50

But is it really worth fixing these things? What do you achieve by spending time and money to fix these details, other than making users slightly less annoyed by your design? Maybe these details are not fixed because they don’t really matter that much. Have you ever stopped using an app because a button or icon was slightly misaligned?

Little shit here, little shit there has tendency to multiply and spread.

Some people like esthetics of swiss gardens.

Some people don't mind esthetics of favelas.

You can live e2e in both.

Re: Hardest problem in computer science: centering things

#62

Post by cdrini »

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.

I wonder if something like this would've worked. I always mentally think of flex box as having a primary axis that's like a rope that runs through the container, and the children are stuck onto this rope.

```

display: flex;

// The flex axis is the axis where items get added. So horizontal would add things to the right, vertical to the bottom

flex-axis: horizontal;

flex-axis-align: center;

// Normal as used in math to mean perpendicular to the curve

flex-normal-align: center;

```

Or `flex-align: center;` for short.

This would give a decently simpler mental model with only three terms: the flex axis, the flex normal, and the alignment.

And actually it would allow some interesting natural extensions! You could do `flex-axis: path(...)` to specify an arbitrary curve to position your elements on.

Any edge cases I'm missing as to why this wouldn't work?

Re: Hardest problem in computer science: centering things

#63

Post by BlueFalconHD »

wlesieutre wrote: post #43
dimal wrote: post #34

The Apple one doesn’t seem fair. You can do the math to center the box but typography with descenders throws everything off. I think if they had centered it “correctly” it would feel off.

I disagreed with a couple of the Apple ones. The iOS upper right tray stuff looks right how it is, I don't think they were trying to center them vertically with each other. It's treated more like a line of text, with some parts of the icons (outer border of the battery, rounded corners of the LTE bars) dropping below baseline like descenders. And the Business login screen pushes the centering around because it assign…

Came here to comment the exact same thing. Also the arrow on the login sceren is actually centered until the field is focused AFAIK.

Re: Hardest problem in computer science: centering things

#65

Post by T-Winsnes »

zagrebian wrote: post #50

But is it really worth fixing these things? What do you achieve by spending time and money to fix these details, other than making users slightly less annoyed by your design? Maybe these details are not fixed because they don’t really matter that much. Have you ever stopped using an app because a button or icon was slightly misaligned?

I think it comes down to which type of market you’re in. In some markets, like highly congested markets, design makes a big difference. It can be less important in more niche markets

Re: Hardest problem in computer science: centering things

#66

Post by BlueFalconHD »

jrmg wrote: post #15
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 :)

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…

Text based layouts should come back. Search "TextOS" on twitter for examples. If someone finds it, post a link below (responding on a Kindle Paperwhite, twitter won't run)

Re: Hardest problem in computer science: centering things

#67

Post by anonymoushn »

saurik wrote: post #21
crazygringo wrote: post #20

Earlier quoted context omitted.

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

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?

Re: Hardest problem in computer science: centering things

#70

Post by SJC_Hacker »

hattmall wrote: post #58
SJC_Hacker wrote: post #37

Earlier quoted context omitted.

Whats so terrible about the modern frameworks? I used to have that attitude, but after trying the latest version of ReactJS I think its pretty nifty for what its intention is.

For me, personally, React makes up too many new things just with potentially slight modification and thus adding unnecessary layers of complexity. Then it is incredibly painful if you're ever in a position to debug someone else's code when they were using react. It's not as bad as having to deal with graphQL but it's still pretty awful.

Unfortunately in web programming, an inordinate amount of time is spent on concentrating on the rendering side, messing around with the CSS/CSS framework, because thats what people see, and less on understanding state flow or the backend data model. That on top of deadlines, and have a recipe for disaster. It actually took me, a seasoned programmer with 15+ years professional experience, a few weeks to understand React one-way data binding to the degree that my UI did not have severe bugs.

But when you do have a nice component hierarchy, reasonable CSS and proper data flow mechanisms, its quite nice what it can accomplish, that would not almost unfathomable with Vanilla JS.

Post reply on HN