22 ms·

Hardest problem in computer science: centering things

1419 points by tobr 3y ago

dqv 3y ago
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.
- karaterobot 3y ago
  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.
- deleted 3y ago
  [deleted]
- watashiato 3y ago
  It's certainly distracting and toggle would be nice, but a uBO filter does the trick in the meanwhile. ||tonsky.me^$websocket,1p
- reaperman 3y ago
  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.
- sph 3y ago
  I do not see any cursor.
- zajio1am 3y ago
  There is such toggle that makes it disabled by default. It is called NoScript.
naasking 3y ago
Ha, excellent. This needs a Wat video. I heard the sound in my head on every misalignment.
jkaptur 3y ago
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 3y ago
  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 3y ago
    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 3y ago
      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?
dkjaudyeqooe 3y ago
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.
- koito17 3y ago
  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.
- tills13 3y ago
  > 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 3y ago
    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 3y ago
  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.
  - deleted 3y ago
    [deleted]
  - vesinisa 3y ago
    It is amazing. Evil genius vibes.
cowboylowrez 3y ago
"Honorable mention" at the end made me lol
mckn1ght 3y ago
> 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.
- karmakaze 3y ago
  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.
- pylua 3y ago
  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 3y ago
    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.
    - namaria 3y ago
      And then you have weaponized accidental complexity, aiding cv-driven development and vendor lock-in (which are really the same sort of thing).
      - davedx 3y ago
        Hey, leave next.js, react router and vercel alone!
karaterobot 3y ago
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 3y ago
  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 3y ago
    I don't think you have to have a "pixel-perfect" rendering system to support centering things correctly?
    - anonymoushn 3y ago
      If you don't, you'll be off by 1px?
      - saurik 3y ago
        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").
Waterluvian 3y ago
> 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?
xnx 3y ago
The page doesn't even mention the brand new align-content property: https://news.ycombinator.com/item?id=40064762 https://news.ycombinator.com/item?id=40064762
- CharlesW 3y ago
  This is nice, but if you change the `<div>` height to 30px, you'll see that the text is not optically centered.
marcell 3y ago
> 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.
- jdmdmdmdmd 3y ago
  [dead]
- Rumudiez 3y ago
  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 3y ago
    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.
- cdrini 3y ago
  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?
amelius 3y ago
No the hardest problem in CS is writing a reliable progress bar.
- analog31 3y ago
  The hardest thing is reliable progress.
crazygringo 3y ago
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 3y ago
  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 3y ago
    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 3y ago
      Depends on who you want to be able to access your site. Not everyone had 10Mbps+
      - littlestymaar 3y ago
        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).
subjectsigma 3y ago
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 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_ 3y ago
  > 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 3y ago
    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.
tiffanyh 3y ago
Text-Box-Trim 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 https://caniuse.com/css-text-box-trim If only browsers would support it. Until then, here’s a JS alternative. https://seek-oss.github.io/capsize/ https://seek-oss.github.io/capsize/
- dmackerman 3y ago
  Hardly worth mentioning a feature supported by...nothing
  - ClassyJacket 3y ago
    That's not true, it's obviously relevant to the article, plus, if it gets mentioned enough it's more likely to get support.
- PennRobotics 3y ago
  Quick and clear explanation: https://css-tricks.com/leading-trim-the-future-of-digital-typesetting/ https://css-tricks.com/leading-trim-the-future-of-digital-ty...
mrbluecoat 3y ago
It's just as hard in the real world: https://ftw.usatoday.com/lists/nc-state-texas-ncaa-portland-court-wrong-reaction-march-madness https://ftw.usatoday.com/lists/nc-state-texas-ncaa-portland-...
- anyfactor 3y ago
  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.
  - Gare 3y ago
    I would have picked the window too. It's much more prominent anchor.
  - smabie 3y ago
    I feel like centering against window is the obvious choice it's just so much more noticeable
- silisili 3y ago
  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 3y ago
deleted 3y ago
[deleted]
- deleted 3y ago
  [deleted]
dimal 3y ago
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.
- lolinder 3y ago
  Which Apple one? Apple features a bunch in here. The Quicktime record button can't be explained by descenders.
- wlesieutre 3y ago
  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 3y ago
    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 3y ago
  They did center everything correctly for decades, do you think it was a mistake? https://grumpy.website/938 https://grumpy.website/938
ivanjermakov 3y ago
Hot take: modern front-end developers lack expertise in UI and typography to even notice such things.
- johnny22 3y ago
  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 3y ago
    Yeah, modern in comparison to future developers, not past.
basil-rash 3y ago
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.
- hunter2_ 3y ago
  Is that any worse than an inability to scroll up, vertically negative, from the initial scroll position?
  - basil-rash 3y ago
    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.
- Inviz 3y ago
  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 3y ago
    `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; }
    - 3y ago
dgfitz 3y ago
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 3y ago
  What happened to cache invalidation?
  - dgfitz 3y ago
    *off-by-three errors
    - fragmede 3y ago
      and concurrency
    - doctor_eval 3y ago
      and concurrency
  - 698969 3y ago
    The list was from before it was added.
  - jbverschoor 3y ago
    Almost everything in competing is a cache problem
- LeonB 3y ago
  “Naming things” can’t be listed first, the joke doesn’t work if you put naming things first.
  - dgfitz 3y ago
    Enlighten me please, sincerely. I’m apparently too thick to understand.
zagrebian 3y ago
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?
- sombrero_john 3y ago
  A well-designed product will sell better than a slightly-less-well-designed product
- ryandrake 3y ago
  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 3y ago
    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 3y ago
      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.
carlottaludwig 3y ago
[dead]
likium 3y ago
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.
Animats 3y ago
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.
- sdwr 3y ago
  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
  - lifthrasiir 3y ago
    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.
  - troupo 3y ago
    > 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.
- dclowd9901 3y ago
  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.
  - codethief 3y ago
    Could you elaborate? I've never worked on any iOS apps before but this sounds very similar to what I'd like UI development on the web to be like.
dr_kiszonka 3y ago
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!)
- _factor 3y ago
  Don’t forget the dead butterflies.
- Maxion 3y ago
  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 3y ago
    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.
    - reaperman 3y ago
      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 3y ago
        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"
strogonoff 3y ago
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 3y ago
  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 3y ago
    > 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).
grecht 3y ago
This is not computer science, but programming.
- alexvitkov 3y ago
  This is not programming.
  - Izkata 3y ago
    CSS is a declarative programming language.
    - strix_varius 3y ago
      CSS is a declarative styling language and is not Turing complete.
- overengineer 3y ago
  solving constraint problems is CS
johnsanders 3y ago
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.
mfritsche 3y ago
Seeing the example of "Berliner Fernsehturm" I was reminded of https://twitter.com/dw_culture/status/1166657103332872197 https://twitter.com/dw_culture/status/1166657103332872197
lmm 3y ago
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.
teo_zero 3y ago
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 3y ago
  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".
paufernandez 3y ago
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.
jibbit 3y ago
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
emadda 3y ago
If you want an interactive demo of how justify and align work in grid: https://cssprinciples.com/3/grid/#justify-and-align https://cssprinciples.com/3/grid/#justify-and-align
mbrezu 3y ago
To some extent, centering is in the eye of the beholder.
low_tech_punk 3y ago
The upvote triangle seems a little off too.
zarzavat 3y ago
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!
adityamwagh 3y ago
This is also the guy behind Fira Code.
bryanrasmussen 3y ago
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 3y ago
  April fool prank, probably.
  - mkl 3y ago
    No, it's always there, pointlessly distracting. See e.g. 6 months ago: https://news.ycombinator.com/item?id=37735801#37737256 https://news.ycombinator.com/item?id=37735801#37737256
Semaphor 3y ago
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
- reddalo 3y ago
  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.
- cwillu 3y ago
  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 3y ago
    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.
- kioshix 3y ago
  Even better, add this to block the websocket connection for the pointers: ! Annoying pointers on blog wss://tonsky.me/ptrs?*
mmis1000 3y ago
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.
AtNightWeCode 3y ago
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 3y ago
  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.
fx1994 3y ago
~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 3y ago
  Why would you want to make things pixel perfect? Why not work with the flexibility of the web instead?
  - PennRobotics 3y ago
    because sometimes one missing pixel makes everything look awful: https://stackoverflow.com/questions/11419541/how-can-i-get-rid-of-this-one-pixel-space-between-table-cells https://stackoverflow.com/questions/11419541/how-can-i-get-r...
Marlinski 3y ago
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.
- sph 3y ago
  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.
  - abhpro 3y ago
    If you like a yellow background, I guarantee you are an outlier
- SileNce5k 3y ago
  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.
- troupo 3y ago
  > with distracting fake mouse move. These are multiplayer cursors. You're seeing other people using the website
- abanana 3y ago
  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".
- blakeburch 3y ago
  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.
brailsafe 3y ago
I've spent so much time trying to center things on the web that it stresses me out scrolling through those perfect examples.
red1reaper 3y ago
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
watwut 3y ago
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 3y ago
  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.
cess11 3y ago
Matthew Butterick has done some good in this space, mostly from the perspective of typography. https://www.youtube.com/watch?v=K3tZisVDIVk https://www.youtube.com/watch?v=K3tZisVDIVk https://practicaltypography.com/ https://practicaltypography.com/ https://beautifulracket.com/appendix/racketcon.html https://beautifulracket.com/appendix/racketcon.html
KaiMagnus 3y ago
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-of-digital-typesetting-d082d84b202 https://medium.com/microsoft-design/leading-trim-the-future-...
tosh 3y ago
The "Mange…" button looks centered by visual weight.
renegade-otter 3y ago
"If you really hate someone - teach them kerning"
robertlagrant 3y ago
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 3y ago
  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 3y ago
    But then that won't be centred.
shiomiru 3y ago
> 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 3y ago
  > 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.
virtualritz 3y ago
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.
datascienced 3y ago
Hmm. The big assumption is that centering is the intended thing and the most desirable thing in all of those examples.
figassis 3y ago
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 3y ago
  That's called optical alignment. He somewhat mentions that with the Apple logo example.
  - thejohnconway 3y ago
    I think it's true of some of the other Apple examples that he's put lines over, they look optically correct.
- hennell 3y ago
  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.
TechOfNote 3y ago
The dark mode on that site... funniest thing I've seen all week
- iainmerrick 3y ago
  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!
ingen0s 3y ago
Knocked it out! Nice work!
simonbarker87 3y ago
CSS margin collapse has a lot to answer for. Makes people who don’t know how best to combat it make poor choices.
jack_riminton 3y ago
maybe it's just not that important
joestrong 3y ago
> (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 3y ago
  That’s what ChatGPT told me
  - latexr 3y ago
    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 3y ago
  also it's not named horizontal and vertical because it depends on the direction of the text - some text reads vertically
lgeorget 3y ago
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.
_def 3y ago
Why do you need to remember four words instead of just `horizontal`/`vertical`? Why did `justify-content` became `justify-items`?
- evrimoztamur 3y ago
  Because `flex-direction` exists, which means that horizontal and vertical are contextually meaningless. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction 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 3y ago
    Or you can just ditch flex-direction... It’s not like it serves any great purpose
dingdingdang 3y ago
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 3y ago
  It's other peoples mouse cursor.
  - dingdingdang 3y ago
    Thanks for the clarification. Still a rather horrifying effect for me given that I was trying to take in the content of the article and not the latency-ridden odd movements of other people's cursors, am I missing something (more!) here in terms of the why?
holoduke 3y ago
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.
aldousd666 3y ago
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.
amadeuspagel 3y ago
The hardest problem in computer science is how to design a forum that isn't dominated by negativity.
- janetmissed 3y ago
  At least hacker new is pretty good, I can't think of any other forum of this scale that isn't a toxic shithole.
  - deleted 3y ago
    [deleted]
- hk1337 3y ago
  We just need to find a way to zap people through the keyboard when they say something stupid or mean.
tambourine_man 3y ago
This is a masterpiece.
danbruc 3y ago
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.
lenerdenator 3y ago
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?"
btbuildem 3y ago
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 3y ago
  The article uses screenshots from apps and operating systems’ interfaces though.
kgeist 3y ago
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 3y ago
  > "the icon is not centered correctly". Would "the icon is not centered" have sufficed? :)
nativeit 3y ago
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!
- settsu 3y ago
  There are dozens of us!† †https://www.youtube.com/watch?v=lKie-vgUGdI https://www.youtube.com/watch?v=lKie-vgUGdI
moi2388 3y ago
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
tuyiown 3y ago
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 !
ugh123 3y ago
Good read but nit: this isn't computer science, this is web dev.
- mm263 3y ago
  Most of the examples are web dev, but some are from iOS and Android.
m3kw9 3y ago
Is like camera focus points Center focus or weight focused, it depends.
robofanatic 3y ago
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!
m3kw9 3y ago
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.
SnoozingBoa 3y ago
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.
kungfupawnda 3y ago
I thought it was getting consensus.
robbiejs 3y ago
What a beautiful website and what a fun read! Thanks for sharing!
chemmail 3y ago
There will be an SNL skit about this soon.
gampleman 3y ago
I made a quick tool to apply the trick he suggests at the end of the article: https://observablehq.com/@gampleman/font-centering-tool https://observablehq.com/@gampleman/font-centering-tool
koromak 3y ago
I gave up trying to center fonts and icons in every situation. I can't explain to my boss that I need 3 days to center a fucking button, especially when he doesn't even notice the problem to begin with.
truemacias 3y ago
The post starts from "funny" statement. "It has never been simpler" and then two examples follow -- one for grid, and one for flex. Both are broken. Yes, I know, they should work and they probably were intended to work by design, however CSS design levels are so low, that centering via simply commanding "center" is not reliable. Hand up if you know when it fails (in 100% legit scenario) and how to "fix" it :-).
sproutster 3y ago
This! This has been driving me nuts forever. I adjust things until they look right, but I've never understood why I needed to do that.
fennecfoxy 3y ago
I mean this just proves yet again that CSS is a convoluted mess not suited to use as a styling language. Its only merits are that it has been around for a long time and all browser support it. 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.
daniel_ew 2y ago
I got fed up with a font being off-centre on a design I was trying to develop and I ended up using this descent-override CSS property on the @font-face block which works rather nicely: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/... That way you can control the vertical position of the whole font. Looks like it's not supported in Safari yet. There's also ascent-override.

1419 points by tobr 3y ago

dqv 3y ago

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.

karaterobot 3y ago
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.
deleted 3y ago
[deleted]
watashiato 3y ago
It's certainly distracting and toggle would be nice, but a uBO filter does the trick in the meanwhile. ||tonsky.me^$websocket,1p
reaperman 3y ago
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.
sph 3y ago
I do not see any cursor.
zajio1am 3y ago
There is such toggle that makes it disabled by default. It is called NoScript.

naasking 3y ago

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

jkaptur 3y ago

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 3y ago
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 3y ago
  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 3y ago
    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?

dkjaudyeqooe 3y ago

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.

koito17 3y ago
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.
tills13 3y ago
> 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 3y ago
  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 3y ago
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.
- deleted 3y ago
  [deleted]
- vesinisa 3y ago
  It is amazing. Evil genius vibes.

cowboylowrez 3y ago

"Honorable mention" at the end made me lol

mckn1ght 3y ago

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

karmakaze 3y ago
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.
pylua 3y ago
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 3y ago
  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.
  - namaria 3y ago
    And then you have weaponized accidental complexity, aiding cv-driven development and vendor lock-in (which are really the same sort of thing).
    - davedx 3y ago
      Hey, leave next.js, react router and vercel alone!

karaterobot 3y ago

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 3y ago
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 3y ago
  I don't think you have to have a "pixel-perfect" rendering system to support centering things correctly?
  - anonymoushn 3y ago
    If you don't, you'll be off by 1px?
    - saurik 3y ago
      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").

Waterluvian 3y ago

> 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?

xnx 3y ago

The page doesn't even mention the brand new align-content property: https://news.ycombinator.com/item?id=40064762 https://news.ycombinator.com/item?id=40064762

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

marcell 3y ago

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

jdmdmdmdmd 3y ago
[dead]
Rumudiez 3y ago
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 3y ago
  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.
cdrini 3y ago
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?

amelius 3y ago

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

analog31 3y ago
The hardest thing is reliable progress.

crazygringo 3y ago

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 3y ago
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 3y ago
  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 3y ago
    Depends on who you want to be able to access your site. Not everyone had 10Mbps+
    - littlestymaar 3y ago
      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).

subjectsigma 3y ago

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 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_ 3y ago
> 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 3y ago
  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.

tiffanyh 3y ago

Text-Box-Trim 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 https://caniuse.com/css-text-box-trim If only browsers would support it. Until then, here’s a JS alternative. https://seek-oss.github.io/capsize/ https://seek-oss.github.io/capsize/

dmackerman 3y ago
Hardly worth mentioning a feature supported by...nothing
- ClassyJacket 3y ago
  That's not true, it's obviously relevant to the article, plus, if it gets mentioned enough it's more likely to get support.
PennRobotics 3y ago
Quick and clear explanation: https://css-tricks.com/leading-trim-the-future-of-digital-typesetting/ https://css-tricks.com/leading-trim-the-future-of-digital-ty...

mrbluecoat 3y ago

It's just as hard in the real world: https://ftw.usatoday.com/lists/nc-state-texas-ncaa-portland-court-wrong-reaction-march-madness https://ftw.usatoday.com/lists/nc-state-texas-ncaa-portland-...

anyfactor 3y ago
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.
- Gare 3y ago
  I would have picked the window too. It's much more prominent anchor.
- smabie 3y ago
  I feel like centering against window is the obvious choice it's just so much more noticeable
silisili 3y ago
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 3y ago

deleted 3y ago

[deleted]

deleted 3y ago
[deleted]

dimal 3y ago

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.

lolinder 3y ago
Which Apple one? Apple features a bunch in here. The Quicktime record button can't be explained by descenders.
wlesieutre 3y ago
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 3y ago
  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 3y ago
They did center everything correctly for decades, do you think it was a mistake? https://grumpy.website/938 https://grumpy.website/938

ivanjermakov 3y ago

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

johnny22 3y ago
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 3y ago
  Yeah, modern in comparison to future developers, not past.

basil-rash 3y ago

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.

hunter2_ 3y ago
Is that any worse than an inability to scroll up, vertically negative, from the initial scroll position?
- basil-rash 3y ago
  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.
Inviz 3y ago
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 3y ago
  `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; }
  - 3y ago

dgfitz 3y ago

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 3y ago
What happened to cache invalidation?
- dgfitz 3y ago
  *off-by-three errors
  - fragmede 3y ago
    and concurrency
  - doctor_eval 3y ago
    and concurrency
- 698969 3y ago
  The list was from before it was added.
- jbverschoor 3y ago
  Almost everything in competing is a cache problem
LeonB 3y ago
“Naming things” can’t be listed first, the joke doesn’t work if you put naming things first.
- dgfitz 3y ago
  Enlighten me please, sincerely. I’m apparently too thick to understand.

zagrebian 3y ago

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?

sombrero_john 3y ago
A well-designed product will sell better than a slightly-less-well-designed product
ryandrake 3y ago
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 3y ago
  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 3y ago
    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.

carlottaludwig 3y ago

[dead]

likium 3y ago

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.

Animats 3y ago

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.

sdwr 3y ago
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
- lifthrasiir 3y ago
  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.
- troupo 3y ago
  > 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.
dclowd9901 3y ago
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.
- codethief 3y ago
  Could you elaborate? I've never worked on any iOS apps before but this sounds very similar to what I'd like UI development on the web to be like.

dr_kiszonka 3y ago

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

_factor 3y ago
Don’t forget the dead butterflies.
Maxion 3y ago
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 3y ago
  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.
  - reaperman 3y ago
    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 3y ago
      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"

strogonoff 3y ago

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 3y ago
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 3y ago
  > 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).

grecht 3y ago

This is not computer science, but programming.

alexvitkov 3y ago
This is not programming.
- Izkata 3y ago
  CSS is a declarative programming language.
  - strix_varius 3y ago
    CSS is a declarative styling language and is not Turing complete.
overengineer 3y ago
solving constraint problems is CS

johnsanders 3y ago

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.

mfritsche 3y ago

Seeing the example of "Berliner Fernsehturm" I was reminded of https://twitter.com/dw_culture/status/1166657103332872197 https://twitter.com/dw_culture/status/1166657103332872197

lmm 3y ago

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.

teo_zero 3y ago

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 3y ago
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".

paufernandez 3y ago

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.

jibbit 3y ago

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

emadda 3y ago

If you want an interactive demo of how justify and align work in grid: https://cssprinciples.com/3/grid/#justify-and-align https://cssprinciples.com/3/grid/#justify-and-align

mbrezu 3y ago

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

low_tech_punk 3y ago

The upvote triangle seems a little off too.

zarzavat 3y ago

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!

adityamwagh 3y ago

This is also the guy behind Fira Code.

bryanrasmussen 3y ago

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 3y ago
April fool prank, probably.
- mkl 3y ago
  No, it's always there, pointlessly distracting. See e.g. 6 months ago: https://news.ycombinator.com/item?id=37735801#37737256 https://news.ycombinator.com/item?id=37735801#37737256

Semaphor 3y ago

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

reddalo 3y ago
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.
cwillu 3y ago
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 3y ago
  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.
kioshix 3y ago
Even better, add this to block the websocket connection for the pointers: ! Annoying pointers on blog wss://tonsky.me/ptrs?*

mmis1000 3y ago

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.

AtNightWeCode 3y ago

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 3y ago
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.

fx1994 3y ago

~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 3y ago
Why would you want to make things pixel perfect? Why not work with the flexibility of the web instead?
- PennRobotics 3y ago
  because sometimes one missing pixel makes everything look awful: https://stackoverflow.com/questions/11419541/how-can-i-get-rid-of-this-one-pixel-space-between-table-cells https://stackoverflow.com/questions/11419541/how-can-i-get-r...

Marlinski 3y ago

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.

sph 3y ago
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.
- abhpro 3y ago
  If you like a yellow background, I guarantee you are an outlier
SileNce5k 3y ago
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.
troupo 3y ago
> with distracting fake mouse move. These are multiplayer cursors. You're seeing other people using the website
abanana 3y ago
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".
blakeburch 3y ago
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.

brailsafe 3y ago

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

red1reaper 3y ago

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

watwut 3y ago

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 3y ago
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.

cess11 3y ago

Matthew Butterick has done some good in this space, mostly from the perspective of typography. https://www.youtube.com/watch?v=K3tZisVDIVk https://www.youtube.com/watch?v=K3tZisVDIVk https://practicaltypography.com/ https://practicaltypography.com/ https://beautifulracket.com/appendix/racketcon.html https://beautifulracket.com/appendix/racketcon.html

KaiMagnus 3y ago

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-of-digital-typesetting-d082d84b202 https://medium.com/microsoft-design/leading-trim-the-future-...

tosh 3y ago

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

renegade-otter 3y ago

"If you really hate someone - teach them kerning"

robertlagrant 3y ago

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 3y ago
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 3y ago
  But then that won't be centred.

shiomiru 3y ago

> 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 3y ago
> 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.

virtualritz 3y ago

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.

datascienced 3y ago

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

figassis 3y ago

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 3y ago
That's called optical alignment. He somewhat mentions that with the Apple logo example.
- thejohnconway 3y ago
  I think it's true of some of the other Apple examples that he's put lines over, they look optically correct.
hennell 3y ago
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.

TechOfNote 3y ago

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

iainmerrick 3y ago
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!

ingen0s 3y ago

Knocked it out! Nice work!

simonbarker87 3y ago

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

jack_riminton 3y ago

maybe it's just not that important

joestrong 3y ago

> (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 3y ago
That’s what ChatGPT told me
- latexr 3y ago
  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 3y ago
also it's not named horizontal and vertical because it depends on the direction of the text - some text reads vertically

lgeorget 3y ago

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.

_def 3y ago

Why do you need to remember four words instead of just `horizontal`/`vertical`? Why did `justify-content` became `justify-items`?

evrimoztamur 3y ago
Because `flex-direction` exists, which means that horizontal and vertical are contextually meaningless. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction 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 3y ago
  Or you can just ditch flex-direction... It’s not like it serves any great purpose

dingdingdang 3y ago

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 3y ago
It's other peoples mouse cursor.
- dingdingdang 3y ago
  Thanks for the clarification. Still a rather horrifying effect for me given that I was trying to take in the content of the article and not the latency-ridden odd movements of other people's cursors, am I missing something (more!) here in terms of the why?

holoduke 3y ago

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.

aldousd666 3y ago

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.

amadeuspagel 3y ago

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

janetmissed 3y ago
At least hacker new is pretty good, I can't think of any other forum of this scale that isn't a toxic shithole.
- deleted 3y ago
  [deleted]
hk1337 3y ago
We just need to find a way to zap people through the keyboard when they say something stupid or mean.

tambourine_man 3y ago

This is a masterpiece.

danbruc 3y ago

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.

lenerdenator 3y ago

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

btbuildem 3y ago

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 3y ago
The article uses screenshots from apps and operating systems’ interfaces though.

kgeist 3y ago

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 3y ago
> "the icon is not centered correctly". Would "the icon is not centered" have sufficed? :)

nativeit 3y ago

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!

settsu 3y ago
There are dozens of us!† †https://www.youtube.com/watch?v=lKie-vgUGdI https://www.youtube.com/watch?v=lKie-vgUGdI

moi2388 3y ago

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

tuyiown 3y ago

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 !

ugh123 3y ago

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

mm263 3y ago
Most of the examples are web dev, but some are from iOS and Android.

m3kw9 3y ago

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

robofanatic 3y ago

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!

m3kw9 3y ago

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.

SnoozingBoa 3y ago

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.

kungfupawnda 3y ago

I thought it was getting consensus.

robbiejs 3y ago

What a beautiful website and what a fun read! Thanks for sharing!

chemmail 3y ago

There will be an SNL skit about this soon.

gampleman 3y ago

I made a quick tool to apply the trick he suggests at the end of the article: https://observablehq.com/@gampleman/font-centering-tool https://observablehq.com/@gampleman/font-centering-tool

koromak 3y ago

I gave up trying to center fonts and icons in every situation. I can't explain to my boss that I need 3 days to center a fucking button, especially when he doesn't even notice the problem to begin with.

truemacias 3y ago

The post starts from "funny" statement. "It has never been simpler" and then two examples follow -- one for grid, and one for flex. Both are broken. Yes, I know, they should work and they probably were intended to work by design, however CSS design levels are so low, that centering via simply commanding "center" is not reliable. Hand up if you know when it fails (in 100% legit scenario) and how to "fix" it :-).

sproutster 3y ago

This! This has been driving me nuts forever. I adjust things until they look right, but I've never understood why I needed to do that.

fennecfoxy 3y ago

I mean this just proves yet again that CSS is a convoluted mess not suited to use as a styling language. Its only merits are that it has been around for a long time and all browser support it. 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.

daniel_ew 2y ago

I got fed up with a font being off-centre on a design I was trying to develop and I ended up using this descent-override CSS property on the @font-face block which works rather nicely: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/... That way you can control the vertical position of the whole font. Looks like it's not supported in Safari yet. There's also ascent-override.