Ask HN: Why are images used to indent comments?

14 points by omail 16 years ago | 21 comments

Why are images used to indent comments? Why not use lists to create the tree structure? Wouldn't lists make it easier, for those using screenreaders, to understand the conversation structure?

Pic: http://tinypic.com/r/6i9ml3/3

bouncingsoul 16 years ago |

I'd guess it's simply that PG codes html the way he learned years ago.

Not snark – you have to justify throwing out your table + spacer.gif knowledge to learn how to do things with div + css. Maybe he doesn't see a huge benefit.

Also (http://www.paulgraham.com/arc0.html):

Arc embodies a similarly unPC attitude to HTML. The predefined libraries just do everything with tables. Why? Because Arc is tuned for exploratory programming, and the W3C-approved way of doing things represents the opposite spirit.

...

Tables are the lists of html. The W3C doesn't like you to use tables to do more than display tabular data because then it's unclear what a table cell means. But this sort of ambiguity is not always an error. It might be an accurate reflection of the programmer's state of mind. In exploratory programming, the programmer is by definition unsure what the program represents.

jkkramer 16 years ago | |

If your exploratory programming involves JavaScript/Ajax, tables can be a pain in the butt to deal with. Semantic HTML makes manipulating the DOM much simpler -- no need to dodge around meaningless markup junk.

noodle 16 years ago | |

i don't think there's anything inherently "wrong" with using tables. there's just a better way to do it. if you don't want to do it the better way, thats cool. it might negatively impact you (higher bandwidth costs, slower load time, etc.), but it probably won't.

yannis 16 years ago |

I guess if it ain't broken don't fix it.

All the threads live in nice tables and gifs are the appropriate technology to accompany them! Enough to give any CSS or SEO evangelist apoplyxia!

TallGuyShort 16 years ago |

I think one of the main reasons some web design techniques are "bad" are because they don't sufficiently separate layout and design from content. The problem is - on a site like HN, you're primarily catering to a crowd that just wants a really simple, straightforward design that's easy to use to fast. We get that with a 1-pixel image. Adding css could potentially throw more complexity into the mix.

deno 16 years ago | |

Proper semantic with CSS styling is faster. You don't have to repeat <font/> tags etc.

CSS is more "complex" only if you lack understanding how it works. Main reason that Ruby on Rails was (is?) such a success is that proper MVC (MTV) design pattern implementation made things simpler.

Yet, for average PHP programmer that'd be more "complex". Same with (X)HTML + CSS. It looks more complex only if you don't understand CSS or using WYSIWYG tools.

imok20 16 years ago |

I've got to say, the markup for the comments page is pretty ugly. I'm not going to diss the one who designed it, but I think it could really do with an overhaul. It wouldn't be difficult at all - just cascading, nested divs with incrementally increasing left-padding.

Unless there is a reason for the tables, they're not semantic, it's ugly, and it doesn't make any sense! And it's slower to render.

nathanb 16 years ago |

Because it works.

nickfox 16 years ago |

I assume they are using single pixel gifs and playing with the width to indent. That is old school, the way it was done before css. Maybe they just never quit. I still prefer to use tables to structure some types of content, it won't win me any awards from the css crowd but it's just easier. Why make life difficult?

warfangle 16 years ago | |

Because rendering a table is almost always slower. Granted, this is an old benchmark (don't have time to pull up any that are more recent), but: http://www.howtocreate.co.uk/browserSpeed.html

blakeperdue 16 years ago | | |

Sometimes a small rendering performance hit is worth avoiding the development headache of getting multi-column divs to display properly across browsers.

Tables can still be useful when holding short content that has lots of columns.

tdavis 16 years ago |

Because the code that generates HN pages was written in the laziest and least-accessible way possible.

noodle 16 years ago |

if i had to guess, i'd say that its just less resource intensive or easeier. much easier to just print it out with an indention instead of parsing results into a tree and then printing.

omail 16 years ago | |

It seems to calculate the image's width to construct indentation. I think it would be easier to just enclose the comments with <dt></dt> and the child trees with <dd></dd>.

deno 16 years ago | | |

Why in the world would you use definition lists?

TweedHeads 16 years ago |

Lack of CSS understanding. No excuse.

Once you know your tools you can do wonders you'll be amazed at how easy it was.

I bet a hundred CSS experts here can give you some interesting ways on redesigning comments.

Show us your best.

TweedHeads 16 years ago | |

Oh gawd, I've never taken a peek under the hood of HN but all these font tags almost made me slash my wrists in despair.

Time to run a "Redesign HN in HTML5" contest,

Reward: a standing ovation, and an iPhone.

TweedHeads 16 years ago | |

Here is what I'd do, start from here:

  <div class="comment level0">
    <a class="up"></a> 
    <a class="dn off"></a>
    <h1>title</h1>
    <p class="minus2">comment here</p>
  </div>

Then apply styles at will, increase padding per level and dimming per negative karma.

I bet code size decreases while readability increases.

zepolen 16 years ago | | |

No need to use class 'levels', as nested <li>'s shows in regards to padding.