return to table of content

Hardest problem in computer science: centering things

dr_kiszonka
87 replies
14h17m

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

Maxion
63 replies
13h8m

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

BuyMyBitcoins
28 replies
12h45m

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.

rogual
9 replies
9h54m

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.

jiggawatts
4 replies
8h58m

For me, it's the all-lowercase style of some of the current in-vogue AI leaders like Sam Altman that drives me crazy.

Is your shift key... broken? No? Use it please.

mavhc
3 replies
8h0m

97% of people don't use a shift key for capitals now it seems

roofone
2 replies
5h7m

98% don’t use periods. ;)

jmb99
0 replies
25m

This one is a bit more reasonable (to me at least). It seems to be an internet/texting convention that messages ending with a period are more formal/serious or potentially angry/irritated, whereas messages without a period are lighter/more fun. As an example:

“Have you taken the dog out?”

“Yes”

Vs

“Have you taken the dog out?”

“Yes.”

The second comes across as the responder being potentially irritated at the asker. I believe that this comes down to the amount of effort required to type the reply; adding a period is making the explicit choice to do so, whereas not doing so is the default. This isn’t the case for sentences in the middle of a multi-sentence answer, since a separator is needed anyways. But I find myself not adding a period even at the end of multi-sentence messages, and I automatically read any message ending with a period with a different tone than one which does not.

Maybe I’m just nuts though, that’s always an option. But with text being such a relatively limited medium for conveying emotion in short messages, I think this is a reasonable solution.

PawgerZ
0 replies
4h50m

70% of statistics are made up.

bluenose69
1 replies
8h31m

This is spot-on. HR is bad, but at least writing is not their main job, so I'm willing to cut them some slack.

My main concern is the writing I see coming out of the Public Relations and Communications departments. Writing is not exactly tangential to those fields.

It wasn't always this way. What has happened?

vundercind
0 replies
58m

Maybe it’s related to how we (government, industry) used to routinely make great instructional videos and other learning materials, but are now largely terrible at it.

I suspect it’s all connected to the rise of a professional management class, rather than promotion through the ranks, and management by people who’ve done the work. Nobody who’s in a position to demand better or to make sure the right people are in the right roles, actually knows WTF they’re doing outside of a spreadsheet and PowerPoint.

Akronymus
1 replies
9h48m

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 necessary"

TeMPOraL
0 replies
9h11m

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.

reaperman
7 replies
12h25m

I have this with spelling. Even a fractional glance at a poster/billboard/sign, without focusing my eyes on it, and certainly without reading a single word ... any misspelled word triggers a flag in my brain sort of "pinging" me with the precise location of the misspelled word.

Brananarchy
6 replies
11h26m

The grocer's apostrophe (which I will argue should be called the grocers'(1) apostrophe, since there are many offending grocers) is the bane of my existence

(1) My phone absolutely tried to correct that back to "grocer's"

kqr
2 replies
10h36m

which I will argue should be called

I think you're missing the joke of the name!

Brananarchy
1 replies
10h18m

I don't think it's a joke. The possessive plural is a disaster in American English

Nevermark
0 replies
9h24m

Well, it is "a baker's dozen", right? Not "all the bakers' dozens". Since the phrase incorporates a reference to a single individual, as a representative concept for all bakers.

So "the grocer's apostrophe" makes sense as a phrase referring to a typical individual grocer with a typical atypical apostrophe, standing in as a representative for all grocers and all their darned grocers' apostrophes.

ttepasse
1 replies
10h37m

If you want to make your existence slightly more irritating: Learn German and move to Germany. There the possessive s ending is written without an apostrophe - but there is an equivalent which then falsely writes the possessive with an apostrophe - the so-called Deppenapostroph (idiot's apostrophe).

rob74
0 replies
7h18m

What annoys me most about German vs English is that German has lots of English loanwords ending in "y" (e.g. "Party"), but it's officially not allowed to use the plural form that would be correct in English, e.g. "Parties" - you have to write "Partys". As a bonus, you could try using "Party's", but that would be incorrect again...

dmurray
0 replies
8h2m

Maybe it should be the grocer's' apostrophe, since there are many offending grocer's.

StefanBatory
3 replies
10h29m

Is that autism thing? My therapist suspect I'm autistic, and I have always noticed things like this - or trying to align everything in my mind when I look at things, or trying to split the into two halves of equal volume.

romwell
1 replies
7h51m

Is that autism thing? My therapist suspect I'm autistic, and I have always noticed things like this - or trying to align everything in my mind when I look at things, or trying to split the into two halves of equal volume.

Very much in line with being neurodivergent.

Sounds more like autism than ADHD, but it's hard for me to tell, 'cause I'm both[1].

[1] https://romankogan.net/adhd

StefanBatory
0 replies
7h6m

... I guess another thing to bring up during session. Thanks. (and to the other person thanks too, but I don't want to make another post)

coldtea
0 replies
9h50m

It's related to improved pattern recognition in asd and adhd. If it particularly bothers someone, a touch of OCD might be involved too.

stinos
1 replies
7h54m

I’m curious if other people detect interrupted or irregular patterns so readily

All the time, and I learned to not care a lot, even like some; for instance there's a lot of (mostly abstract, surrealism) art which does all the things wrong on that front but which is extremely enjoyable to me. Same weird way with music: exact 4/4 stuff is mostly boring, often even annoying, but give me funky off-beat stuff, chaos and noise and it brings a smile to my face.

There's only one thing which I can't shake off and that's lines which are meant to be, but aren't eaxcatly, parallel or right angles. Can keep staring at those. Especially when they are like very close to being correct but look like they're off (for like 1mm over 1m). Not the first time I actually get up and take a ruler to verify.

Brian_K_White
0 replies
7h3m

But then there is the intentional curvature in ancient stone columns, where ther the pillar is neither a perfect cylinder nor even a perfect cone, and it's on purpose because actual perfect forms don't look right to humans.

Like one part of the article shows the Apple logo in a circle, and the correct centering is not to have all points on the logo equidistant from the circle, but to allow the leaf to go a lot closer than the rest.

romwell
0 replies
7h56m

I’ve noticed these things all my life.

I was about to write: As someone late-diagnosed[1] with ADHD[2] and discovering they're autistic, ... -

Once I was diagnosed with autism, this tendency of mine made a lot more sense.

...yup. This is what I was a about to write.

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.

The answers to that are no and yes, that's the blessing and the curse of autism.

Seeking and recognizing patterns is one of the defining traits.

_____

[1] https://romankogan.net/adhd#Diagnosis

[2] https://romankogan.net/adhd/#Awfully%20Described%20Human%20D...

jorvi
0 replies
7h2m

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

ddmf
0 replies
8h4m

I'm autistic and I see patterns and issues with misaligned patterns which cause psychic pain. Also phase issues with sound because it feels physically painful.

Aaargh20318
0 replies
11h7m

Also autistic, I have this very much with displays. I can’t understand how people can stand LCD televisions. They usually have non-uniform brightness which is super distracting.

devjab
13 replies
11h47m

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.

Stratoscope
7 replies
11h0m

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.

Here in the US, it's called “baseboard”:

https://www.google.com/images?q=baseboard

https://en.wikipedia.org/wiki/Baseboard

“[Baseboard's] purpose is to cover the joint between the wall surface and the floor. It covers the uneven edge of flooring next to the wall; protects the wall from kicks, abrasion, and furniture; and can serve as a decorative molding.”

lostlogin
3 replies
10h2m

It’s ‘skirting’ here in NZ.

OJFord
1 replies
4h17m

Probably throughout the Commonwealth, skirting or skirting board (it is here in the UK too), and a confused Canada as for most of these words!

skipants
0 replies
3h19m

This time the coin-flip of Canadian nomenclature landed on "American"; we call them baseboards.

defrost
0 replies
10h0m

Ditto here in NZ's West Island (Australia).

alistairSH
1 replies
5h56m

And commonly, in the US, you'll see baseboards (3-4" tall) which were sloppily cut and then that was, in turn, covered up with a quarter-round moulding. If the floor and wall are installed properly, the quarter round shouldn't be necessary.

jcims
0 replies
3h53m

Hey now!! I represent this remark!

glitchc
0 replies
3h22m

The gap also helps with expansion, otherwise the hardwood panels will form ridges in the middle of the floor.

kqr
1 replies
10h32m

I think it adds a little soul to it that will make me happy down the years.

The word for this is wabi-sabi.

TeMPOraL
0 replies
9h15m

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

drikerf
1 replies
9h35m

AFAIK you should always leave space between floor and walls. As the material may grow/shrink with temperature etc. Very noticable in Sweden.

aidos
0 replies
7h52m

It’s also to prevent moisture issues. If you plaster right down to the floor then the plaster slowly soaks up moisture over time. Instead an unsightly gap is left to prevent this bridging. Skirting / baseboard covers the gap.

So much of what happens in house construction is about water management and without understanding it, it’s common for people to create issues. Regularly see patios that cover airbricks, causing suspended timber floors to rot.

dudefeliciano
0 replies
4h31m

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.

design systems are imperfect, and can become even more so with changing specs/frameworks/dependencies/browser updates/...

mark38848
3 replies
11h51m

Gaps in doors are such an American thing.

swader999
0 replies
4h17m

My house is built on top of bentonite clay (I think that's the term). My doors would stick if there weren't gaps. I have a system where I measure the level across the house and adjust my teleposts every year too.

VMG
0 replies
11h9m

Look up Altbauwohnung

TeMPOraL
0 replies
9h6m

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.

vishnugupta
1 replies
8h38m

I haven't built/done any of these and yet notice misalignments and it drives me nuts. Hundreds of thousands of dollars (equivalent in INR) spent to on buildings and they don't bother to align bricks; it's as if there's no value in aesthetics, visual beauty, symmetry etc.,

/rant

felixg3
0 replies
8h30m

Which I find very interesting. I’ve seen that there are constructors in India that are very much capable of recognizing and correctly implementing the alignments, but you pay so so much more than the average constructors- and then you are often in a conundrum where you have to choose between paying market rate and getting equivalent precision, or to pay 5x market rate to get a very good standard.

swader999
1 replies
4h25m

Most import rule is to never do your own drywall. I still haven't learned it.

stronglikedan
0 replies
4h13m

That's the easiest though! All you need is a good sander.

lostlogin
1 replies
10h4m

Tiles. There is a correct way to install them. I don’t know how you decide what’s correct, but sometimes it’s centred, sometimes a full one on the left, or the right.

Then you have the same scenario but top to bottom.

atrevbot
0 replies
4h21m

When we were building our house I built a tool[0] for exactly this problem so I could visualize how tiles would look w/ different arranging. Worked really well for both floor tile and tile on the shower walls

[0] https://tilelayoutwizard.com/

ddmf
1 replies
8h7m

This is what causes me absolute task initiation paralysis - the fear of not being perfect - even with my new attempt at adherence to "don't let perfection be the enemy of good enough"

Does anyone else who comes into the house notice anything? Very unlikely unless they are craftspeople.

thejohnconway
0 replies
8h2m

Here's how you do it, make everything so poorly in terms of fit and finish that it becomes hard to find things that are perfect (or even good). Embrace the aesthetic.

another2another
1 replies
9h39m

I thought the tiles on my bathroom floor were perfectly flat and even on the ground, until I switched off the light and used that damn laser on the Dyson vacuum cleaner.

What greeted me was an uneven landscape of tiles that the naked eye just didn't see.

TeMPOraL
0 replies
9h31m

Same, except with panel floor in our bedroom. Moved the bedframe and some cabinets around, suddenly the bed is really wobbly. Couldn't see why until I took my laser level and started sweeping the floor with the "red X" at a low angle, like it was sci-fi scanner.

That laser level actually revealed plenty of places around the apartment I dare not look at anymore, lest I get annoyed at the contractors... and the original builders of the block.

vundercind
0 replies
1h6m

Truth, I spend every free second in an Airbnb analyzing their trim, electrical, flooring, et c work. Spotting where additions were made. Can’t turn it off.

throwitaway222
0 replies
2h27m

I have a wall outside where the siding is off 1/4" on one side and it drives me insane. No one but me knows it was off.

psychoslave
0 replies
8h58m

Oh yeah, ignorance is bliss. :)

hwbunny
0 replies
4h6m

I can attest to that. Painting doors and then watching the result is akin to watching a good painting/desktop background for too long... as time passes you start to notice the irregularities. Like the girl's hand is overly big, or her legs are exaggerated.

gonzo41
0 replies
9h8m

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

doubled112
0 replies
3h53m

If you can't cut it right, caulk it white.

account42
3 replies
7h48m

Hi I heard you might like to learn about keming.

rob74
0 replies
7h34m

I wish I had never heard of kerning! I wasn't even aware that I was sensitive to kerning issues until this abomination came into my house: https://th.bing.com/th/id/OIP.bdzKtgJ5MkGpA5iutzfTxQAAAA?rs=... Now, whenever I see that thing, I feel a sudden urge to throw it out of the window...

nonfamous
0 replies
2h10m

Leam to kem.

mckirk
0 replies
7h11m

Thank you, my day is ruined.

niutech
2 replies
9h52m

Really? This is the first world problem! What drives me crazy are people being selfish and stupid, high taxes, trash dumped in forests, air pollution, etc. Not some slight misalignment on web pages!

kekebo
0 replies
9h44m

Word.

TeMPOraL
0 replies
9h1m

All of those are manifestations of the same thing: not caring enough.

para_parolu
1 replies
4h9m

And if you want to suffer more proceed to this design game https://cantunsee.space/

Sakos
0 replies
2h50m

I just went through all of the easy ones and most of them seem "obvious", but some of them seem like preference (like the separator width). Another one I noticed is medium 6, where I'm not sure the smaller icon is necessarily always better. I'd be careful taking something like this as gospel without careful scrutinization. A lot of it feels like modern UI dogma which likes to waste space for no reason other than aesthetics, rather than actual UI research. Some of it just feels completely arbitrary.

culebron21
1 replies
6h56m

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.

hwbunny
0 replies
4h4m

Well, if you have full control on the frontend, then it's your responsibility to make these right.

GoblinSlayer
1 replies
10h36m

motherfuckingwebsite.com is centered alright to the whole width of the browser windows right in the middle of the browser window.

checkyoursudo
0 replies
9h41m

As great as it is, it still sucks because on my full-screen browser, the text spans the entire monitor width, which makes text hard(er) to read. But as soon as you start forcing narrower columns for better readability, you start to run into positioning and precision problems again.

Literally cannot win.

sonicanatidae
0 replies
2h17m

Bad Kerning is what drives me nuts, like how can the person that did it look at it and think, "we're good!"... le rage

edit: ahh.. a vote for bad kerning. lol

rrr_oh_man
0 replies
12h23m

Or keming (bad kerning).

nurumaik
0 replies
9h25m

Several years ago I spent around 2 weeks on fixing antialiased font rendering in a game engine. Had to look close at the text in other apps to compare. Took me months to unsee it

iforgotpassword
0 replies
35m

Once you discover a mastering error in a song (or get told about it) it might ruin the song.

atombender
0 replies
8h28m

As usual, there's an XKCD about this: https://xkcd.com/1015/.

_factor
0 replies
13h38m

Don’t forget the dead butterflies.

PaulHoule
0 replies
1h31m

I showed my wife (who teaches people to ride horses) some photos of a woman in China with a horse and her comment was "Why is the halter twisted?"

I went to an MLS game with someone who had been a soccer ref and he pointed out that the line on the side of the field wasn't perfectly straight.

Akronymus
0 replies
9h52m

I should've heeded your warning. Altough, the loading circle was funny

Animats
75 replies
14h37m

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. Autodesk Inventor and Fusion 360 have good 2D constraint solvers, ones that can put something on a centerline, or parallel, or whatever, including curve tools. Webland never got that far.

bazoom42
45 replies
13h12m

It is a weird myth that CSS somehow discourages tables. CSS have supported styling html tables and ‘display:table’ (allowing a table-like layout without html-tables) for 25 years.

Float and clear was grandfathered into CSS since they were added to HTML by Netscape. They are fine for their intended purpose: placing images in a text and have the text flow around.

Other positioning systems you mention does not solve the same problem as CSS. CSS has to support viewports of any size and dimensions and allow text to scale independently of the viewport size and still remain readable.

outop
13 replies
12h35m

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, but for the case when you actually want to show tabular data which would appear like a table on the page.

TeMPOraL
10 replies
11h5m

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.

yurishimo
8 replies
10h27m

I mean, semantics are also good! Yes, CSS grids are a lot like tables in some ways, but not having to add 25% more DOM elements to fake a table layout (display: table/table-row/table-cell; that's 3 divs for one row!) is also a thing to be celebrated. Plus, in practice, grid is a lot more powerful than doing a few common layouts. Grid took so long precisely because they were trying to think a little further ahead rather than just pushing something out into the world and hoping it works out. Thankfully web standards have matured and are more careful not to repeat mistakes like the debacle that was CSS property prefixes.

mike_hearn
3 replies
10h14m

Nah, semantics are worthless. The whole semantic web idea never took off for good reasons, HTML5 semantic tags don't have any meaningful semantics and you can't even reliably remove boilerplate from HTML without ML pipelines (a basic use case you'd expect any "semantic" document format to nail easily). Then the invention of LLMs killed it twice over.

HTML is a graphics rendering language in denial about its true nature.

Grid took a long time because everything takes a long time when you have to align mutually competing organizations and there's no profit motive involved with the actual work itself. There's no real technical benefits to CSS layout over table tags. A table tag isn't a heavy object. CSS cascade calculations on the other hand ...

PetitPrince
1 replies
9h34m

I suggest you spend some time with a screen reader or have a look at the accessibility tab of you browser to get a feel of the worth of semantic web.

It's true you won't ever have a perfect semantic representation of a page (and I have no idea how blind people manage those infinite scroller), but in my mind having <nav> or <div role="nav"> instead of <div class="my_non_standard_nav_classname"> still helps a lot on that aspect.

mike_hearn
0 replies
5h38m

I use Shortcat all the time which relies heavily on the accessibility tree.

Screen readers / accessibility tools don't use the semantic web. The semantic web doesn't exist, it refers to the Tim Berners-Lee vision of documents being XML or RDF data structures with schemas, transformed into pixels using stylesheets and XSL:T. It never happened for various reasons.

Akronymus
0 replies
9h44m

CSS tables can have grid-auto-flow as dense, which is quite helpful at rare times. You obviously could do that wit tables + js, but it's nice to not have to worry about the implementation details.

coldtea
2 replies
9h40m

I mean, semantics are also good! Yes, CSS grids are a lot like tables in some ways, but not having to add 25% more DOM elements to fake a table layout (display: table/table-row/table-cell; that's 3 divs for one row!) is also a thing to be celebrated.

Semantics in the context of CSS is a stupid idea web designers came up with. They heard the concept of "semantic", and had to fit it in, to appear smart. Should have asked actual developers.

(the so-called "semantic web" was another such failed idea dragged on for an eternity for research grands. Remember RDF? What fun!)

The semantics is not the job for HTML, which is the final artifact for display, and not a data interchange format, nor the format you store your info as. So there's no need for it to be semantically clean and "parsable/reusable" (to do what? web-scrap it? As for screen-readers, there are official metadata annotations for those - not to mention they wouldn't know to do anything special for each ad-hoc different "semantic" tag soup people come up with with the severely limited for that reason HTML5 tags, or worse divs).

The semantics belong to whatever backend and metadata you have your content in, before it gets rendered as HTML.

And if you need to also give it to users in parsable/reusable form, allow them to query a JSON (or structured) version.

AlienRobot
1 replies
7h43m

Yeah, it's a joke. You can't take "HTML semantics" seriously when you often depend on actual element position IN THE HTML CODE to make things work, specially when modern web design demands elements to just JUMP AROUND all over the page when the width changes.

If they really wanted semantics you would think there would be actual support for that.

By the way, I've asked this question here some other day, but nobody has any idea if most "semantic" tags are being used for anything at all (and Wordpress naturally uses all of them wrong, so there is no point even bothering).

wizzwizz4
0 replies
4h51m

There's not much software that takes semantic HTML as input, because barely anyone writes semantically-valid HTML. It's a vicious cycle. (Look upon the parsing rules for a high-quality screen reader, and weep.)

No point making a semantic web browser before we get a semantic WYSIWYM HTML editor. Maybe those could be the same program, like in olden times?

ttepasse
0 replies
10h10m

but not having to add 25% more DOM elements to fake a table layout

I'm not the most current, but as I remember in CSS tables those table-internal elements generate the needed anonymous boxes of rows, tbodys and such, when those arent't specified:

https://drafts.csswg.org/css-display/#example-d11b97c3

bazoom42
0 replies
7h3m

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

tored
1 replies
7h32m

Funny thing is that it still easier, even today, to use a frameset rather for header, sidebar and main area rather than fiddle with the new grid system.

bazoom42
0 replies
22m

Are framesets even supported in modern browsers? They have been removed from the html standard.

coldtea
11 replies
9h47m

It is a weird myth that CSS somehow discourages tables. CSS have supported styling html tables and ‘display:table’ (allowing a table-like layout without html-tables) for 25 years.

Not a myth in any way shape or form. Tables for layout (not tables in general) were discouraged with various arguments in favor of "float/clear", even decades before a sane substitute (grid/flex) was available.

Other positioning systems you mention does not solve the same problem as CSS. CSS has to support viewports of any size and dimensions and allow text to scale independently of the viewport size and still remain readable.

None of those requirements is unique to CSS, and none of those requirements necessitates the stupid float/clear mechanisms that were shoved into people's throats for 15 years.

We're talking about the style language that had layout shoe-horned into it, and which tool decades to develop the most basic layout mechanisms available in GUIs for decades, grid layout and flex layout. And even when it did, it didn't it badly.

bazoom42
9 replies
8h8m

CSS never recommended float/clear as an alternative to table-based layout. CSS had ‘display:table’ for when you needed a tabular layout without the semantic baggage of the table-tag.

thejohnconway
4 replies
7h55m

"CSS" (not sure what you're referring to here, the standards bodies?). Endless articles from the mid 2000s kept saying tables bad, here's how you layout without tables. All of them used floats for layout, not display:table. Partly I suppose this was because IE didn't support it until 2009, I think.

Nearly all layouts people actually want are table-like, and I think CSS really was misguided in its text-flow as layout approach.

winternewt
1 replies
7h45m

The reason for the advice against tables was that the "semantic web" was all the rage (probably mostly because Google wanted to make it easier to index stuff). If you have tabular data, using tables was just fine. The issue was with using it solely to control the graphical presentation without any semantic basis for putting it in the table. Same reason you don't use <H1> just to make the text bigger.

coldtea
0 replies
7h34m

The issue was with using it solely to control the graphical presentation without any semantic basis for putting it in the table.

There shouldn't be any semantic basis needed.

HTML is not a semantic data exchange format, was not designed to be (the pathetic handful of semantic HTML5 tags added to be used ad-hoc included), and it inevitably includes content, style, and behavior (js).

The semantics should belong to data intergchanged (and storage format), and the reusability should be on the data storage/query backend, not to the markup language.

Adding semantics to the markup duplicates the semantics already present in your DB or JSON API scheme or query server/storage in general.

bazoom42
0 replies
7h33m

Yeah there was a period of time when IE didnt support display:table and ARIA hints wasnt as developed. So if you wanted to create accessible web sites with nice layout you had to resort to weird hacks, often using floats.

Floats was never intended for that purpose though, it was just a desperate hack to get around IE limitations.

But html tables was not a viable alternative for organizations which was required to have accessible websites.

(Today I believe it is possible to create accissible html tables through ARIA hints, but that was not an option at the time.)

bazoom42
0 replies
2h54m

Nearly all layouts people actually want are table-like, and I think CSS really was misguided in its text-flow as layout approach.

I think this is the core misunderstanding in this discussion. CSS 2 supported both text-flow and tabular layout and both layout models were reverse-ingeneered from how Netscape rendered HTML.

There is this weird idea that CSS is somehow opposed to tables or tabular layout, while a significant part of CSS2 is actually the codification of how tables render.

coldtea
3 replies
7h39m

CSS is just a language + words of paper spec.

CSS, as in "CSS evangelists", influential web designers, guidelines in web development resources, books, and so on, recommended and advocated for the use of clear/float.

You might not have been there, but float layout was a big thing back then, and everybody was guilt-pressured to use that - neither tables, nor "display: table" (which was used by some, but also discouraged).

bazoom42
0 replies
4h31m

You are probably remembering advice from the dark age of IE6 dominance where display:table was not well supported. I have also seen advice againt using html tables in the early days of mobile browsers since they handled them badly.

The problem is people forget context. The advice “dont use tables <in this specific context under these specific constraints>” is remembered as “tables are bad, never use tables or anything which remotely looks like a table”.

ajmurmann
0 replies
2h35m

'display: table' wasn't consistently supported and '<table>' for layout caused issues for screen readers because they (rightfully) expected content that's tabular in nature.

JimDabell
0 replies
4h42m

I never saw anybody discourage people from using display: table. The reason why nobody used it was because Internet Explorer 6 didn’t support it.

mananaysiempre
0 replies
5h0m

Tables for layout (not tables in general) were discouraged with various arguments in favor of "float/clear"

Table markup was discouraged. There’s nothing intrinsically wrong with display:table from a CSS/semantic markup evangelist’s point of view, it’s just awkward to use, requires you to arrange and order your markup just so (sometimes contrary to semantics), and was rarely mentioned in the days of float/clear because IE screwed it up in various ways (that were more difficult to fix than those for floats). It works reliably now, but as far as laying out the page goes the requirements for ordering the markup will probably be incompatible between desktop and mobile. For insides of buttons and such, though, go nuts.

bandrami
8 replies
9h38m

I absolutely remember a ton of pieces about how we all needed to stop using tables (and 1x1 transparent gifs, too) for page layout because CSS was The Right Way

bazoom42
6 replies
9h30m

There is always a lot of confusion about this because “tables” can mean different things - it is both a set of structual elements in HTML and a layout model in CSS.

CSS is “the right way” to control styling and layout, but that does not mean you can’t use tables.

In the early days of the web people used the BLOCKQUOTE element to create margins since this was the only way. When CSS arrived, it became “the right way” to create margins - but that does not mean you can’t use blockquotes! You just need to distinguish beteen the semantics of a quote and the layou effect of margins.

But I’m sure someone understod this to mean that quoting things were bad.

TeMPOraL
5 replies
8h53m

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 <table> 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, preached to make new converts, then did the opposite because reality demanded it, and couldn't see the problem. CSS Zen Garden notwithstanding, we ended up with div soups (later, semantic div-equivalent soups) inseparable from complex CSS, because form is function; your content is always designed with a particular form in mind.

bazoom42
4 replies
8h19m

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

layer8
1 replies
6h50m

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

bazoom42
0 replies
3h59m

The heuristics described still depend on semantic html e.g the use of <th> or <caption> to signal a data table.

zaphar
0 replies
4h26m

Google never had a problem working with content that was blended with it's visual presentation. They literally doesn't care. They crawl anything even pdf and other non-html content.

The semantic web was born from a belief that it would enable a peer to peer web that never materialized. Accessibility was better solved by aria annotations a long time ago and the semantic web was never going to properly solve it.

TeMPOraL
0 replies
4h35m

How could Google even work if content could not be seperated from its visual presention?

Approximately. Like it did and does.

The simplest way is to just strip the markup (or, for purposes of indexing, just ignore any token that resembles a HTML tag). That'll easily get you 90% there. You'll lose important information that's tied to form, but that's a consequence of operating in plaintext land. If doing this to build an index of the web, you'll have problem with scoundrels stuffing irrelevant text made invisible to humans by markup/CSS/JS, but that's exactly the problem Google used to have for a long time, and the essence of what SEO is :).

dspillett
0 replies
9h1m

The issue is people taking “tables are bad for non-tabular layout” and just remembering the first three words. People like stark binary yes/no rules, so “tables are bad” was born and spread widely.

If your layout is intended to be a table, then a table (styled with CSS) is the way to go, otherwise use semantic HTML (styled with CSS) and you will (in theory) have an easier time making the design work well at different sizes/resolutions and in alternate UAs like screen readers.

Moru
7 replies
12h37m

When people say not to use tables they mean <table><tr><td>for layout of the entire page</td></tr></table>

coldtea
3 replies
9h39m

They should not have advised against that either.

It was a much saner, simpler, and more efficient mechanism that the clear/float monstrocities imposed upon people in the period before grid, which reinvented the same thing (table layout) just without the actual tags.

bazoom42
2 replies
7h54m

You could use ‘display:table’ in CSS if you wanted a tabular layout without using the table-tags. This has been part of CSS for 25 years.

Grid is newer and more powerful.

zaphar
1 replies
4h19m

display:table was never really evangelized for tabular layout. They were pretty much ignored and the literature and documentation missed the point. Tabular layout is really just another word for grid layouts. Grid layouts took forever to arrive. Tables were the only reliable way lay things out in a grid for a very long time and yet were discouraged regardless. There were people who knew about display:table and used it and some of us were nevertheless told we were doing it wrong because people got hung up on the word table.

Like many things in CSS features that should have been present in the original 2.0, when it became clear that the web wanted to be laid out like a magazine, Took multiple decades to actually appear. As a result we are still seeing the fallout of those failures in our ecosystem.

bazoom42
0 replies
46m

Sorry are you saying ‘display:table’ was not viable for grid-like layouts because someone might confuse it with the html <table> tag?

That is like saying Go is not a viable programming language because someone might confuse it with GOTO and consider it harmful.

justsomehnguy
1 replies
11h25m

they mean

They shouldn't had mean, they should had said that.

Because 99% of time we have a bunch of <p> in assortments of <div> representing a tabular data. Dozens of "web" "front-end" "frameworks" doesn't help it in any way, too.

Moru
0 replies
8h36m

Yes, table for layout and table for tabular data is different things. This was usually very clear in advices. Don't use <table> for layout. DO use <table> for tables.

est
0 replies
4h11m

and instead we have a clusterfuck of <div> with tons of attrs.

dumbo-octopus
1 replies
12h51m

This very website is built entirely on tables.

(which, unfortunately, is why is has terrible zoom support)

silon42
0 replies
9h49m

Tables usually have much better zoom support than css hacks of old...

Also, I often use 'zoom text only' in Firefox... that causes havoc on some sites. Also, I disable web site fonts by default.

andrewmcwatters
10 replies
13h5m

Man... whole generations just straight up either do not realize, or have forgotten that early CSS revolved around creating documents, not apps, and that all of those design paradigms originated from typesetting.

In the same way that one would float a figure to the left or right of lines of a paragraph, `float: left;` and `float: right;` allowed you to do the same.

Open a textbook and look at lines of a paragraph flowing (where content "flow" layout comes from) around a figure, such as an image or a diagram.

The World Wide Web was documents.

In this context, `float` was a genius idea. There's literally no other way in CSS to do this without a bunch of hacks.

IshKebab
7 replies
11h8m

Everyone realises that. They just understand that it is a big problem with CSS. People wanted app-like layouts since before CSS was a thing.

The problem is the people who designed CSS had an ideological axe to grind. They believed that HTML should only be used for document layout.

pixelfarmer
6 replies
10h29m

But that is the fundamental problem behind all of web nowadays: It was initially designed for documents; there are precursors for this entire HTML stuff (hypercards and similar things). Funnily enough, there existed tech even back then that was much much better at dealing with actual applications and their requirements. Unfortunately, many stupid idiots decided to use the "web" for that instead and mangle something aimed at documents to hell and back to actually do apps with it. The amount of time (of humans) and resources (not humans, but computing power, energy, ...) wasted on creating and running kludge after kludge to coerce the "web" into "something for apps" is absolute insanity.

AlecSchueler
3 replies
9h56m

They weren't really idiots, though, that's quite harsh. People wanted to be able to share software but there were so many barriers to entry at the distribution/installation/update phases that they used the solution that didn't require any of that.

It was a hack but it worked better to serve the needs of the users.

niutech
2 replies
9h38m

Come on, there are so many native cross-platform solutions which are easy to go and much less bloated than web engine, e.g. Qt/GTK+/wxWidgets/Xamarin/etc.

anymouse123456
0 replies
7h10m

Now take that beautiful application you have made and your customers want, and beg the trolls who sit between you and them for permission to distribute it.

Assuming you get said permission some weeks later, now hand over double-digit percentages of your top-line revenue to these despicable rent-seekers, do the same with your tax payments and notice how you're left with less than 30% of the value you have created.

AlecSchueler
0 replies
7h8m

All of those would require an user to download and install something, no? How do you push updates?

mietek
1 replies
9h59m

You reference HyperCard as if it was only a document creation system; it was not. People have been building applications in HyperCard from the start.

https://hypercard.org

pixelfarmer
0 replies
8h34m

Yes, that was not intended as such. Thanks!

TeMPOraL
1 replies
8h45m

Honestly, that itself sounds bad too. The concept of floating sounds like something invented back during manual typesetting or earlier.

I think anyone ever trying to write a paper or book with images in it using tools like LaTeX knows how bad it is to let the tool position images for you. It's always wrong, and one of the first things you learn is how to pin the image in between the text lines/paragraphs you wanted it to be between.

Text-to-diagram tools like PlantUML (and arguably even Graphviz) make this mistake too. The moment you put more than a couple things in your diagram, you discover that auto-layout can't ever make the result readable, and you look for ways to pin parts of the diagram relative to other parts; something these tools don't let you do either.

And then all three classes of tools here - HTML, typesetting, diagramming - violate the principle of least surprise in the nastiest of way: make one little change, add a letter or word somewhere, suddenly the result looks nothing like it was before, as the auto-layouting flips everything around.

graphviz
0 replies
6h19m

A lot could be said. If there's a mistake, it was the economy not providing sufficient resources to solve this problem well. There was certainly awareness of this topic and some attempts to address it (for example North, Stephen C. "Incremental layout in DynaDAG." International Symposium on Graph Drawing, Berlin Heidelberg, 1995, or North, Stephen C., and Gordon Woodhull. "Online hierarchical graph drawing." Graph Drawing: 9th International Symposium, GD 2001 Vienna, Austria, Springer Berlin Heidelberg, 2002.

Successful systems like Tom Sawyer Software or yWorks have dynamic or incremental layout features. The market of course strongly rewarded work on interactive systems like Visio that were well integrated into larger platforms.

Not sure who remembers but high performance incremental constraint-based layout was one of the computer science lights that failed in the 1980s and 90s but with so many fundamental advances in technology (processors, algorithms, solvers, software platforms) and new emphasis on language-based approaches (in part due to LLMs) there might be a better opportunity now.

Anyway it's a hard problem, it's not as if nobody was aware of it.

ozim
7 replies
12h34m

I don’t think it was that tables were bad. They were too formulaic and too strict and it was hard to do something that would stand out.

With CSS it wasn’t dumping problem on the others, it was giving the freedom. Problem with freedom is that it is never free and you also have to fix additional problems that come with it.

atoav
3 replies
10h50m

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 of device, size of screen, media used.

So the holy grail in my opinion is to write HTML that contains only content and metadata and next to no elements or attributes that are needed purely for semantically irrelevant layout and styling purposes — and then do all the layout and styling in CSS. Styling tags like <em> or the occasional <section class="notice"> are okay, one should never be too strict with such ideals.

The advantage here is that this provides the maximum decoupling between the content and the layout/styling which not only helps with future layout updates, but improves the accessability of the page.

AlecSchueler
1 replies
10h0m

But that was an issue of philosophy that got trumped by practical needs

Also very real issues like accessibility.

matsemann
0 replies
9h18m

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.

naasking
0 replies
4h6m

The problem I see with using tables for layout is that it fucks up the semantic meaning of the html file.

I think the real problem is that it doesn't permit responsive layouts for different screen sizes and orientations.

watwut
2 replies
10h51m

The issue with CSS is not too much freedom. It is that as an API, it is frankly, retarded, horrible and ridiculous.

6510
1 replies
9h38m

Long ago I made interfaces with image maps. Just one giant jpg with all links boxes and text on it.

https://www.w3schools.com/htmL/html_images_imagemap.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...

I've seriously considered doing websites in pdf too but still have to run into a situation dramatic enough for it to be worth it. Now that I think about it again "installing" a pdf on a pc could cover a lot of app like functionality. Most important is to make it as convenient as possible to remember your business exists and interact with it.

http://fpdf.org/en/script/ex95.pdf

eichin
0 replies
40m

active (PDF) documents seem to have become a thing on eReaders, especially pen-based ones; mostly they leverage clever linking and bookmarking, and not much more, though.

sdwr
2 replies
13h55m

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

troupo
0 replies
9h55m

Would setting constraints in the browser be feasible?

yes. IIRC Cassowary constraint solving was proposed in 1999. It was dismissed because they thought it would be too costly on the hardware of the time.

lifthrasiir
0 replies
13h31m

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.

postalrat
1 replies
13h19m

Do the tools you say do it better than html also handle the variety of clients html documents are expected to work with? Or handle accessibility better?

zamalek
0 replies
9h0m

XAML/Silverlight was pretty fantastic. Significantly more sane layout model (by virtue of having more than a mote of sanity at all). It did handle a very wide gamut of clients during its time.

Why? Because it was designed for creating apps, not documents. HTML is great for creating documents, most of the examples in the post are not documents.

globular-toast
0 replies
11h16m

That's because CSS is for styling documents, not applications.

dclowd9901
0 replies
13h24m

I think (despite the article’s digs) iOS had the right idea with everything having a relative layout to parents and siblings. It makes it much easier to know what “center” actually means when you have a notion of what it’s supposed to be centered to.

Tossrock
0 replies
0m

Funnily enough, Unity's latest UI approach is to just use web tech, with their 'UML' XML dialect plus CSS-like styling via the yoga embeddable C++ flexbox renderer.

Also, Fusion 360 is now known as just Fusion (it's cleaner that way?)

AlienRobot
0 replies
7h46m

They probably thought we would ditch HTML/CSS for something better but then PHP came around and fixed many of HTML's shortcomings and then AJAX came around and we kept sinking DEEP into this fundamentally broken ecosystem and now it's just too late to leave.

Although, honestly, how hard would it be for Chrome to support some new language called Super Text Markup Language that is designed for modern use with support for templating, portals, actual semantic layouts that don't rely on position on the code, etc.? Perhaps it's time.

3rd3
0 replies
9h13m

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.

mckn1ght
14 replies
19h27m

That’s exactly why people love web programming so much. There’s always a challenge.

LOL, these examples are exactly why I got out of web programming. Thankfully I never had to deal with any of the modern frameworks. I was getting hot flashes just scrolling through this page.

pylua
6 replies
18h1m

There is challenging for the wrong reasons then there is challenging for the right reasons.

You will want to make sure you work on things that are challenging for the right reasons.

bluprintz
4 replies
14h19m

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.

rando14775
2 replies
9h56m

Why do I enjoy writing shell scripts then?

layer8
0 replies
6h37m

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.

datascienced
0 replies
8h47m

That is another axis around quick feedback loops. A shell script comes with a repl you don’t even need to invoke!

namaria
0 replies
11h26m

And then you have weaponized accidental complexity, aiding cv-driven development and vendor lock-in (which are really the same sort of thing).

szundi
0 replies
13h3m

Then some stakeholder just doen’t like a thing for silly reasons and never can anyone always be happy - for cheap at least

SJC_Hacker
2 replies
17h38m

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.

hattmall
1 replies
16h10m

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.

SJC_Hacker
0 replies
14h57m

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.

wiseowise
0 replies
11h38m

That was sarcasm, I think.

pquki4
0 replies
16h31m

Eh, this article has absolutely nothing to do with web frameworks?

karmakaze
0 replies
18h40m

I appreciate things that are well laid out. I just don't get satisfaction from pixel pushing myself. It might be different if it was a small product or one I was vested I from the beginning or owned. OTOH backend implementation details I go out of my way to do at my best probably goes beyond what many others consider necessary especially when no one really sees it or may never be a practically relevant design or performance issue.

LudwigNagasena
0 replies
17h44m

I am not even sure whether the sentence you quoted is genuine or sarcastic.

crazygringo
13 replies
18h38m

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 the author's proposed solutions only work for Western-style fonts that have ascenders and descenders. It gets even trickier when you consider a range of totally different scripts from Asia etc.

dclowd9901
11 replies
13h19m

Yes, and let’s not forget fallback fonts. So rules for each browser and OS and each font class and each layout (desktop, tablet, mobile). Probably on the order of 100 rules for a single style. Yeah, we’re just being lazy.

We need sane font rendering in browsers that treat things like alignment in a way that we’d expect for the 99% case. If I say “center” it should just fucking center.

littlestymaar
8 replies
10h15m

Fallback fonts are a legacy of the past though, in an era where everybody ships at least hundred of kilobytes of JS and images (when it's not tens of megabytes, but this is another topic…) there's no good reason to specify a font and hope it will be found on the customer's OS: ship the font you're using.

datascienced
3 replies
8h49m

Depends on who you want to be able to access your site. Not everyone had 10Mbps+

littlestymaar
2 replies
7h52m

You don't need 10Mbps to download a 30kB font file.

And if you're really targeting people that have trouble loading such a font file, then you have much, much bigger problems than centering things (you basically cannot put any image on your website).

datascienced
1 replies
6h20m

A 30kb font file kinda website is probably gonna serve a 2Mb all up web page which at 100kbps is a slow experience.

littlestymaar
0 replies
5h15m

A 30kb font file kinda website is probably gonna serve a 2Mb all up web page

Where's that ratio coming from? Shipping fonts is just good practice when you want your website to look consistently on all platform, it doesn't mean anything else about how the website is made.

Also, 100kbps is a very slow connection, it's 2 orders of magnitude less than the 10Mbps you talked about earlier, and when you have this kind of very poor connection everything is kind of slow anyway (even the very barebone HN's front page is 120kb!).

account42
2 replies
5h58m

No thanks, I don't want your shitty font file that only looks ok on whatever system you testet. All websites should use the system font for body text. The only problems is that a) the default browser font is usually some ugly shit instead of the system font and b) there is no way to specify size in a way that different fonts will actually be the same size. Both of these need to be fixed in the browser instead of hacking on more shit for each website.

littlestymaar
1 replies
5h12m

No thanks, I don't want your shitty font file that only looks ok on whatever system you testet.

Why would it looks bad elsewhere?

All websites should use the system font for body text.

Wait what? There are very different requirements when it comes to reading system widgets and actual text! (like we don't use the same kind font for code and prose).

wizzwizz4
0 replies
2h56m

Which is why I've configured my browser to use the correct fonts that work for me. Use `font-family: revert;` for prose, and `font-family: system-ui;` for any widgets you've got.

lambdaxyzw
0 replies
1h6m

I'm probably in a tiny minority, but I just flat out disable third party fonts. Everything looks equally good to me and I save bandwidth. The only expression are image fonts, which render as squares - I share the author's frustration.

tonsky
1 replies
8h5m

That’s not true though. You don’t need different styles for text on different platfroms. They all work the same

dclowd9901
0 replies
3h16m

I'm not sure about your experience, so I don't want to diminish it, but I have patently not found this to be true at all.

layer8
0 replies
6h41m

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.

zagrebian
10 replies
16h37m

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?

ryandrake
3 replies
16h8m

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 premium version if they can't even get basic shit right?

watwut
2 replies
10h27m

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.

GuB-42
1 replies
9h4m

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.

watwut
0 replies
8h27m

I did not mean it as in difference between "practical design and bad design". I do agree there is usually tension between the two.

Simply, people who care about function wont notice misaligned button. And people who are notice misaligned button usually prioritize visual stuff over everything. That extends to managers and whole companies.

Pretty much no UI package will have everything aligned out of the box, it is not even possible. When you use them out of the box without tweaking, you either get misaligned things.

sombrero_john
0 replies
16h33m

A well-designed product will sell better than a slightly-less-well-designed product

pxtail
0 replies
11h21m

Totally agree - I think that all the examples included in the article (including high-profile software from wealthy vendors) just show it's not THAT important to have everything pixel perfect aligned and meticulously crafted, it needs to be usable and somewhat good looking and that's enough.

mirekrusin
0 replies
16h5m

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.

hattmall
0 replies
16h8m

I think realistically it's more of a situation of why don't they just work correctly in the first place. It's not that everyone should spend extreme amounts of efforts for perfection it's that this is one of the most basic things that should just be correct out of the box.

T-Winsnes
0 replies
15h27m

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

GuB-42
0 replies
9h24m

Have you ever stopped using an app because a button or icon was slightly misaligned?

Maybe, maybe not, maybe it made me not use the app in the first place.

It is one of these little things that make the app look unprofessional. I have been a bit uncomfortable using banking apps with misaligned icons. It the designers can get away with misaligned icons, what can the core developers get away with? If a company is sloppy with their design, maybe they are sloppy with their security too.

People can easily see these visual details, they can't see the back-end but for the lack of information, they will assume it is made with the same care, that is, not much. And maybe they are right.

jkaptur
9 replies
19h20m

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

jrmg
5 replies
18h41m

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 noticeable (and unpleasant) if the baselines of the text are in different places next to their individual checkboxes if - even if they’d all individually look best in that alignment viewed alone.

And if the text is editable, it’s even worse. No-one wants their text to be jumping up and down while editing to maintain optical alignment.

The problem gets even worse if you have mixed language support, and the text might be in languages with ‘tall’ characters (Thai, Arabic, sometimes Vietnamese - and a long list of others) or a different idea of ‘line height’.

Compromises must be made, unfortunately.

Of course, that doesn’t excuse a lot of the examples here, which are of specific designs - but it does mean that a lot more ‘design’ time is required, especially if there are multiple localisations, than feels at-all intuitive to anyone who has not done this.

BlueFalconHD
2 replies
15h26m

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)

avandekleut
1 replies
14h23m

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?

echoangle
0 replies
6h22m

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

zeteo
0 replies
1h28m

Agreed about Vietnamese, which brings up another issue: diacritics. A word or phrase that is heavy on uppercase with diacritics ("BÁNH CUỐN") will look quite different in the vertical plane from one with a lot of descenders ("eggnog"). Even for developers who don't worry about Vietnamese, it is quite common in North America to require support for Spanish and/or French, which can also feature a lot of words with diacritics: "¿Ándale, vamos?"

bee_rider
0 replies
14h32m

And if the text is editable, it’s even worse. No-one wants their text to be jumping up and down while editing to maintain optical alignment.

I actually kinda want to see this just once. I think it would be terrible but I’m not convinced enough to write it off entirely.

mmis1000
1 replies
11h31m

It's technically possible (although infeasible) with current web api though. You can draw texts to canvas, sample it, get the pixel value and find the true center yourself. But web also never guarantee that text on canvas is as the same as the one you see visually, so you can only find it out one by one.

aldousd666
0 replies
2h39m

You can draw a whole span or div that is invisible with fonts in it and everything off screen measure it. Delete it or then show it or move it or whatever. But I've done this before with JavaScript.

lelanthran
0 replies
13h43m

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

dkjaudyeqooe
9 replies
19h39m

First time probably ever that I've had to disable Javascript because of the creepy and distracting mouse thing. It really feels like you're invading other people's privacy, and if it doesn't, having things randomly move across your field of vision makes it difficult to read.

tills13
1 replies
18h20m

It really feels like you're invading other people's privacy

Incredible, massive, outstand leap from "showing anonymized cursors" to "invading people's privacy"

shermantanktop
0 replies
16h58m

The word “feels” is a cheatcode for enabling bunnyhop leaps from one idea to a distant and enticing destination.

It feels that way, anyway.

lolinder
1 replies
18h12m

I had to open up devtools to be sure, but yeah, there's a websocket that constantly streams your cursor position up to the server and constantly streams everyone else's cursor positions down to you for rendering.

As someone who compulsively scrolls, selects and fidgets while reading, it actually made me quite self conscious to realize that other people would be distracted by my all-over-the-place mouse movements.

vesinisa
0 replies
12h29m

It is amazing. Evil genius vibes.

koito17
0 replies
19h33m

Tonsky's website is infamous for making a mockery out of modern UX. That's also why toggling dark mode turns your pointer into a flashlight. I agree the mouses are distracting and I always use reader mode when browsing his site.

dogmatism
0 replies
17h9m

It's a joke, no?

creatonez
0 replies
9h40m

Sounds like your web browser vendor has decided to give websites your mouse cursor position :)

achneerov
0 replies
16h44m

Pretty annoying, but maybe that's what Niki is aiming for?

RheingoldRiver
0 replies
18h7m

Oh, that's what that is? Holy shit that's annoying

strogonoff
7 replies
13h49m

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

atoav
5 replies
12h13m

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 seen one that does a better job than my brain and my eyes.

strogonoff
2 replies
11h44m

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

dsego
0 replies
9h59m

This vertical centering of text in buttons is more noticeable when there is an icon next to it. But it drives me crazy that the default is not to center around the cap and baseline. This is what I usually see in figma designs and it looks the best, but it's not simple to apply in html & css.

aldousd666
0 replies
7h19m

You can actually still do it. Just don't measure until after the fonts and elements are in place. dynamically adjust the position afterward. There is no rule that says you must use only CSS

nsajko
0 replies
2h13m

Not an expert, but I think your example is actually a solved issue nowadays: https://en.wikipedia.org/wiki/Microtypography

I know the newer TeX engines, for example, support microtypographical corrections.

kevincox
0 replies
6h41m

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.

liampulles
0 replies
10h17m

Indeed I think the advice around calibrating fonts is not going to work if the text is long or has an unusual arrangement of ascenders and descenders. The reality is that centring is very context specific.

dgfitz
7 replies
16h41m

Surely we all know at this point that the two hardest things in programming are: naming things, threading, and off-by-one errors.

wild_egg
5 replies
16h28m

What happened to cache invalidation?

dgfitz
2 replies
16h17m

*off-by-three errors

fragmede
0 replies
16h15m

and concurrency

doctor_eval
0 replies
13h39m

and concurrency

jbverschoor
0 replies
14h57m

Almost everything in competing is a cache problem

698969
0 replies
15h9m

The list was from before it was added.

LeonB
0 replies
11h43m

“Naming things” can’t be listed first, the joke doesn’t work if you put naming things first.

basil-rash
7 replies
17h23m

Funny that this doesn’t even mention the actual critical failure of CSS centering: data loss on all items overflowing to the left of the container. Items to the right can be scrolled into view, but items to the left are entirely inaccessible.

Inviz
3 replies
12h56m

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.

dumbo-octopus
2 replies
12h36m

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

    <main>
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
    </main>

    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;
    }

dumbo-octopus
0 replies
6h34m

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.

hunter2_
1 replies
17h16m

Is that any worse than an inability to scroll up, vertically negative, from the initial scroll position?

basil-rash
0 replies
13h0m

Yes, because content is almost never placed above the viewport. Do you have an example of that happening?

But I suppose the complaint might be able to be generalized to all items past the start of a main-axis centered flex-box. Doesn’t make the failure more excusable.

chrisjj
0 replies
3h9m

It that failure really of CSS i.e. the spec?

marcell
6 replies
18h52m

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.

cdrini
2 replies
15h55m

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?

Inviz
1 replies
12h53m

CSS goes away from left/right in general. See inline-* and block-* family of properties. This is to support RTL and vertical writing modes easier.

cdrini
0 replies
2h21m

I don't use left/right anywhere in the CSS above...

Rumudiez
1 replies
17h30m

The other CSS terms for this are block and inline, as in padding-inline-start and padding-block-end. Whether it’s the top/bottom/left/right edge is determined by flow direction. iOS/SwiftUI calls the inline directions leading and trailing, but I’m not sure how it works with vertical type

LudwigNagasena
0 replies
17h12m

Technically, block and inline dimensions are defined with respect to the direction of the text. The terms used in the CSS spec to refer to the direction of justify-content and align-items are the main axis and the cross axis, respectively.

naasking
0 replies
13h46m

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

karaterobot
6 replies
19h19m

I'm out of the web development game, but in my day it was still quite possible to vertically center text and icons consistently. You just had to notice it was busted in the first place, and then go in and fix it. It's not a technological problem, or at least not a non-trivial one.

The problem is that, if it's off by a couple pixels, the front-end engineer may not notice it, and the designer may not even look at it. Or, if they do notice it, they think "do I want to file a bug report right now, or do I want to work on my own ticket right now?" Having worked in both roles, this is my experience anyway.

I agree that there's no consistent way to center things that always works, no matter what, without anybody thinking about it or paying really careful attention. I think we prioritize solutions with those performance characteristics, which is a separate problem of even greater magnitude.

crazygringo
5 replies
18h35m

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 manual offsets that you keep up to date. And obviously that would be insane.

saurik
3 replies
18h30m

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

anonymoushn
2 replies
15h24m

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

saurik
1 replies
13h30m

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").

anonymoushn
0 replies
7h41m

You're right. The browser should just expose this capability and get it right.

Recently I've learned that even the parts of OpenGL which are fully specified give wrong results on ubiquitous hardware+driver combos at the pixel level. The commonly proposed solution is "instead of using the transforms and blending exposed by OpenGL, do it correctly yourself in a shader." Gosh.

karaterobot
0 replies
2h35m

The only way to actually get it perfect is to do browser and OS detection and then hand-code a bunch of manual offsets that you keep up to date. And obviously that would be insane.

That's exactly what you do. And that's what I'm saying: the view that the product we're making is not worth doing one-off fixes for, that we need one solution for everything. No other trade has this delusion about everything being a perfect system you can control from a single commanding height (a component library, for example). Even other forms of programming, like game development, don't pretend you can avoid doing one-offs. Just web development, as far as I can tell.

anyfactor
2 replies
14h15m

I think centering in general is a difficult thing. I wanted to mount an AC indoor unit over a window. Now, do I mount it center to the wall or center to the window which slightlty offset the center of my wall? I made the call to center it based on my wall. Now, 2 out of the 5 people that have came to my room asked me about why my AC unit is off-center. For them center is relative to the window and discussing AC unit placement as a conversation starter is a good idea.

smabie
0 replies
7h27m

I feel like centering against window is the obvious choice it's just so much more noticeable

Gare
0 replies
9h36m

I would have picked the window too. It's much more prominent anchor.

silisili
1 replies
13h28m

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.

PennRobotics
0 replies
11h0m

To better understand how people might get confused... Imagine a room 9 feet <insert your favorite unit of measure> long and fans 2 feet in diameter. If you put them with bases equally spaced—3 feet apart—you get a gap 2 feet between the wall and fans… but 1 foot spaced apart in the middle.

Naively, you move each fan a half foot closer to the wall. This makes the gap 1.5 feet to the wall but now 2 feet between each other. (You might find ways to argue that this looks better visually than the true answer below, and that depends on a lot of perception-altering factors including how low the fan hangs from the ceiling, amount/ratio of space available, the distance from the non-perpendicular walls, and light sources as they might cast shadows with different sized gaps on the ceiling.)

You need to take the total room length and subtract the fan diameters, then divide that by 3. (So, 5 / 3 = 1.667 or 1'8" from wall to blade tip.) Thus, each base should be 2.667 feet from its nearest wall. This makes a gap 1'8" between each blade tip:

20" space, 24" blades, 20" space, 24" blades, 20" space = 108" (9 ft) room length

Bringing this around to the theme of web design, this is akin to space-between, space-around, and space-evenly in justify-content[1] (except there isn't a "space the center of each element evenly" selection, except maybe stretch or nesting everything in another flexbox)

[1] https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-j...

dqv
5 replies
19h36m

Is the author here? Can you give us a toggle so we can turn off the moving cursors? It's a little distracting. Reader mode isn't working so well, so I deleted the element in developer tools in the mean time.

zajio1am
0 replies
8h16m

There is such toggle that makes it disabled by default. It is called NoScript.

watashiato
0 replies
14h30m

It's certainly distracting and toggle would be nice, but a uBO filter does the trick in the meanwhile.

||tonsky.me^$websocket,1p

sph
0 replies
10h45m

I do not see any cursor.

reaperman
0 replies
12h21m

I thought it was hilarious and delightful, it made me smile and feel at home. But I certainly understand why others would hate it and not be able to focus on the content.

karaterobot
0 replies
19h25m

You're being downvoted, but here's an upvote from someone who also found this annoying. Confusing at first, then annoying once I saw what was happening.

Marlinski
5 replies
10h57m

That bright yellow background imprinted my eyes for 5 minutes, there's other way to leave an impression than fucking up with my senses, like writing a clear concise article instead of a never ending list of examples interrupted with distracting fake mouse move.

An horrible web experience through and through.

troupo
0 replies
9h27m

with distracting fake mouse move.

These are multiplayer cursors. You're seeing other people using the website

sph
0 replies
10h48m

I quite like the yellow. You should try and use your brightness slider, because it is not brighter than most real world yellow (i.e. illuminated by the sun which is orders of magnitude brighter than your screen)

Unless you are adapted to live in a darkened cave, that is.

blakeburch
0 replies
4h0m

Funny enough, I just told my wife how unique I thought it was. It stands out. It's memorable.

I know I've read many of his posts over the last year because of that mustard yellow background. It's a strong branding choice.

abanana
0 replies
5h26m

Fully agreed, it's an awful choice. I had to click the Reader View icon before I'd finished reading the first screen.

The mouse pointers are a prime example of "just because you can, doesn't mean you should".

SileNce5k
0 replies
10h26m

Yeah, I had to add background-color: lightgray to the css, and disable javascript to get rid of the cursors to make it the site usable.

grecht
4 replies
13h36m

This is not computer science, but programming.

alexvitkov
2 replies
13h9m

This is not programming.

Izkata
1 replies
12h32m

CSS is a declarative programming language.

strix_varius
0 replies
11h51m

CSS is a declarative styling language and is not Turing complete.

overengineer
0 replies
11h36m

solving constraint problems is CS

dimal
4 replies
17h46m

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.

wlesieutre
1 replies
17h13m

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 assigns different visual weight to the UI element versus its label. When the label is on the left (text fields) the centerline shifts right, and when the label is on the right (checkbox) the centerline shifts left. The elements that stand alone (building circle, Business text, Sign In button, Need help signing in text) all keep a consistent line. If you ignore that visual weight and just center them, you probably end up with it looking wrong like a triangle with its bounding box centered in a circle does.

The QuickTime button is just bad though.

BlueFalconHD
0 replies
15h32m

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

tonsky
0 replies
7h55m

They did center everything correctly for decades, do you think it was a mistake? https://grumpy.website/938

lolinder
0 replies
17h44m

Which Apple one? Apple features a bunch in here. The Quicktime record button can't be explained by descenders.

Semaphor
4 replies
11h39m

In case the author reads this: Please respect prefers-reduced-motion for your cute mouse cursors that wander over the screen in a very distracting fashion.

In the meantime, as a fix for others, in uBo add

tonsky.me##.pointers

cwillu
1 replies
9h42m

I disagree, as that implicitly endorses this sort of distracting nonsense, because “there's a setting to turn it off if it bugs you”.

Semaphor
0 replies
8h54m

While I agree, it usually seems the majority of HN does not, and sees it as promoting the boring corporate web of today instead of the creativity of MySpace/Geocities pages -.- Accessibility is often frowned upon by commenters.

reddalo
0 replies
10h53m

Yes, I agree. It's a fun novelty the first 5 seconds, then it becomes completely annoying.

BTW: the movement of the small cursors is streamed live from the server, I think it represents the current mouse position from other readers.

kioshix
0 replies
3h31m

Even better, add this to block the websocket connection for the pointers:

  ! Annoying pointers on blog
  wss://tonsky.me/ptrs?*

dmackerman
1 replies
17h58m

Hardly worth mentioning a feature supported by...nothing

ClassyJacket
0 replies
17h25m

That's not true, it's obviously relevant to the article, plus, if it gets mentioned enough it's more likely to get support.

joestrong
3 replies
8h34m

(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 author didn't care to check

tonsky
1 replies
8h4m

That’s what ChatGPT told me

latexr
0 replies
6h39m

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.

joelanman
0 replies
32m

also it's not named horizontal and vertical because it depends on the direction of the text - some text reads vertically

figassis
3 replies
8h50m

I agree partially, but I also noticed on some projects that not everything looks better when absolutely centered. Sometimes something is centered but looks weird. You nudge it a bit off center and looks perfect.

wusel
1 replies
8h42m

That's called optical alignment. He somewhat mentions that with the Apple logo example.

thejohnconway
0 replies
7h45m

I think it's true of some of the other Apple examples that he's put lines over, they look optically correct.

hennell
0 replies
8h32m

That's mentioned briefly in the optical compensation bit - visual center is what looks like the center, mathematical center is just the middle of the bounding box. Triangles are the obvious example, but even more annoying is logos where you have the ® or ™ at the end, which have very little weight but are included in centering math on badly cropped logos.

subjectsigma
2 replies
18h36m

If you Google “Why is CSS terrible?” you will get dozens of questions on SO or Reddit about noobs complaining about CSS and how it is outrageously hard to understand and use.

Nearly every one of those threads has at least one comment that reads like, “Well I’m a senior web developer and if you don’t like CSS it’s probably because you’re a fucking idiot!” Some will go so far as to say if you don’t like CSS and you’re a man, it’s probably because you’re a misogynist: https://youtu.be/dxY5CdZNzsk?si=BiVr0uPXKIq-T4dJ (Seriously, watch the video, it’s outrageous.)

Meanwhile, more than one web developer has communicated to me in private that they hate CSS and barely understand it after years of using it professionally to make money.

_gabe_
1 replies
14h36m

Meanwhile, more than one web developer has communicated to me in private that they hate CSS and barely understand it after years of using it professionally to make money

They barely even understand it?? I think the biggest problem with CSS is the same problem plaguing C++ and other older languages. Cruft. If there was proper versioning and pieces of the language were deprecated in favor of modern techniques, it would remove a lot of ambiguity. Heck, if there was a built-in linter that warned you about common errors that would be a massive upgrade!

The only bad part about CSS is that there’s a dozen ways to do everything.

With that said, any developer telling you they hate it probably hasn’t worked with the “state of the art” in other UI development. Go work with WPF, UWP, QT, ImGui, JavaFX, Swing, or any of the dozens of other desktop UI frameworks. Then, try to make a moderately complex style and apply it to several elements. It’s a PITA. I too hated CSS… but then I worked with WPF and JavaFX and lots of those other frameworks: and they gave me a fresh dose of perspective.

I’ll gladly take the ability to do everything a dozen different ways over the inability to do anything that strays from the happy path in the framework I’m using.

mike_hearn
0 replies
10h3m

JavaFX uses a dialect of CSS so that's not necessarily a great example. It's also somewhat simplified compared to normal CSS, for example, the way layout works is more normal for GUIs (containers that implement different constraint systems). For things like theming your UI it works pretty well.

I've done web CSS and JavaFX CSS and for app GUI I'd much rather use the latter. For nicely styled documents with good typography on the other hand, web CSS is going to be better.

JavaFX also scores points for having a binary form of CSS that can be loaded and parsed much faster.

CSS as a language is bloody awful of course. The prevalence of dialects that compile down to it is always a giveaway that the language didn't keep pace with people's needs.

robertlagrant
2 replies
9h23m

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?

tonsky
1 replies
7h59m

You align by the space between cap-height and baseline. Always. It always looks good. Even for lowercase. You don’t need to think further. That’s it. That’s the solution

robertlagrant
0 replies
7h23m

But then that won't be centred.

ivanjermakov
2 replies
17h26m

Hot take: modern front-end developers lack expertise in UI and typography to even notice such things.

johnny22
1 replies
16h34m

modern? I'm pretty sure that's always been the case. It's a hard job and not enough people have ever been good at it.

ivanjermakov
0 replies
11h21m

Yeah, modern in comparison to future developers, not past.

fx1994
2 replies
11h6m

~20 years ago I was building websites and I would spent hours to make things "perfectly" arranged on them. I hate it when it's not the way it was supposed to be. Pixel perfect or nothing. And then I just stopped with web and moved on with my life. It's time consuming, buggy and while it worked in one browser it didn't work in another. Screw that.

youngtaff
1 replies
11h4m

Why would you want to make things pixel perfect?

Why not work with the flexibility of the web instead?

bryanrasmussen
2 replies
11h34m

what the heck is up with all those mouse cursors on this page - is it showing what everyone is looking at? why would I care?!?

The hardest problem in this article is actually reading it because somebody's cursor is sitting in the way.

Or is this just a bug in FF on this site?!?

mmis1000
1 replies
11h29m

April fool prank, probably.

amadeuspagel
2 replies
7h16m

The hardest problem in computer science is how to design a forum that isn't dominated by negativity.

janetmissed
0 replies
5h49m

At least hacker new is pretty good, I can't think of any other forum of this scale that isn't a toxic shithole.

hk1337
0 replies
3h54m

We just need to find a way to zap people through the keyboard when they say something stupid or mean.

_def
2 replies
8h19m

Why do you need to remember four words instead of just `horizontal`/`vertical`?

Why did `justify-content` became `justify-items`?

evrimoztamur
1 replies
8h10m

Because `flex-direction` exists, which means that horizontal and vertical are contextually meaningless. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direct...

I don't agree with the inconsistent naming across the axes, however horizontal/vertical isn't the answer to it.

tonsky
0 replies
8h2m

Or you can just ditch flex-direction... It’s not like it serves any great purpose

CharlesW
0 replies
15h30m

This is nice, but if you change the `<div>` height to 30px, you'll see that the text is not optically centered.

watwut
1 replies
10h40m

Why is it that every other post that has to do with design has some weird graphical choices in it? I am talking about the bright yellow background.

mikhailfranco
0 replies
6h14m

It proves there are no depths to the arguments about good design, and what personal taste constitutes good design.

It's also why I enjoy being a backend engineer.

Action is truth, appearance is fickle.

ugh123
1 replies
2h54m

Good read but nit: this isn't computer science, this is web dev.

mm263
0 replies
1h40m

Most of the examples are web dev, but some are from iOS and Android.

teo_zero
1 replies
13h8m

Who ever said that aligning things, especially text, on a page was easy? Just look at what Donald Knuth had to invent to solve this problem!

outop
0 replies
12h27m

Correct. The article does a bit of a bait-and-switch by showing that centering a rectangle within another rectangle is mathematically trivial, and then going on to complain about misaligned stuff that is mainly "irregular shaped text (which can change based on translation, etc) within box with curved corners".

shiomiru
1 replies
9h23m

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.

rkta
0 replies
7h59m

Sure, who cares, nobody targets w3m in 2024.

I care. There's still w3m users out there - and I am one of them.

I don't care if the website looks like shit, but at least keep it usable for us.

nativeit
1 replies
4h2m

I’m a designer since my parents got me a copy of CorelDraw in the mid-1990s (I might even become a good one someday!), and this has always been a challenge. I’ve never jumped onto a font as quickly or as thoroughly as I did with Inter, and now I have one potential reason for why my subconscious got so piqued after my first experiences with it. I probably spend a huge proportion of time when developing websites doing dozens of CSS tweaks to correct very subtle alignment problems (whilst doing my best not to create more). Glad to see my neuroses being shared here!

kgeist
1 replies
4h33m

Just a few weeks ago we released a feature where one of the most prominent buttons had a misaligned icon. The feature was reviewed by the QA engineers, the product owner reviewed it etc. I was the first person to notice it. After I pointed it out, everyone started seeing it, too. However, I had to specifically mention that there is a misaligned icon on a certain button. People couldn't see what's wrong even when carefully looking at the button, if you just said "something's wrong with the button". I had to actually say "the icon is not centered correctly". Only then they started seeing it. I guess most people just don't care.

chrisjj
0 replies
3h12m

"the icon is not centered correctly".

Would "the icon is not centered" have sufficed? :)

dingdingdang
1 replies
7h40m

What really drives me insane is the animated mouse cursors on the left and right that sometimes move and sometimes don't in this article..

Kuinox
0 replies
7h37m

It's other peoples mouse cursor.

btbuildem
1 replies
4h52m

No, that's just in web development. Otherwise things are pretty trivial to keep centered. HTML/CSS somehow dropped the ball so hard, it became lobsided and will never center itself correctly.

But even then: just use grid. It works.

lelandfe
0 replies
4h48m

The article uses screenshots from apps and operating systems’ interfaces though.

amelius
1 replies
18h39m

No the hardest problem in CS is writing a reliable progress bar.

analog31
0 replies
16h47m

The hardest thing is reliable progress.

TechOfNote
1 replies
8h49m

The dark mode on that site... funniest thing I've seen all week

iainmerrick
0 replies
8h26m

Ha! Very cute.

The live-streaming pointers is genius too. At first I assumed it was random, then I thought to check in the dev tools for a websocket... I love it!

AtNightWeCode
1 replies
11h19m

My experience is that frontend devs mostly wants to write js and not css. The term they use for guys like the op is pixel pusher.

Another annoying thing is when they use colors that are a bit different where is should be the same. For things like buttons etc...

yurishimo
0 replies
10h9m

Which is a bit sad imo. There is a place for both competencies within most organizations I feel. But as JS has taken over more and more of the frontend, suddenly you need to have a masters degree in astrophysics to build a website and those with more of an eye for design and details get pushed out or become disillusioned and go somewhere else, leaving the app/website in an even worse state now that there is nobody left to give a damn.

zarzavat
0 replies
11h41m

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!

virtualritz
0 replies
9h10m

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.

tuyiown
0 replies
3h39m

One important thing is to avoid adjusting alignments between two things by offseting against a third one. Typically, offsetting both the icon and text relative to container. And less infernal approach is the align the icon relative to text (eg: use percent (or em!!) vertical align for icon to offset relative to text), and _then_ adjusting centering in container.

Ho, and take car of sub pixel when adjusting, they cumulate, and rounding will bite you !

tosh
0 replies
9h58m

The "Mange…" button looks centered by visual weight.

tambourine_man
0 replies
6h2m

This is a masterpiece.

simonbarker87
0 replies
8h41m

CSS margin collapse has a lot to answer for. Makes people who don’t know how best to combat it make poor choices.

robofanatic
0 replies
2h46m

It's not just computer science thing. I have numerous misaligned electric sockets, doors, light fixtures etc all over my house and it drives me crazy that I can't do much about it!

renegade-otter
0 replies
9h38m

"If you really hate someone - teach them kerning"

red1reaper
0 replies
10h40m

My biggest problem is that the dark mode flashlight looks bad, I can see the difference in color between the flashlight image darkness and the darkness created by the shadow, he should change the color of the box shadow from #000 to #010101 so it matches better the black of the flashlight image.

Sure, in a normal monitor it is not noticeable but in a good monitor with good blacks and HDR it is super noticeable

paufernandez
0 replies
12h31m

This article makes it clear to me just how different perception is in different people. How much or how little this errors scream at you in your mind. If everyone was as sensitive as the author (I am close), then way less errors would be left there, since so many people would get annoyed by them.

naasking
0 replies
19h33m

Ha, excellent. This needs a Wat video. I heard the sound in my head on every misalignment.

moi2388
0 replies
3h59m

If you are a font designer, make life easier for everybody by setting your metrics so that ascender − cap-height = descender:

Yeah, but in your example 900-700 != -200, and 16-16 != -16

mmis1000
0 replies
11h22m

It don't even talk about CJK though. CJK texts mixed with latin characters is also a giant source of headaches.

For example, the following characters: "jh中"

Depend on the use case, you may want the "中" to align with "j" (for a tight layout like terminal) or "h" (normal articles). But there is never a way to specify it. You just pray that it is correct or your text gets clip out in tight layouts.

mbrezu
0 replies
12h7m

To some extent, centering is in the eye of the beholder.

m3kw9
0 replies
2h45m

This partly happens because scaling of one vector is independent of another vector in different coordinate systems. The vector outside can scale but align with parent than the child inside.

m3kw9
0 replies
2h48m

Is like camera focus points Center focus or weight focused, it depends.

low_tech_punk
0 replies
11h50m

The upvote triangle seems a little off too.

lmm
0 replies
12h17m

People have been claiming for over a decade that CSS has now caught up with the functionality of tables, but I guess that's still not quite true.

likium
0 replies
15h17m

It’s hard but Stripe’s design system does font metric calculation and adjustments. Haven’t seen a misaligned icon or button in a while.

lgeorget
0 replies
8h26m

Maybe I'm just an awful person but one of my little pleasures in life is deliberately leaving things slightly misaligned or mismatched in colors whenever I can. I don't care about it myself so it's fun watching people caring too much around me.

It also helps spotting the bikeshedders.

lenerdenator
0 replies
5h5m

How long before you ask an LLM to help you write the code for centering a div and it gets philosophical?

"Sure, you could center it on the screen, but what about its position relative to the center of consciousness?"

johnsanders
0 replies
13h31m

Just makes me happy I'm not the only one. I always feel like I'm an idiot when I resort to setting position: relative and nudge icons a pixel or three here or there.

jibbit
0 replies
12h19m

I'm pretty sure you can narrow that down to "icons. the harde..". I'm not sure that quitting icon fonts is the answer. When you try you pretty quickly remember why they exist

jack_riminton
0 replies
8h39m

maybe it's just not that important

ingen0s
0 replies
8h54m

Knocked it out! Nice work!

holoduke
0 replies
7h23m

Since flex layouts are widly addopted I seriously never run into centering issues anymore. Either vertical and horizontal alignment is very easy. Also with dynamic font sizes/lengths. I honestly see more issues in performance, since nested flex layouts can cause quite some layout passes which are not always known to the developers, but noticable on older/slower phones.

datascienced
0 replies
8h56m

Hmm. The big assumption is that centering is the intended thing and the most desirable thing in all of those examples.

danbruc
0 replies
5h54m

I think the font metric image has an error, it labels the descender position as -500 but the text says -275 and looking at the other numbers in the image that seems about right. This left me confused for a bit while trying to follow the calculations.

cowboylowrez
0 replies
19h39m

"Honorable mention" at the end made me lol

brailsafe
0 replies
10h44m

I've spent so much time trying to center things on the web that it stresses me out scrolling through those perfect examples.

aldousd666
0 replies
7h22m

Yes CSS is hard, yes declaratively anticipating all the various types of media you may display on and their relative interaction is a nightmare of variables. BUT, that is enough to justify the inversion from using declarative markup to actually writing some procedural code. Write a function to measure the screen, measure the elements on it, and adjust them dynamically at runtime.

adityamwagh
0 replies
11h35m

This is also the guy behind Fira Code.

Waterluvian
0 replies
18h55m

don’t ask why you need to remember four words instead of just horizontal/vertical, it’s still better than before

Because those things can do a whole lot more than just that?

SnoozingBoa
0 replies
16m

I am happy with CSS.

It pays the bills and is quite fun to do.

Same for Javascript.

Web UIs have made some nice things possible.

KaiMagnus
0 replies
10h9m

I’d have liked a bit more on the visual (and subjective part, this is probably also there the issues lies, apart from bugs) alignment aspect. The first apple example seems pretty well centered to me for example.

I’d like to use system fonts more often, but apart from the vendor brand fonts like Segoe or San Francisco they are pretty terrible to use all around.

So choosing a custom font and fitting everything around it seems like the solution for now. Apart from that, I’d like to see more support for leading-trim, which will help make things better, at least on the web. https://medium.com/microsoft-design/leading-trim-the-future-...