Ask HN: Why are images used to indent comments?

[omail]

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]

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]

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]

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]

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]

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]

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]

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]

Because it works.

[nickfox]

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]

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]

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.

[deno]

In the world without Internet Explorer all you need is CSS3 column-count: N; property.

Still, using tables for any kind of formatting looks just plain bad. If you're lazy there are CSS frameworks.

[tdavis]

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

[noodle]

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]

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]

Why in the world would you use definition lists?

[omail]

Oops. Too late to edit it now.

[TweedHeads]

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]

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]

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]

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