Gregory's ServerI wrote another article! It’s about our failure, as a society, to solve one of the fundamental CS problems. I am sorry https://tonsky.me/blog/centering/
Niki Tonsky
26 comments
Niki Tonsky
@confuseacat if you were talking about mobile, I just bumped it even more. Pls take a look
Manni
@nikitonsky Yes, I was talking about mobile. Much better now. Thank you! 
Roma Komarov
@nikitonsky Re: CSS stuff. The position of the font in the line-height could be possible to fix in the future (https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/ascent-override, no Safari support for now, sadly). Aligning icons to the middle of cap-height: https://blog.kizu.dev/cap-height-align/ with the `cap` unit, we can do even without known icon size (via middle align + negative margin and a difference between `ex` and `cap`).
Roma Komarov
@nikitonsky Also, for flex/grid centering: - If the element is guaranteed the only one, `margin: auto` on it is often enough. - Otherwise, `place-items: center` + `place-content: center` will work equally on both flex and grid (as it does both align+justify, so covers either, and easier to remember this case).
ᓚᘏᗢ
@nikitonsky i feel like i turn my brain inside out writing centering code for html-canvas that works with a changing scale/aspect ratio i've done it a half dozen times and STILL it gets me with its gotchas 
adamrice
@nikitonsky Just wanted to say that I lauged out loud at your “night mode.” Also, this was a good read.
Oliver Kohll
@nikitonsky OK at least this makes me feel less bad that my app's toolbar has various images, text and icon fonts centred by eye basically by adding fixed offsets to the top of each manually. A reminder I should look at that at some point, but also if it's futile it's not my fault!
Rob
@nikitonsky I volunteered for my daughter’s volleyball site and used a custom CSS framework to get some decent color themes on the site. I wanted to put buttons on the bottom of the page that referred to each team page. I cannot tell you how many hours went into getting the stupid icons and letters to center inside some circles. I never got it right and blamed myself and my lack of skill. Never got the centering right. Always bothered me.
Redmer
@nikitonsky lovely as always. The most egregious non-centering in my opinion is MacOS window close button. Luckily only visible on hover 🥲 i.e., when you're truly focusing on it 
Raphael
@nikitonsky Re icon fonts in terminals: Okay, I'll bite. How else to get icons in the terminal? PS: Great post. By which I mean depressing. And reaffirming my appreciation for TeX. 
Magnus Ahltorp
@nikitonsky There are many cases where it’s relevant for stylistic reasons, but one very obvious example where it’s mandated by the content and that I’m working with right now: dictionaries. Not all dictionaries are strictly lowercase-only, but all except a few types are definitely lowercase-mostly. It looks really off when you centre on the cap height.
Niki Tonsky
@ahltorp nah. Balancing on x-height seems way too high to me. Somehow even thought it’s all lowercase, your brain still know that uppercase letters exist
Magnus Ahltorp
@nikitonsky But that’s because your image’s upper text isn’t centred on x-height. 93 pixels above, and 99 pixels below.
Niki Tonsky
@ahltorp you are right, my bad! Figma added one pixel because of pixel snapping. Let’s try again: 
Julik Tarkhanov
@nikitonsky I would add another recommendation: we need at least some degree of getting back into the situation where you can Pick The Damn Box And Drag It Around Until It Looks Good. That would be a recommendation for tool makers. Better baseline control in CSS would also be nice.
Julik Tarkhanov
@nikitonsky And, as always: "Show me your button alignment and I will reveal your org chart". |
@nikitonsky Don't get me wrong, but I probably would have read through that post if the font-size wouldn't render at this ridiculously tiny size.