4 ms·

Here's the fundamental problem with separating styling from content: styling is content. Layout matters. Layout carries semantics. Right here on HN is an exa

by T-hawk 10y ago

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.

random28345 10y ago
> 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; }
- algesten 10y ago
  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
astine 10y ago
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>
- T-hawk 10y ago
  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.
  - astine 10y ago
    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.
tommorris 10y ago
> You would need to express the semantic relationships within the data, like "comment-replied-to" Like https://indieweb.org/in-reply-to https://indieweb.org/in-reply-to ?

by T-hawk 10y ago

random28345 10y ago

> 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; }

algesten 10y ago
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

astine 10y ago

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>

T-hawk 10y ago
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.
- astine 10y ago
  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.

tommorris 10y ago

> You would need to express the semantic relationships within the data, like "comment-replied-to" Like https://indieweb.org/in-reply-to https://indieweb.org/in-reply-to ?