Peter-Paul posted this question:
Which of the examples in the image do you consider correct?
If you know CSS well, don't reply, just retweet.
If you don't know CSS too well, please reply to the poll in the next tweet. pic.twitter.com/4bgnf9Wdkc
— ppk 🇪🇺 (@ppk) June 17, 2019
Note the interesting caveat: only vote in the poll if you don’t know CSS well.
The winning answer was D! You gotta wonder if the result would have been different if the request for non-CSS experts wasn’t there.
I like to think I know CSS OK, so I didn’t vote. My brain goes like this:
- I think he’s asking “by default,” so the answer may assume there’s no other CSS doing anything to that text.
- I wish I knew why the box was that particular width, but I guess I’ll just assume it’s a set
width. - It’s not B because ellipsis stuff requires extra stuff, and doesn’t work on multiple lines like that — unless we’re talking line clamping, which is even weirder.
- It’s not C because that requires hiding overflow which is never really a default — that is, except off the top and left of the browser window, I guess. Or in an iframe.
- It’s not D because words just don’t break like that unless you do pretty specific stuff.
- A actually makes decent sense. It’s weird to look at, but I’ve been dealing with stuff busting out of containers my whole career. C’est la vie.
Remember, we’ve done a deep dive into CSS IS AWESOME before and how it interestingly captures the weirdness of CSS.
I believe it comes from a belief that the box is a page and that text should wrap when it hits a boundary.
As soon as I saw the post I knew the correct response would be ‘A’ because I mean… it’s such a common CSS issue we’ve all dealt with. But when I saw that Peter-Paul was soliciting answers from people w/o CSS experience I knew in my heart of hearts that they would overwhelmingly choose ‘D’.
It’s an interesting experiment…
Users (persons without CSS experience) assume that the box would organize the text in a way that contained the text to its frame. That’s what they expect without understanding that that is not the default.
Makes me wonder… do they expect that because we as designers have taught them that content should be presented in that fashion or because of some other influences that make that display make the most ‘sense’.
And… if that behavior is what the expected default is… why is that not how CSS actually behaves by default?
By default CSS never hides anything. Because if you hide something you might not notice that something is missing. It’s easier to spot overlapping text than text that isn’t overlapping but hidden. It’s easier to spot a box weirdly positioned instead of the box disappearing behind another box. This is a fundamental rule for the people writing specs and implementing CSS.
I don’t think there’s a compelling argument that it should wrap that way. Think about other software that puts text in boxes and wraps it. Word, InDesign, Photoshop, Excel. All of them let you do that, but few of them do it by default. Where they do, you probably usually fixed it…
Because that’s not readable typesetting. It’s not how you’d usually go to production. Breaking in the middle of a word that should stay together is really a naive solution to having more text than room, which is a problem a design needs to solve for, not just hand-wave away the way D tries to.
If you ask why box sizing and word wrapping wasn’t smarter from day 1, your question implies your answer. It’s a complex problem space to automate, especially internationally. There is no one size fits every case answer. The first versions of Word didn’t have orphan control or hanging indents or smart hyphenation, either. And Word, complex as it is, does way less than the web.
The best you can do is put a more direct control in designers’ hands so they can do what’s appropriate in a particular context. That’s what the web has always done and it’s what I hope it will continue to do, no matter how many generations of newbies fail to initially appreciate it.
“A” is the joke… because CSS is hard/incomprehensible to beginners. (or just because stuff breaks like this at times even for veterans.
“B” would only be the default on a phone or tiny browser window. And without any CSS at all.
“A” is demonstrating someone took a box and gave it a width, but screwed up something somewhere. (or the client said “make it so wide and fit too much text in there”)