48 ms·

Nice article, the comments here are kind of amazing for a nominally technical audience. It is almost as if people have no idea how difficult automatic page layo

Nice article, the comments here are kind of amazing for a nominally technical audience. It is almost as if people have no idea how difficult automatic page layout and formatting is. There are literally PhD thesis topics on it[1]. And to expect that complexity to be abstracted away into some sort of simple "do-what-I-mean" expression? That just isn't going to happen. Go look at Gwern Branwen's web site[2]. That is art. But the trick is decide how you want the site to look and then constraining your written material to be expressible in that style. I've been looking at web page layout since 1995 when I joined a startup that was doing the "first magazine on the web about Golf!"[3] When the Zen Garden folks did their web site and started the 'A List Apart' mailing list which is now a website[4] it really helped me understand just what one was up against if you wanted to produce web content that rendered nicely on a wide variety of projections. And yes, the term projection is intentional because the function of going from semantic content to presentation on a screen or paper or other flat surface of finite size, is a mapping (or projection) from a native space into the rule set of the destination space. That rule set consists of both physical constraints (pixels per inch, total pixels horizonally and vertically, color capability) and software constraints (how much of the underlying capability can the browser software that is currently running express). Not to mention that every browser wants to do their own special thing. So yes, CSS is a "hot mess" for people who decide one day "I'm going to build a web page from scratch." And yet, that mess is really just an abundance of choices rather than constraints on what you can do. The process is the same for everyone, find the tools that help you achieve the results you want and then package your material into a form that you can easily convert that into that look. [1] https://scholar.google.com/scholar?hl=en&as_sdt=0%2C5&q=thesis+dynamic+page+layout&btnG= https://scholar.google.com/scholar?hl=en&as_sdt=0%2C5&q=thes... [2] https://gwern.net/ https://gwern.net/ [3] It was called Golfweb and eventually ended up being part of CBS Sports apparently (golfweb.com sends you there) [4] https://www.alistapart.com https://www.alistapart.com

robmccoll 3y ago
I recently spent a few days hacking flow-based layouts and pages into a flex-box-based layout system, and I can confirm that layout and formatting is hard. Figuring out how and when to shift elements to the next page, especially when you have a table with columns containing text and objects of different sizes, is a challenging exercise in picking good heuristics.
taeric 3y ago
The problem with css is almost entirely self inflicted, though. Yes, layout is hard. Why make it harder by aiming for the model we now have? Specifically, why aim for one major model that will fit all pages? Usually done with another sysipheon aim of automatic layout recalculated every page. Combine this with the amusing goal of targeting any and every size of window. Why would anyone think that is doable?
- danShumway 3y ago
  Why don't we have completely separate styling systems for mobile devices, widescreen devices, vertical monitors, tablets, and billboard displays? Because that would be a bigger nightmare to deal with than CSS. I like that when I visit a web page on my mobile phone, it loads regardless of whether or not the site owners hired someone to build a completely separate interface. And I like that when I design interfaces for phones and for large screens, I don't need to learn 2 languages to do it. And I like that when I stack two browser windows next to each other on a 1920x1080 monitor they resize and I can read both of them. When people say that they don't want to worry about multiple screen sizes in their layout, they mean that they want an interface that works on one screen size and ignores everything else. And that would be a huge loss for accessibility and innovation if the web pushed developers in that direction. The reason it would be simpler for people to work with a more targeted language is because they wouldn't build the other interfaces at all. They'd learn one language, target one device that their most predominant customers used, and then we'd have a mobile Internet and a desktop Internet and they'd be separate things with no expectations that sites would work on both devices. ---- And I think this sort of gets to the complaints about complexity in general, because the complexity of this UI design is reflecting a reality that good interfaces are adaptable and people have multi-faceted needs from their software. Even on desktop, people use different screen resolutions, they scale fonts, they mess with layout. And there's this subtle idea behind complaints about complexity that when you dig into it is not actually "why do I have to target so many devices" but is really "why do people use so many devices? Why isn't the world more uniform, why on earth are people changing their screen resolutions, what's wrong with them? Why can't they just decide on a device and stick with it?" But good UX design is about designing for the real world, not for a hypothetical standardized human, and in the same way that cars need adjustable seats and can't just say "well on average everyone is this height and width", good UX acknowledges and responds to the idea that software and content are delivered in multiple contexts. Of course that's a balancing act, it does make interface design more complicated, and it's not something we can do perfectly. But it is a balancing act, it's not a problem we can solve by saying "heck it, everyone needs to stop buying HDPI laptops." I mean, we're not all Linux developers, we can't all just pretend that touchscreens don't exist ;) The same exact complaints show up with the extensible web and with progressive fallbacks in general. It is real annoying to build software that degrades nicely depending on what hardware support someone has and what features they've turned on and off in their browser. But it's also a better way to build software that better reflects how software is used in the real world by real people.
jbs789 3y ago
[flagged]
chrisweekly 3y ago
Hi Chuck, Great points. FWIW, your tenure with web layout has me beat by about 3 years (1998). In all my relevant experience, the materials at "Every Layout"[1] remain unparallelled. Highly recommended. [1] https://every-layout.dev/rudiments/boxes/ https://every-layout.dev/rudiments/boxes/
- ChuckMcM 3y ago
  I don't know I spent a year using "Hotdog" and another three using "FrontPage" so those really don't count as years spent "getting better" :-)
  - chrisweekly 3y ago
    Haha, I remember being really, really excited about ditching FrontPage for DreamWeaver.
    - Implicated 3y ago
      Dreamweaver and Fireworks, oh my.
  - seabearDEV 3y ago
    Finally, someone else on the internet that remembers using Hotdog! Good old Sausage Software… Thanks for the nostalgia hit.
  - Brajeshwar 3y ago
    Huh! Yes, yes, Hotdog[1] was what got me started with HTML. It came in a CD with a magazine that was about a month late to a town with no Internet in mid 90s. 1. https://en.wikipedia.org/wiki/HotDog https://en.wikipedia.org/wiki/HotDog
ijhuygft776 3y ago
> Nice article, the comments here are kind of amazing for a nominally technical audience. It is almost as if people have no idea how difficult automatic page layout and formatting is. It's nuts that this is true after so many years of HTML and CSS.... software sucks any way you look at it. Why we still can't get a bug-free OS is beyond me.
marzetti 3y ago
Noting your comment, I couldn't resist linking to some more CSS art: https://css-art.com/the-girl-with-a-p-e-a-r-l-css-earring/ https://css-art.com/the-girl-with-a-p-e-a-r-l-css-earring/ Not sure how many centred divs are in it though...
- ChuckMcM 3y ago
  Thanks for that link, that is a pretty amazing demo site!
- ChrisMarshallNY 3y ago
  I always found Stuart Nicholl’s CSSPlay site fun. It’s been through a lot of changes, over the years: http://www.cssplay.co.uk/ http://www.cssplay.co.uk/ Some of the demos are jaw-dropping, if not always practical.
wruza 3y ago
How to make sure it’s not self-imposed problem and not in-there research? In my experience, I never thought “layout hard” before joining web dev. And yes, we had scrollable resizeable windows back then. I hear that the status quo is the best way from everywhere. But then I remember my custom appkit, gtk controls and even my own (unreleased) lua-based toolkit, where centering content or wrapping and aligning elements wasn’t an effing deal, and wonder what am I missing. And yet, that mess is really just an abundance of choices rather than constraints on what you can do Also known as TMTOWTDI, long forgotten and buried for good.
troupo 3y ago
What you wrote at the beginning is: "It is almost as if people have no idea how difficult automatic page layout and formatting is." However, the rest of your text is: "look how difficult it is on the web, and look at all these amazing things people do despite this being so difficult on the web". All the complexity on the web is 100% self-inflicted. It started as a simple system to display a couple of paragraphs of text accompanied by a couple of images in one rendering pass. That's it. And then it grew haphazardly, with no roadmap or plan, through a series of hacks bolted on top to give it more capabilities. We could do the "near-impossible PhD-level stuff" in 1970s [1]. The Mother of All Demos from 1968 arguably had more capabilities than the web even today: https://www.youtube.com/watch?v=yJDv-zdhzMY https://www.youtube.com/watch?v=yJDv-zdhzMY For some reason you took "it's difficult to do on the web" as an inviolable axiom of "it's difficult to do, period". The entirety of "impossible layout on the web" is about as complex as what WordStar could handle in mid-1990s [1] This screenshot is from 1981: http://www.catb.org/~esr/writings/taouu/html/graphics/starscreen.jpg http://www.catb.org/~esr/writings/taouu/html/graphics/starsc... (from http://www.catb.org/~esr/writings/taouu/html/ch02s05.html http://www.catb.org/~esr/writings/taouu/html/ch02s05.html)

robmccoll 3y ago

I recently spent a few days hacking flow-based layouts and pages into a flex-box-based layout system, and I can confirm that layout and formatting is hard. Figuring out how and when to shift elements to the next page, especially when you have a table with columns containing text and objects of different sizes, is a challenging exercise in picking good heuristics.

taeric 3y ago

The problem with css is almost entirely self inflicted, though. Yes, layout is hard. Why make it harder by aiming for the model we now have? Specifically, why aim for one major model that will fit all pages? Usually done with another sysipheon aim of automatic layout recalculated every page. Combine this with the amusing goal of targeting any and every size of window. Why would anyone think that is doable?

danShumway 3y ago
Why don't we have completely separate styling systems for mobile devices, widescreen devices, vertical monitors, tablets, and billboard displays? Because that would be a bigger nightmare to deal with than CSS. I like that when I visit a web page on my mobile phone, it loads regardless of whether or not the site owners hired someone to build a completely separate interface. And I like that when I design interfaces for phones and for large screens, I don't need to learn 2 languages to do it. And I like that when I stack two browser windows next to each other on a 1920x1080 monitor they resize and I can read both of them. When people say that they don't want to worry about multiple screen sizes in their layout, they mean that they want an interface that works on one screen size and ignores everything else. And that would be a huge loss for accessibility and innovation if the web pushed developers in that direction. The reason it would be simpler for people to work with a more targeted language is because they wouldn't build the other interfaces at all. They'd learn one language, target one device that their most predominant customers used, and then we'd have a mobile Internet and a desktop Internet and they'd be separate things with no expectations that sites would work on both devices. ---- And I think this sort of gets to the complaints about complexity in general, because the complexity of this UI design is reflecting a reality that good interfaces are adaptable and people have multi-faceted needs from their software. Even on desktop, people use different screen resolutions, they scale fonts, they mess with layout. And there's this subtle idea behind complaints about complexity that when you dig into it is not actually "why do I have to target so many devices" but is really "why do people use so many devices? Why isn't the world more uniform, why on earth are people changing their screen resolutions, what's wrong with them? Why can't they just decide on a device and stick with it?" But good UX design is about designing for the real world, not for a hypothetical standardized human, and in the same way that cars need adjustable seats and can't just say "well on average everyone is this height and width", good UX acknowledges and responds to the idea that software and content are delivered in multiple contexts. Of course that's a balancing act, it does make interface design more complicated, and it's not something we can do perfectly. But it is a balancing act, it's not a problem we can solve by saying "heck it, everyone needs to stop buying HDPI laptops." I mean, we're not all Linux developers, we can't all just pretend that touchscreens don't exist ;) The same exact complaints show up with the extensible web and with progressive fallbacks in general. It is real annoying to build software that degrades nicely depending on what hardware support someone has and what features they've turned on and off in their browser. But it's also a better way to build software that better reflects how software is used in the real world by real people.

jbs789 3y ago

[flagged]

chrisweekly 3y ago

Hi Chuck, Great points. FWIW, your tenure with web layout has me beat by about 3 years (1998). In all my relevant experience, the materials at "Every Layout"[1] remain unparallelled. Highly recommended. [1] https://every-layout.dev/rudiments/boxes/ https://every-layout.dev/rudiments/boxes/

ChuckMcM 3y ago
I don't know I spent a year using "Hotdog" and another three using "FrontPage" so those really don't count as years spent "getting better" :-)
- chrisweekly 3y ago
  Haha, I remember being really, really excited about ditching FrontPage for DreamWeaver.
  - Implicated 3y ago
    Dreamweaver and Fireworks, oh my.
- seabearDEV 3y ago
  Finally, someone else on the internet that remembers using Hotdog! Good old Sausage Software… Thanks for the nostalgia hit.
- Brajeshwar 3y ago
  Huh! Yes, yes, Hotdog[1] was what got me started with HTML. It came in a CD with a magazine that was about a month late to a town with no Internet in mid 90s. 1. https://en.wikipedia.org/wiki/HotDog https://en.wikipedia.org/wiki/HotDog

ijhuygft776 3y ago

> Nice article, the comments here are kind of amazing for a nominally technical audience. It is almost as if people have no idea how difficult automatic page layout and formatting is. It's nuts that this is true after so many years of HTML and CSS.... software sucks any way you look at it. Why we still can't get a bug-free OS is beyond me.

marzetti 3y ago

Noting your comment, I couldn't resist linking to some more CSS art: https://css-art.com/the-girl-with-a-p-e-a-r-l-css-earring/ https://css-art.com/the-girl-with-a-p-e-a-r-l-css-earring/ Not sure how many centred divs are in it though...

ChuckMcM 3y ago
Thanks for that link, that is a pretty amazing demo site!
ChrisMarshallNY 3y ago
I always found Stuart Nicholl’s CSSPlay site fun. It’s been through a lot of changes, over the years: http://www.cssplay.co.uk/ http://www.cssplay.co.uk/ Some of the demos are jaw-dropping, if not always practical.

wruza 3y ago

How to make sure it’s not self-imposed problem and not in-there research? In my experience, I never thought “layout hard” before joining web dev. And yes, we had scrollable resizeable windows back then. I hear that the status quo is the best way from everywhere. But then I remember my custom appkit, gtk controls and even my own (unreleased) lua-based toolkit, where centering content or wrapping and aligning elements wasn’t an effing deal, and wonder what am I missing. And yet, that mess is really just an abundance of choices rather than constraints on what you can do Also known as TMTOWTDI, long forgotten and buried for good.

troupo 3y ago

What you wrote at the beginning is: "It is almost as if people have no idea how difficult automatic page layout and formatting is." However, the rest of your text is: "look how difficult it is on the web, and look at all these amazing things people do despite this being so difficult on the web". All the complexity on the web is 100% self-inflicted. It started as a simple system to display a couple of paragraphs of text accompanied by a couple of images in one rendering pass. That's it. And then it grew haphazardly, with no roadmap or plan, through a series of hacks bolted on top to give it more capabilities. We could do the "near-impossible PhD-level stuff" in 1970s [1]. The Mother of All Demos from 1968 arguably had more capabilities than the web even today: https://www.youtube.com/watch?v=yJDv-zdhzMY https://www.youtube.com/watch?v=yJDv-zdhzMY For some reason you took "it's difficult to do on the web" as an inviolable axiom of "it's difficult to do, period". The entirety of "impossible layout on the web" is about as complex as what WordStar could handle in mid-1990s [1] This screenshot is from 1981: http://www.catb.org/~esr/writings/taouu/html/graphics/starscreen.jpg http://www.catb.org/~esr/writings/taouu/html/graphics/starsc... (from http://www.catb.org/~esr/writings/taouu/html/ch02s05.html http://www.catb.org/~esr/writings/taouu/html/ch02s05.html)