Hardest problem in computer science: centering things
tonsky.me
tonsky.me
(It is a good article!)
- 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
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.
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.
/rant
Does anyone else who comes into the house notice anything? Very unlikely unless they are craftspeople.
What greeted me was an uneven landscape of tiles that the naked eye just didn't see.
I just patched a whole bunch of drywall cutouts after having some electrical work done. Now I when I look at a new construction house, I can tell which builders use go cheap on drywall, esp. when there's too much texture.
Then you have the same scenario but top to bottom.
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.
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.
(The original design had it centered in the flag; some committee later decided it should be centered in the "flag plus flagpole".)
edit: ahh.. a vote for bad kerning. lol
That's not good or bad design, it's totally subjective. Stupid website IMO
relatively . Till you take things into your own hands and fix that pesky button with extra padding on top. Huh how hard was that! Lazy devs.
You just entered the mystical world of undocumented browser behavior where every browser does its own thing. The button looks ok on chrome, but safari's borders are more round making that look still off. You won't back down, and take on this challenge, make it look great on chrome and safari too. Yay! Worth the 2 hours eh.
Up rears the monster of responsive design... it doesn't work well on safari on the phones now. Well it works for me you say, till you rotate your screen and the button is Gone !
You finally succumb and say screw it, i'll just stick with html and get back to scrolling hn.
I was in school, sitting in study hall with a friend.
He leaned over and said "Doesn't the buzzing of those lights bother you?"
and then I noticed the whining sound of the room's overhead lights and I couldn't unhear it from that point on.
bleh.
Literally cannot win.
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.)
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.
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).
Icons can be less ambiguous, but still it depends on the shape and white space within one and the interplay with text label.
I think it all depends on your vision and its consistency.
I know the newer TeX engines, for example, support microtypographical corrections.
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.
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.
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.
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.
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.
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.
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.
(which, unfortunately, is why is has terrible zoom support)
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.
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.
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.
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.
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.
"Google Web". Like what Google did to USENET. First they connected to USENET. Then they called it "Google Groups". Gradually, free USENET declined, and now, there is only Google Groups.
It would be so much more convenient. No more need for hosting providers, domain services, and most of AWS. Just host on Google Web.
I guess it's way more complex than HTML rendering already is
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.
Also, Fusion 360 is now known as just Fusion (it's cleaner that way?)
What design tools express in UI/UX interaction, CSS must express in context-free grammar. It's every bit as awkward as replacing verbs with nouns.
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.
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.
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.
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.
You will want to make sure you work on things that are challenging for the right reasons.
Inherent complexity (due to difficult real-world constraints) is fine. Accidental complexity, like that caused by overcomplicated tools or architectural decisions, just feels bad.
I used to have that attitude, but after trying the latest version of ReactJS I think its pretty nifty for what its intention is.
An horrible web experience through and through.
Unless you are adapted to live in a darkened cave, that is.
The mouse pointers are a prime example of "just because you can, doesn't mean you should".
These are multiplayer cursors. You're seeing other people using the website
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.
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.
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...
In the meantime, as a fix for others, in uBo add
tonsky.me##.pointers
BTW: the movement of the small cursors is streamed live from the server, I think it represents the current mouse position from other readers.
! Annoying pointers on blog
wss://tonsky.me/ptrs?*I’m surprised ‘text-box-trim’ wasn’t mentioned.
It’s a CSS attribute that solves this on the web.
https://caniuse.com/css-text-box-trim
If only browsers would support it.
Until then, here’s a JS alternative.
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.
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.
Mostly, you want to visually nudge things in one direction of the other until it "looks correct".
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
This undermines trust in all technical parts of your writing.
Looks like it's not supported in Safari yet.
There's also ascent-override.
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.
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.
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.
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.
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.
Sure, in a normal monitor it is not noticeable but in a good monitor with good blacks and HDR it is super noticeable
Would "the icon is not centered" have sufficed? :)
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.
Finally you can allow container to grow with the contents.
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;
}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.
```
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?
Why not work with the flexibility of the web instead?
https://stackoverflow.com/questions/11419541/how-can-i-get-r...
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.
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.
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.
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?
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-...
The long term solution is leading-trim (or whatever it is called now). Pressure your favourite rendering engine to implement it!
https://www.youtube.com/watch?v=K3tZisVDIVk https://practicaltypography.com/ https://beautifulracket.com/appendix/racketcon.html
Ho, and take car of sub pixel when adjusting, they cumulate, and rounding will bite you !
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.
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.
Some people like esthetics of swiss gardens.
Some people don't mind esthetics of favelas.
You can live e2e in both.
> 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.
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.
Another annoying thing is when they use colors that are a bit different where is should be the same. For things like buttons etc...
"Sure, you could center it on the screen, but what about its position relative to the center of consciousness?"
Because those things can do a whole lot more than just that?
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?!?
It's also why I enjoy being a backend engineer.
Action is truth, appearance is fickle.
Why did `justify-content` became `justify-items`?
I don't agree with the inconsistent naming across the axes, however horizontal/vertical isn't the answer to it.
It pays the bills and is quite fun to do.
Same for Javascript.
Web UIs have made some nice things possible.
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!
But even then: just use grid. It works.
I'd much rather use a proper grid layout with subgrids and local/global co-ords same as game dev and in fact I've always wondered if I can just write a web lib that uses webgl to render the page instead. Problem is DOM engines are just too efficient compared to recreating it all myself in js/webgl.
It also helps spotting the bikeshedders.
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.
Yeah, but in your example 900-700 != -200, and 16-16 != -16
||tonsky.me^$websocket,1p
Incredible, massive, outstand leap from "showing anonymized cursors" to "invading people's privacy"
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.