Post

Those PI markers for declaring ranges remind me of how Apache Wave (formerly Google Wave) annotated text for styling (also links and spellchecking). foo <?a "style/fontWeight"="bold" ?>bold <?a "style/fontStyle"="italic" ?>bold-italic <?a "style/fontWeight" ?>italic <?a "style/fontStyle" ?>bar

I was thinking the same thing and I've been pondering various ways of marking up headings with automatic numbering for many years. The ::before techniques are a hack and often don't work with technologies other than web.

Also, in the age of sophisticated codemods and LLMs, who can either do name complex conversions on their own, or write sophisticated codemods, changing names during a design process/phase should be much, much less of a concern than it used to be. Even for extensive example code/implementations.

You said your example causes a layout shift, but if you're streaming in HTML and the browser is laying out the first content would it be possible *not* to cause a layout shift?

you could be putting the new content in a non visible area (eg: that needs to be scrolled to or expanded), or if you can anticipate them you could set fixed heights to parent elements to reserve space on the screen for the new content

As for out of order streaming of HTML... It seems like a good (and perhaps even overdue) primitive. One not reliant on JS that should drive down TTFB and (subject to the implementation) TTI.

That said, a well optimised site can get pretty low already. Be interesting to hear about the challenges that motivate adding this kind of complexity to the web platform.

I vaguely remember a thread in the early stages of HTML5 discussions and WHATWG formation that dealt with comment syntax, e.g. about the SGML rule that allowed `<!-- comment -- no comment -- comment again -->` in theory and how to handle stuff like `<!>`, which I had been using as a Todo marker.

I don’t see how riddling your content with markers to do syntax highlighting would fare any better than the span soup approach. I see more benefit in something like `<script type="highlightmap">` + `<pre highlightedby=highlightmap>` in which the browser would do it all by itself (+ is polyfillable)

It depends what you mean by "riddling your content". If you add a range to the DOM, it's there, as part of your DOM. Sure, the elements panel doesn't show it, but it probably will at some point, for debugging CSS highlights.

A serialized object that represents all range information you prebuild on the server (once, preferably)