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.
I’m not entirely sure I agree with you on this. It’s hard for me to say because I really like the imperfections in things I build, for the most part. Like I’ll full spartle a wall (not entirely sure if this is the correct English description) and I’ll intentionally leave the finish less than “perfect” because I think it adds a little soul to it that will make me happy down the years.
Then you have things like flooring, installing windows, and anything on outside, however, where I’ll absolutely make sure it’s perfectly everything. Basically so my floors have none of the issues you describe as an example. Part of the success behind this is to hide the imperfections. You’re not going to ever build a perfect floor if you build it all the way to the wall. So what you do is that you leave a gap between the wall and the floor and you cover that gap up with wooden “footlists” (again not sure if that’s the correct English description). This gives you a “perfect” floor which aligns with everything in the room. The more crooked a room is, the more you have to cheat, but if you put in the effort it’s almost always achievable.I would like the small imperfections in these things as well. Ok, maybe not on the outside unless I was very sure it wouldn’t have an impact on the integrity of weather protection, but I wouldn’t mind crooked floors. The reason I strive to make them perfect is that other people won’t, which will make a property much harder to sell. Because unlike imperfect ”walling”, a floor correction/replacement will absolutely impact the value of a property.
But then there is the part where you will absolutely notice it when it’s not installed correctly. Which is what I guess you’re getting at, and I agree with you. The thing with buildings, however, is that you have to cheat. Buildings are imperfect and they can even more around a bit as weather conditions change. So with buildings you have to cheat. Which is different than with aligning things on the web, or at least it should be. So this is the part I disagree with a little.
As a side note people shouldn’t accept crooked floors and so on, especially not when you’ve hired professionals. They should know how to cheat.
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.
I haven't built/done any of these and yet notice misalignments and it drives me nuts. Hundreds of thousands of dollars (equivalent in INR) spent to on buildings and they don't bother to align bricks; it's as if there's no value in aesthetics, visual beauty, symmetry etc.,
This is what causes me absolute task initiation paralysis - the fear of not being perfect - even with my new attempt at adherence to "don't let perfection be the enemy of good enough"
Does anyone else who comes into the house notice anything? Very unlikely unless they are craftspeople.
I thought the tiles on my bathroom floor were perfectly flat and even on the ground, until I switched off the light and used that damn laser on the Dyson vacuum cleaner.
What greeted me was an uneven landscape of tiles that the naked eye just didn't see.
For me it was 3D printing. My vision started to occasionally annotate and code-suggest on real world objects. I kind of wish I didn't realize just how much we're enabling M3 screws.
I can attest to that. Painting doors and then watching the result is akin to watching a good painting/desktop background for too long... as time passes you start to notice the irregularities. Like the girl's hand is overly big, or her legs are exaggerated.
I just patched a whole bunch of drywall cutouts after having some electrical work done. Now I when I look at a new construction house, I can tell which builders use go cheap on drywall, esp. when there's too much texture.
Tiles. There is a correct way to install them. I don’t know how you decide what’s correct, but sometimes it’s centred, sometimes a full one on the left, or the right.
Then you have the same scenario but top to bottom.
Bicycle handlebars and brake levers alignement. This can drive you crazy...yet nobody has 2 arms the same length so perfect alignment shouldn't even matter that much.
Truth, I spend every free second in an Airbnb analyzing their trim, electrical, flooring, et c work. Spotting where additions were made. Can’t turn it off.
I wish I had never heard of kerning! I wasn't even aware that I was sensitive to kerning issues until this abomination came into my house: https://th.bing.com/th/id/OIP.bdzKtgJ5MkGpA5iutzfTxQAAAA?rs=...
Now, whenever I see that thing, I feel a sudden urge to throw it out of the window...
Former frontend developer here -- I did fight with these misalignments (typically those things that don't align were lots of nested containers, fighting with each other in different ways, so the solution was to clean them up and use one simple alignment).
But I stopped noticing these things, maybe because mobile UIs are a lot worse -- not in visual design, but in that they always do weird things and live their own life.
Misalignment is a tiny dirty spot on a clean but wrecked car.
Several years ago I spent around 2 weeks on fixing antialiased font rendering in a game engine. Had to look close at the text in other apps to compare. Took me months to unsee it
I just went through all of the easy ones and most of them seem "obvious", but some of them seem like preference (like the separator width). Another one I noticed is medium 6, where I'm not sure the smaller icon is necessarily always better. I'd be careful taking something like this as gospel without careful scrutinization. A lot of it feels like modern UI dogma which likes to waste space for no reason other than aesthetics, rather than actual UI research. Some of it just feels completely arbitrary.
I accidentally did something similar to a college friend when I pointed out the 15khz hum that televisions made. He had not noticed that before and then couldn't stop hearing it.
relatively . Till you take things into your own hands and fix that pesky button with extra padding on top. Huh how hard was that! Lazy devs.
You just entered the mystical world of undocumented browser behavior where every browser does its own thing. The button looks ok on chrome, but safari's borders are more round making that look still off. You won't back down, and take on this challenge, make it look great on chrome and safari too. Yay! Worth the 2 hours eh.
Up rears the monster of responsive design... it doesn't work well on safari on the phones now. Well it works for me you say, till you rotate your screen and the button is Gone !
You finally succumb and say screw it, i'll just stick with html and get back to scrolling hn.
As great as it is, it still sucks because on my full-screen browser, the text spans the entire monitor width, which makes text hard(er) to read. But as soon as you start forcing narrower columns for better readability, you start to run into positioning and precision problems again.
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.)
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.
The problem with your brain and your eyes are that they aren't available after the user picks their preferred font or for user-generated content or probably not after the text had been translated.
> 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).
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.
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.
Man... whole generations just straight up either do not realize, or have forgotten that early CSS revolved around creating documents, not apps, and that all of those design paradigms originated from typesetting.
In the same way that one would float a figure to the left or right of lines of a paragraph, `float: left;` and `float: right;` allowed you to do the same.
Open a textbook and look at lines of a paragraph flowing (where content "flow" layout comes from) around a figure, such as an image or a diagram.
The World Wide Web was documents.
In this context, `float` was a genius idea. There's literally no other way in CSS to do this without a bunch of hacks.
Honestly, that itself sounds bad too. The concept of floating sounds like something invented back during manual typesetting or earlier.
I think anyone ever trying to write a paper or book with images in it using tools like LaTeX knows how bad it is to let the tool position images for you. It's always wrong, and one of the first things you learn is how to pin the image in between the text lines/paragraphs you wanted it to be between.
Text-to-diagram tools like PlantUML (and arguably even Graphviz) make this mistake too. The moment you put more than a couple things in your diagram, you discover that auto-layout can't ever make the result readable, and you look for ways to pin parts of the diagram relative to other parts; something these tools don't let you do either.
And then all three classes of tools here - HTML, typesetting, diagramming - violate the principle of least surprise in the nastiest of way: make one little change, add a letter or word somewhere, suddenly the result looks nothing like it was before, as the auto-layouting flips everything around.
It is a weird myth that CSS somehow discourages tables. CSS have supported styling html tables and ‘display:table’ (allowing a table-like layout without html-tables) for 25 years.
Float and clear was grandfathered into CSS since they were added to HTML by Netscape. They are fine for their intended purpose: placing images in a text and have the text flow around.
Other positioning systems you mention does not solve the same problem as CSS. CSS has to support viewports of any size and dimensions and allow text to scale independently of the viewport size and still remain readable.
>It is a weird myth that CSS somehow discourages tables. CSS have supported styling html tables and ‘display:table’ (allowing a table-like layout without html-tables) for 25 years.
Not a myth in any way shape or form. Tables for layout (not tables in general) were discouraged with various arguments in favor of "float/clear", even decades before a sane substitute (grid/flex) was available.
>Other positioning systems you mention does not solve the same problem as CSS. CSS has to support viewports of any size and dimensions and allow text to scale independently of the viewport size and still remain readable.
None of those requirements is unique to CSS, and none of those requirements necessitates the stupid float/clear mechanisms that were shoved into people's throats for 15 years.
We're talking about the style language that had layout shoe-horned into it, and which tool decades to develop the most basic layout mechanisms available in GUIs for decades, grid layout and flex layout. And even when it did, it didn't it badly.
Before CSS people used to use tables, often nested, for all kinds of layout. Eg if your page had a header, a sidebar and a main text area, you would create a table with cells of the right relative widths, with invisible borders, and put each layout element in one possibly merged cell. This was essentially standard practice for a while.
CSS allowed layouts like this to be done without tables. It still supported tables, but for the case when you actually want to show tabular data which would appear like a table on the page.
I absolutely remember a ton of pieces about how we all needed to stop using tables (and 1x1 transparent gifs, too) for page layout because CSS was The Right Way
Except for (vector) graphics design, desktop publishing, page layout designing and reporting software...
The reason is of course that most printed items are unica and non-variable, but
proper parametric and constraint-based would definitely be useful in report generation and signage where print formats vary or where designs need to be automatically adjusted based on texts and other content varying in size/length.
Do the tools you say do it better than html also handle the variety of clients html documents are expected to work with? Or handle accessibility better?
XAML/Silverlight was pretty fantastic. Significantly more sane layout model (by virtue of having more than a mote of sanity at all). It did handle a very wide gamut of clients during its time.
Why? Because it was designed for creating apps, not documents. HTML is great for creating documents, most of the examples in the post are not documents.
I don’t think it was that tables were bad. They were too formulaic and too strict and it was hard to do something that would stand out.
With CSS it wasn’t dumping problem on the others, it was giving the freedom. Problem with freedom is that it is never free and you also have to fix additional problems that come with it.
The problem I see with using tables for layout is that it fucks up the semantic meaning of the html file.
But that was an issue of philosophy that got trumped by practical needs.
However, nowadays we have css grids with template areas. So we can just write our HTML semantically correct as if it was more or less just about the content (as it should be IMHO) and still move things around using CSS depending on the type of device, size of screen, media used.
So the holy grail in my opinion is to write HTML that contains only content and metadata and next to no elements or attributes that are needed purely for semantically irrelevant layout and styling purposes — and then do all the layout and styling in CSS. Styling tags like <em> or the occasional <section class="notice"> are okay, one should never be too strict with such ideals.
The advantage here is that this provides the maximum decoupling between the content and the layout/styling which not only helps with future layout updates, but improves the accessability of the page.
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.
They probably thought we would ditch HTML/CSS for something better but then PHP came around and fixed many of HTML's shortcomings and then AJAX came around and we kept sinking DEEP into this fundamentally broken ecosystem and now it's just too late to leave.
Although, honestly, how hard would it be for Chrome to support some new language called Super Text Markup Language that is designed for modern use with support for templating, portals, actual semantic layouts that don't rely on position on the code, etc.? Perhaps it's time.
> Although, honestly, how hard would it be for Chrome to support some new language called Super Text Markup Language that is designed for modern use with support for templating, portals, actual semantic layouts that don't rely on position on the code, etc.? Perhaps it's time.
"Google Web". Like what Google did to USENET. First they connected to USENET. Then they called it "Google Groups". Gradually, free USENET declined, and now, there is only Google Groups.
It would be so much more convenient. No more need for hosting providers, domain services, and most of AWS. Just host on Google Web.
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.
Funnily enough, Unity's latest UI approach is to just use web tech, with their 'UML' XML dialect plus CSS-like styling via the yoga embeddable C++ flexbox renderer.
Also, Fusion 360 is now known as just Fusion (it's cleaner that way?)
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.
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.
> First, that font rendering isn't just about metrics but varies across operating systems and browsers.
This is in parts, however, due to font metrics, because Windows and Mac use different conventions of how font metrics are specified in fonts: https://www.williamrchase.com/writing/2019-11-10-font-height...
In other words, the usual font formats don’t specify font metrics in an unambiguous way.
> 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.
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.
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.
For me, personally, React makes up too many new things just with potentially slight modification and thus adding unnecessary layers of complexity. Then it is incredibly painful if you're ever in a position to debug someone else's code when they were using react. It's not as bad as having to deal with graphQL but it's still pretty awful.
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.
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.
Not saying your opinion is wrong, but for some reason I found myself consciously liking the yellow a lot, which is rare for an article background color for me
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.
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.
To better understand how people might get confused... Imagine a room 9 feet <insert your favorite unit of measure> long and fans 2 feet in diameter. If you put them with bases equally spaced—3 feet apart—you get a gap 2 feet between the wall and fans… but 1 foot spaced apart in the middle.
Naively, you move each fan a half foot closer to the wall. This makes the gap 1.5 feet to the wall but now 2 feet between each other. (You might find ways to argue that this looks better visually than the true answer below, and that depends on a lot of perception-altering factors including how low the fan hangs from the ceiling, amount/ratio of space available, the distance from the non-perpendicular walls, and light sources as they might cast shadows with different sized gaps on the ceiling.)
You need to take the total room length and subtract the fan diameters, then divide that by 3. (So, 5 / 3 = 1.667 or 1'8" from wall to blade tip.) Thus, each base should be 2.667 feet from its nearest wall. This makes a gap 1'8" between each blade tip:
Bringing this around to the theme of web design, this is akin to space-between, space-around, and space-evenly in justify-content[1] (except there isn't a "space the center of each element evenly" selection, except maybe stretch or nesting everything in another flexbox)
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.
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.
Readit News
(It is a good article!)
- Install flooring
- Install trim in your own home
- Build / install cabinets
You will now see:
- Odd flooring patterns and uneven floors
- Know what it looks like when trim isn't coped
- Uneven gaps between doors
Then you have things like flooring, installing windows, and anything on outside, however, where I’ll absolutely make sure it’s perfectly everything. Basically so my floors have none of the issues you describe as an example. Part of the success behind this is to hide the imperfections. You’re not going to ever build a perfect floor if you build it all the way to the wall. So what you do is that you leave a gap between the wall and the floor and you cover that gap up with wooden “footlists” (again not sure if that’s the correct English description). This gives you a “perfect” floor which aligns with everything in the room. The more crooked a room is, the more you have to cheat, but if you put in the effort it’s almost always achievable.I would like the small imperfections in these things as well. Ok, maybe not on the outside unless I was very sure it wouldn’t have an impact on the integrity of weather protection, but I wouldn’t mind crooked floors. The reason I strive to make them perfect is that other people won’t, which will make a property much harder to sell. Because unlike imperfect ”walling”, a floor correction/replacement will absolutely impact the value of a property.
But then there is the part where you will absolutely notice it when it’s not installed correctly. Which is what I guess you’re getting at, and I agree with you. The thing with buildings, however, is that you have to cheat. Buildings are imperfect and they can even more around a bit as weather conditions change. So with buildings you have to cheat. Which is different than with aligning things on the web, or at least it should be. So this is the part I disagree with a little.
As a side note people shouldn’t accept crooked floors and so on, especially not when you’ve hired professionals. They should know how to cheat.
I’m curious if other people detect interrupted or irregular patterns so readily. It’s like there’s a part of my brain just looking for anomalies and I can’t turn it off.
/rant
Does anyone else who comes into the house notice anything? Very unlikely unless they are craftspeople.
What greeted me was an uneven landscape of tiles that the naked eye just didn't see.
I just patched a whole bunch of drywall cutouts after having some electrical work done. Now I when I look at a new construction house, I can tell which builders use go cheap on drywall, esp. when there's too much texture.
Then you have the same scenario but top to bottom.
Deleted Comment
Deleted Comment
Deleted Comment
But I stopped noticing these things, maybe because mobile UIs are a lot worse -- not in visual design, but in that they always do weird things and live their own life.
Misalignment is a tiny dirty spot on a clean but wrecked car.
I went to an MLS game with someone who had been a soccer ref and he pointed out that the line on the side of the field wasn't perfectly straight.
(The original design had it centered in the flag; some committee later decided it should be centered in the "flag plus flagpole".)
edit: ahh.. a vote for bad kerning. lol
That's not good or bad design, it's totally subjective. Stupid website IMO
relatively . Till you take things into your own hands and fix that pesky button with extra padding on top. Huh how hard was that! Lazy devs.
You just entered the mystical world of undocumented browser behavior where every browser does its own thing. The button looks ok on chrome, but safari's borders are more round making that look still off. You won't back down, and take on this challenge, make it look great on chrome and safari too. Yay! Worth the 2 hours eh.
Up rears the monster of responsive design... it doesn't work well on safari on the phones now. Well it works for me you say, till you rotate your screen and the button is Gone !
You finally succumb and say screw it, i'll just stick with html and get back to scrolling hn.
I was in school, sitting in study hall with a friend.
He leaned over and said "Doesn't the buzzing of those lights bother you?"
and then I noticed the whining sound of the room's overhead lights and I couldn't unhear it from that point on.
bleh.
Literally cannot win.
Dead Comment
Use precise measurements for your margins? Someone will say that perceptually it’s not symmetrical, and rightfully point out that perceived symmetry is the only one that matters. Adjust visually for your hanging punctuation, ascenders and descenders? Someone will draw a bunch of red lines and complain it’s not perfectly aligned with baseline, x-height, or whatever they prefer.
GUIs around us are rich with obviously broken examples where spinners spin out of their centers, text in boxes is misaligned, etc. However, as articles like this one show, even if every one of those is dealt with, us designers will still have everything to complain about. (Pro tip: if you struggle to find something to complain about in the English version of a GUI, just switch to, say, Arabic.)
I guess one could devise algorithms for that, but I haven't seen one that does a better job than my brain and my eyes.
That was my naive understanding for probably my first year at the uni. It got cleared up fairly quickly.
I imagine there can be typesetting/layout styles where this holds, but I would classify them as niche (maybe brutalism or something like that).
Funnily enough, in the very first example under Fonts I thought the author didn’t like “Manage…” because it could be pushed slightly to the right (due to ellipsis), but it turns out to be about vertical alignment which I didn’t see anything obviously wrong about in that particular case.
Once you deal with the obvious cases of lopsidedness in your design, the important quality becomes simply: stay consistent. Here, no self-respecting designer would pull one random example and say it’s wrong—you have to assess in context of design model as a whole, where you can either 1) show how one particular button breaks the model, or 2) argue that the model is wrong (which can be done, but good luck).
I know the newer TeX engines, for example, support microtypographical corrections.
2D and 3D tools get this right. CAD programs, game engines, and animation programs are all far better at positioning things. They have far better layout engines and constraint systems. This is really a constraint problem. Autodesk Inventor and Fusion 360 have good 2D constraint solvers, ones that can put something on a centerline, or parallel, or whatever, including curve tools. Webland never got that far.
In the same way that one would float a figure to the left or right of lines of a paragraph, `float: left;` and `float: right;` allowed you to do the same.
Open a textbook and look at lines of a paragraph flowing (where content "flow" layout comes from) around a figure, such as an image or a diagram.
The World Wide Web was documents.
In this context, `float` was a genius idea. There's literally no other way in CSS to do this without a bunch of hacks.
I think anyone ever trying to write a paper or book with images in it using tools like LaTeX knows how bad it is to let the tool position images for you. It's always wrong, and one of the first things you learn is how to pin the image in between the text lines/paragraphs you wanted it to be between.
Text-to-diagram tools like PlantUML (and arguably even Graphviz) make this mistake too. The moment you put more than a couple things in your diagram, you discover that auto-layout can't ever make the result readable, and you look for ways to pin parts of the diagram relative to other parts; something these tools don't let you do either.
And then all three classes of tools here - HTML, typesetting, diagramming - violate the principle of least surprise in the nastiest of way: make one little change, add a letter or word somewhere, suddenly the result looks nothing like it was before, as the auto-layouting flips everything around.
The problem is the people who designed CSS had an ideological axe to grind. They believed that HTML should only be used for document layout.
Float and clear was grandfathered into CSS since they were added to HTML by Netscape. They are fine for their intended purpose: placing images in a text and have the text flow around.
Other positioning systems you mention does not solve the same problem as CSS. CSS has to support viewports of any size and dimensions and allow text to scale independently of the viewport size and still remain readable.
Not a myth in any way shape or form. Tables for layout (not tables in general) were discouraged with various arguments in favor of "float/clear", even decades before a sane substitute (grid/flex) was available.
>Other positioning systems you mention does not solve the same problem as CSS. CSS has to support viewports of any size and dimensions and allow text to scale independently of the viewport size and still remain readable.
None of those requirements is unique to CSS, and none of those requirements necessitates the stupid float/clear mechanisms that were shoved into people's throats for 15 years.
We're talking about the style language that had layout shoe-horned into it, and which tool decades to develop the most basic layout mechanisms available in GUIs for decades, grid layout and flex layout. And even when it did, it didn't it badly.
CSS allowed layouts like this to be done without tables. It still supported tables, but for the case when you actually want to show tabular data which would appear like a table on the page.
(which, unfortunately, is why is has terrible zoom support)
Except for (vector) graphics design, desktop publishing, page layout designing and reporting software... The reason is of course that most printed items are unica and non-variable, but proper parametric and constraint-based would definitely be useful in report generation and signage where print formats vary or where designs need to be automatically adjusted based on texts and other content varying in size/length.
Why? Because it was designed for creating apps, not documents. HTML is great for creating documents, most of the examples in the post are not documents.
With CSS it wasn’t dumping problem on the others, it was giving the freedom. Problem with freedom is that it is never free and you also have to fix additional problems that come with it.
But that was an issue of philosophy that got trumped by practical needs.
However, nowadays we have css grids with template areas. So we can just write our HTML semantically correct as if it was more or less just about the content (as it should be IMHO) and still move things around using CSS depending on the type of device, size of screen, media used.
So the holy grail in my opinion is to write HTML that contains only content and metadata and next to no elements or attributes that are needed purely for semantically irrelevant layout and styling purposes — and then do all the layout and styling in CSS. Styling tags like <em> or the occasional <section class="notice"> are okay, one should never be too strict with such ideals.
The advantage here is that this provides the maximum decoupling between the content and the layout/styling which not only helps with future layout updates, but improves the accessability of the page.
Although, honestly, how hard would it be for Chrome to support some new language called Super Text Markup Language that is designed for modern use with support for templating, portals, actual semantic layouts that don't rely on position on the code, etc.? Perhaps it's time.
"Google Web". Like what Google did to USENET. First they connected to USENET. Then they called it "Google Groups". Gradually, free USENET declined, and now, there is only Google Groups.
It would be so much more convenient. No more need for hosting providers, domain services, and most of AWS. Just host on Google Web.
I guess it's way more complex than HTML rendering already is
yes. IIRC Cassowary constraint solving was proposed in 1999. It was dismissed because they thought it would be too costly on the hardware of the time.
Also, Fusion 360 is now known as just Fusion (it's cleaner that way?)
What design tools express in UI/UX interaction, CSS must express in context-free grammar. It's every bit as awkward as replacing verbs with nouns.
But I'll add two more wrinkles that the author doesn't mention:
First, that font rendering isn't just about metrics but varies across operating systems and browsers. So even if you center perfectly on Chrome on your Mac, it may very well be off on Firefox on Windows.
And second, that the author's proposed solutions only work for Western-style fonts that have ascenders and descenders. It gets even trickier when you consider a range of totally different scripts from Asia etc.
We need sane font rendering in browsers that treat things like alignment in a way that we’d expect for the 99% case. If I say “center” it should just fucking center.
This is in parts, however, due to font metrics, because Windows and Mac use different conventions of how font metrics are specified in fonts: https://www.williamrchase.com/writing/2019-11-10-font-height... In other words, the usual font formats don’t specify font metrics in an unambiguous way.
LOL, these examples are exactly why I got out of web programming. Thankfully I never had to deal with any of the modern frameworks. I was getting hot flashes just scrolling through this page.
You will want to make sure you work on things that are challenging for the right reasons.
Inherent complexity (due to difficult real-world constraints) is fine. Accidental complexity, like that caused by overcomplicated tools or architectural decisions, just feels bad.
I used to have that attitude, but after trying the latest version of ReactJS I think its pretty nifty for what its intention is.
An horrible web experience through and through.
Unless you are adapted to live in a darkened cave, that is.
The mouse pointers are a prime example of "just because you can, doesn't mean you should".
These are multiplayer cursors. You're seeing other people using the website
I know I've read many of his posts over the last year because of that mustard yellow background. It's a strong branding choice.
Everyone I called over to do said work said easy peasy, measure wall to wall, divide by 3, done and done.
I tried to explain this centers the bases, but then the fans will be closer to each other than the walls, but they'd either argue or just roll their eyes.
I finally just marked the ceiling myself, and found a person to do the work without asking why or arguing. Ah, perfectly spaced fans at last.
Naively, you move each fan a half foot closer to the wall. This makes the gap 1.5 feet to the wall but now 2 feet between each other. (You might find ways to argue that this looks better visually than the true answer below, and that depends on a lot of perception-altering factors including how low the fan hangs from the ceiling, amount/ratio of space available, the distance from the non-perpendicular walls, and light sources as they might cast shadows with different sized gaps on the ceiling.)
You need to take the total room length and subtract the fan diameters, then divide that by 3. (So, 5 / 3 = 1.667 or 1'8" from wall to blade tip.) Thus, each base should be 2.667 feet from its nearest wall. This makes a gap 1'8" between each blade tip:
20" space, 24" blades, 20" space, 24" blades, 20" space = 108" (9 ft) room length
Bringing this around to the theme of web design, this is akin to space-between, space-around, and space-evenly in justify-content[1] (except there isn't a "space the center of each element evenly" selection, except maybe stretch or nesting everything in another flexbox)
[1] https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-j...
In the meantime, as a fix for others, in uBo add
tonsky.me##.pointers
BTW: the movement of the small cursors is streamed live from the server, I think it represents the current mouse position from other readers.