Matthew Butterick has done some good in this space, mostly from the perspective of typography.
https://www.youtube.com/watch?v=K3tZisVDIVk https://practicaltypography.com/ https://beautifulracket.com/appendix/racketcon.html
Hardest problem in computer science: centering things
171–180 of 473 posts
Re: Hardest problem in computer science: centering things
#172That 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.
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.
Re: Hardest problem in computer science: centering things
#173Text-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 If only browsers would support it. Until then, here’s a JS alternative. https://seek-oss.github.io/capsize/
Quick and clear explanation: https://css-tricks.com/leading-trim-the-future-of-digital-ty...
Re: Hardest problem in computer science: centering things
#174Earlier quoted context omitted.
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"
> which I will argue should be called I think you're missing the joke of the name!
I don't think it's a joke. The possessive plural is a disaster in American English
Re: Hardest problem in computer science: centering things
#175If 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…
Indeed I think the advice around calibrating fonts is not going to work if the text is long or has an unusual arrangement of ascenders and descenders. The reality is that centring is very context specific.
Re: Hardest problem in computer science: centering things
#176This 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…
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.
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.
Re: Hardest problem in computer science: centering things
#177Earlier quoted context omitted.
And then it took some 20-ish years for CSS to finally realize that aligning to a grid is a good idea and, through a long, painful, incremental process, eventually reinvent tables for layout.
I mean, semantics are also good! Yes, CSS grids are a lot like tables in some ways, but not having to add 25% more DOM elements to fake a table layout (display: table/table-row/table-cell; that's 3 divs for one row!) is also a thing to be celebrated. Plus, in practice, grid is a lot more powerful than doing a few common layouts. Grid took so long precisely because they were trying to think a little further ahead rath…
Nah, semantics are worthless. The whole semantic web idea never took off for good reasons, HTML5 semantic tags don't have any meaningful semantics and you can't even reliably remove boilerplate from HTML without ML pipelines (a basic use case you'd expect any "semantic" document format to nail easily). Then the invention of LLMs killed it twice over.
HTML is a graphics rendering language in denial about its true nature.
Grid took a long time because everything takes a long time when you have to align mutually competing organizations and there's no profit motive involved with the actual work itself. There's no real technical benefits to CSS layout over table tags. A table tag isn't a heavy object. CSS cascade calculations on the other hand ...
Re: Hardest problem in computer science: centering things
#178Earlier quoted context omitted.
And then it took some 20-ish years for CSS to finally realize that aligning to a grid is a good idea and, through a long, painful, incremental process, eventually reinvent tables for layout.
I mean, semantics are also good! Yes, CSS grids are a lot like tables in some ways, but not having to add 25% more DOM elements to fake a table layout (display: table/table-row/table-cell; that's 3 divs for one row!) is also a thing to be celebrated. Plus, in practice, grid is a lot more powerful than doing a few common layouts. Grid took so long precisely because they were trying to think a little further ahead rath…
> but not having to add 25% more DOM elements to fake a table layout
I'm not the most current, but as I remember in CSS tables those table-internal elements generate the needed anonymous boxes of rows, tbodys and such, when those arent't specified:
Re: Hardest problem in computer science: centering things
#179I’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-...
Re: Hardest problem in computer science: centering things
#180My 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...
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.