Hacker News Reader

Here's the fundamental problem with separating styling from content: styling is content.

Layout matters. Layout carries semantics. Right here on HN is an example, where the comment reply chain is indicated with indentation. The meaning of a comment such as "I disagree" varies depending on what it is replying to and therefore where it is in the layout.

Other examples where layout is content: Captions for photos. An online store where each price describes the cost of whatever item it is next to. Sports box scores and other statistical presentations. Interviews in question-and-answer format where the layout indicates who is speaking.

That's why we've gotten our layout engines so mixed up with our content and markup, because layout is content. How would one devise an abstraction for layout for all of these? You would need to express the semantic relationships within the data, like "comment-replied-to" and "photo-with-caption" and so on. That sounds tantamount to a full implication of natural language processing.

Ugh, no. Layout is one way to express those relationships, but those relationships already exist in the HTML. This is important because different layouts can express the same relationship. I can put a caption below, above, beside, or over a photo and have viewers understand what is meant but which option is appropriate can depend on a number of factors that have nothing to do with the actual content or relationship being expressed. Blind people read the Web too. Having multiple layouts for different kinds and sizes of device is super useful. Being able to attach a caption to photo in HTML and express the exact spatial relationship later through CSS is much more versatile than hard baking layout into the document.

" You would need to express the semantic relationships within the data, like "comment-replied-to" and "photo-with-caption" and so on. That sounds tantamount to a full implication of natural language processing."

No you wouldn't and no it is not. It's dead simple:

    <figure>
        <img src='image.jpg' alt='missing' />
        <figcaption>Caption goes here</figcaption>
    </figure>

Sure, it's dead simple for one particular semantic case already with its own specific definition in HTML. But you cherry-picked that from my examples. HTML doesn't express semantics for comment-replies or sports scores or so on. It has a generic notion of a hierarchical tree, to which CSS can apply layout (like indentation for HN comments), but that's not quite the same thing. Nothing in the HTML-CSS stack expresses general-purpose semantic relationships and we tend to make an inner-system-effect mess of it when we try.

I'm going to cherry-pick your examples again and point out that sports scores actually an ideal use case for actual tables because they are generally actual tabular data. But frankly I just disagree when you say that a hierarchical tree isn't a mechanism for expressing general-purpose semantic relationships, when it's at least as good as spatial positioning on a page. In fact, I can use classes with semantic names which make my meaning perfectly clear to anyone reading the source. It might be invisible with a bad or default stylesheet, but that's a relatively easily resolved problem.

> Right here on HN is an example, where the comment reply chain is indicated with indentation.

    <div class=comment>
      <span class=user>T-hawk</span>
      Right here on HN is an example, where the comment reply chain is indicated with indentation.
      <div class=replies>
        <div class=comment>
          <span class=user>random28345</span>
          HTML is a tree of element nodes, the identity of the post being replied to can be determined by 
          the position of element in the tree 
          <div class=replies />
        </div>  
      </div>  
    </div>

----------------------

    .replies {
      margin-left: 2em;
    }

Exactly what I thought. The CSS make a visual indentation, but carries no more semantic than the data structure does already.

In fact, if it did, I would consider the HTML broken.

    <div class=comment.level1>
    ...
    </div>
    <div class=comment.level2>
    ...
    </div

> You would need to express the semantic relationships within the data, like "comment-replied-to"

Like https://indieweb.org/in-reply-to ?

Good points, and I definitely don't have an answer re: best layout engine. But my critique wasn't aiming that high and was merely about placing CSS syntax outside markup.

CSS design genesis seems to be "ok we have this and that HTML presentation attribute; let's put it in an entirely new item-value format and separate HTML attributes/CSS properties syntactically".

From this arbitrary decision in language design the idea developed that markup attributes are part of the "semantic" content of a document, and not for styling, when, to the contrary, markup attributes were specifically designed for styling and other properties.

As a consequence, CSS has numerous redundancies, asymmetries, and absurdities such as CSS shapes, SVG properties you can style with CSS, the "content:" property, dogmatic and implementation-driven limitations for using presentational attributes on elements, etc.

"Can you suggest a mainstream layout system that offers this feature in a better manner"

I've done better looking/performing layouts 20 years ago with plain HTML 3.2. CSS is a mess.

Can you provide an example by chance?

Not since Geocities went under. The torrent backup available from the SoHo section doesn't have my account.

Well, that's a bummer. I was hoping for a good example of nicely built websites with the older technologies. All my examples have disappeared into the ether as well.