This is excellent. However much effort I've put in I've always found HTML or rather CSS impenetrable. When doing something a little more complex I will often end up with something that works (or breaks) without fully understanding why.<p>Are there any other good references that give a good underlying understanding of HTML/CSS without just giving examples of the various elements?
For those wanting to dive deeper, the layout code in Chromium is surprisingly easy to read considering its a 20+ year old codebase.<p>This is a good starting point:<p><a href="https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/layout/layout_object.h;l=178;drc=bba0186702ff39303c487a012626e5fba8ab42ed;bpv=1;bpt=1" rel="nofollow">https://source.chromium.org/chromium/chromium/src/+/master:t...</a>
This is excellent, but I also recommend the following that describes how <i>text</i> is laid out of the screen:<p><a href="https://raphlinus.github.io/text/2020/10/26/text-layout.html" rel="nofollow">https://raphlinus.github.io/text/2020/10/26/text-layout.html</a>
I wish this web page used a smaller font, 24px (18pt) is really, really large. (HN comments are 9pt.)<p>The page's ToC uses 60% of the body font, which is ~10pt.
> Finally, functional languages tend to fight against large, mutually-linked, mutable data structures, yet the layout engine of a browser is all about that.<p>Is the DOM (and LayoutObject et al.) truly a case where imperative object-oriented programming shines? In pure FP operations like insertion, bidirectional traversal, and moving objects between parents can be cumbersome because there is no implicit identity for the objects.<p>Curious whether this is true, or is there a way to implement a DOM-like API with mostly immutable values?
Random thought: why do we still call them "web pages"? They're not hypertext pages anymore and browsers are not hypertext document browsers anymore.<p>(It should probably be called "VM for UI apps that run directly from URL and written in UI stack that has never been intended for UI apps, and has weird tabbed window manager")
> Elements like <body> and <header> contain blocks stacked vertically. But elements like <p> and <h1> contain text and lay that text out horizontally in lines. ( In European languages, at least! )<p>Another day, another features despite PDF not being perfect, is still miles ahead of HTML. I am not even sure if there are any intention to bring vertical Japanese subtext feature to HTML.