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

311–320 of 473 posts

Re: Hardest problem in computer science: centering things

#311

Post by bazoom42 »

TeMPOraL wrote: post #149
outop wrote: post #108

Earlier quoted context omitted.

Before CSS people used to use tables, often nested, for all kinds of layout. Eg if your page had a header, a sidebar and a main text area, you would create a table with cells of the right relative widths, with invisible borders, and put each layout element in one possibly merged cell. This was essentially standard practice for a while. CSS allowed layouts like this to be done without tables. It still supported tables…

And then it took some 20-ish years for CSS to finally realize that aligning to a grid is a good idea and, through a long, painful, incremental process, eventually reinvent tables for layout.

CSS have supported ‘display:table’ for 25 years, which is exactly “tables for layout”.

Re: Hardest problem in computer science: centering things

#312

Post by jorvi »

BuyMyBitcoins wrote: post #105
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

I’ve noticed these things all my life. Even as a young child I would point such things out and others would have trouble seeing it. Once I was diagnosed with autism, this tendency of mine made a lot more sense. I’m curious if other people detect interrupted or irregular patterns so readily. It’s like there’s a part of my brain just looking for anomalies and I can’t turn it off.

Humans brains are pattern recognition machines. It’s how you are able to read efficiently, why you enjoy music, and why you are able to say “this alley seems shifty, best not enter it.”

Most people are able to naturally filter out most of it. You’re just a little less equipped to. People with ADHD have similar problems.

Psychedelics remove most of those filters, causing someone’s brain to get the raw data including all the anomalies in the processing, which makes patterns (visual and mental) both suddenly much more apparent and do weird things :)

Re: Hardest problem in computer science: centering things

#313

Post by culebron21 »

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

Former frontend developer here -- I did fight with these misalignments (typically those things that don't align were lots of nested containers, fighting with each other in different ways, so the solution was to clean them up and use one simple alignment).

But I stopped noticing these things, maybe because mobile UIs are a lot worse -- not in visual design, but in that they always do weird things and live their own life.

Misalignment is a tiny dirty spot on a clean but wrecked car.

Re: Hardest problem in computer science: centering things

#314

Post by layer8 »

bazoom42 wrote: post #262
TeMPOraL wrote: post #239

Earlier quoted context omitted.

But that is the point. CSS arrived, and people started saying you "just need to distinguish beteen the semantics of" a table "and the layout effect". Back then, the chant of the day was, "blood for the blood god, tabular data for the god, layout for the CSS god". And then it spiraled into general "separation of content and presentation" nonsense that, like in any good cult, people believed with their whole hearts, pr…

Is accessibility for the visually impaired a cult? How could Google even work if content could not be seperated from its visual presention?

Layout tables were never a serious problem for screen readers, this has always been overblown. Screen readers adopted working heuristics to distinguish between layout and data tables early on, because tables were used for layout almost from the beginning (as soon as it was possible to remove the visible borders).

See for example WebAIM https://webaim.org/techniques/tables/: “It is sometimes suggested, even by some accessibility advocates, that layout tables are bad for accessibility. In reality, layout tables do not pose inherent accessibility issues.”

Re: Hardest problem in computer science: centering things

#315

Post by kevincox »

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…

The problem with your brain and your eyes are that they aren't available after the user picks their preferred font or for user-generated content or probably not after the text had been translated.

Re: Hardest problem in computer science: centering things

#316

Post by layer8 »

crazygringo wrote: post #18

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

> First, that font rendering isn't just about metrics but varies across operating systems and browsers.

This is in parts, however, due to font metrics, because Windows and Mac use different conventions of how font metrics are specified in fonts: https://www.williamrchase.com/writing/2019-11-10-font-height... In other words, the usual font formats don’t specify font metrics in an unambiguous way.

Re: Hardest problem in computer science: centering things

#317

Post by latexr »

tonsky wrote: post #268
joestrong wrote: post #251

> (also don’t ask why justify-content became justify-items) It didn't. `justify-content` works with grid too, and will bunch all the grid cells into the center. `justify-items` is if you want the contents of each grid cell to be centered. Also, `place-content` or `place-items` for grid does both the horizontal & vertical at the same time. I admit that CSS isn't always obvious how it works, but it seems like the autho…

That’s what ChatGPT told me

I genuinely expected more of your writing and research (I’ve read your blog before) than regurgitating ChatGPT output without thorough verification and then using that as a defense when the error is brought to your attention. I expected you to understand ChatGPT cannot be blindly trusted.

This undermines trust in all technical parts of your writing.

Re: Hardest problem in computer science: centering things

#318

Post by layer8 »

rando14775 wrote: post #190
bluprintz wrote: post #77

Earlier quoted context omitted.

I've heard this described as inherent complexity versus accidental complexity. Inherent complexity (due to difficult real-world constraints) is fine. Accidental complexity, like that caused by overcomplicated tools or architectural decisions, just feels bad.

Why do I enjoy writing shell scripts then?

There is a threshold where you can still make things work right despite the accidental complexity, and some enjoy that challenge, but beyond that threshold you just have to accept that things won’t work right. CSS is very often beyond that threshold.

Re: Hardest problem in computer science: centering things

#319

Post by dumbo-octopus »

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

Earlier quoted context omitted.

`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

Hm, that works well enough as a replacement for `center`, but not any of the `space-*` variants. But "min-width: fit-content" works nicely for all the cases I tried.

Re: Hardest problem in computer science: centering things

#320

Post by echoangle »

avandekleut wrote: post #76
BlueFalconHD wrote: post #66

Earlier quoted context omitted.

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)

I had no idea hacker news was available on kindle paperwhite. I have one with the 3G networking and experimental browser. Is that what youre using?

There’s a browser on any normal Kindle, I think. At least clicking links on my unmodified kindle opens the websites.
Post reply on HN