HN Explorer

Ask HN: Hacker News comment tree indentation on text-based web browsers?

61 points by asdff ↗ HN
I noticed on every text-based web browser I’ve tried (lynx, links, w3m), hackernews comment threads do not maintain the correct indentation in the comment tree, collapsing all parent and children into a single list. Are there perhaps any easy fixes or workarounds, such as another text-based browser to try, or some other way to parse comment threads that maintains the correct indentation?

57 comments

[ 5.7 ms ] story [ 155 ms ] thread
Kinnard
You should also post on the arc forum which shares code with HN: http://arclang.com/forum

They're both written in arc by pg: http://www.arclanguage.org/

krapp
fwiw, the version of the forum forked over there (Anarki) no longer uses the table layout. But that codebase has no direct relationship at all to the one used in HN.
Kinnard
My understanding is that the arc forum doesn't run on anarki, it runs on arc 3.2 pg's last release.
taviso
I don't know the answer to your question, but I see no reason I couldn't add hn support to nntpit, if there was interest.

https://github.com/taviso/nntpit

loulouxiv
That seems to be a good idea, the features offered by the news readers that you mention on nntpit github readme look like a must. I rarely return the a HN thread I already read since I have no way to know what is new or not
akalsz
w3m indents stuff correctly for me, using the version maintained for Debian: http://github.com/tats/w3m
dcassett
I just installed w3m on debian buster stable (sudo apt install w3m) and I see an indent of 2 characters
yewenjie
HN uses a very non standard way to visually represent comment trees — transparent gifs of different widths instead of real treelike data structures. The behavior of text based browsers is understandable.
onion2k
That might be non-standard now but spacer gifs did a lot of the heavy lifting in website layout between about 1995 and 2010.
krapp
The weird thing is, HTML already has (and had, even back then) a much simpler and more straightforward way to represent nested lists, but pg didn't want to use it because he thought W3C recommendations went against the spirit of explorational programming[0]. So the existing layout is the way it is just to be contrarian... which is remarkably on-brand for HN.

[0]http://arclanguage.org/item?id=20788

Blikkentrekker
If the domain not be well understood when one is crafting the markup for a layout as simple as Hacker News's, one simply lacks even the most basic experience.

There is no need to use exploratory programming for such matters; it is a very common and well understood problem for which there are good and bad solutions.

A simple `margin-left: 20px;` in CSS is a good solution; transparent spacing images are ridiculous.

onion2k
one simply lacks even the most basic experience

Considering pg's background I don't think it's that.

Blikkentrekker
Which is why I believe that the domain was quite well understood, and that exploratory programming to generate the markup for this simple website is a mistake.
onion2k
exploratory programming to generate the markup for this simple website is a mistake

You're wrong because you think the goal was to make a website.

Judging by the arclanguage.org post linked earlier, the goal was to test the Arc language as an example of exploratory programming to make a web application, with the measure of success being "as little Arc code as possible". The HTML output was intentionally 'bad' from a web development perspective, but 'good' from an Arc perspective. Consequently if you judge it purely in terms of web development it does look pretty awful, but that isn't the context it was written in so that's not a fair way to look at it.

krapp
Tables and spacer gifs don't necessarily use less Arc code than a simpler layout would. The table layout might even use a bit more if it requires more iteration, macro expansion and branching to render. There are special case macros in the html library for generating parts of the forum table that wouldn't be necessary otherwise.

Also, the goal clearly was to make a website, because pg made a website, and here we all are. Once you put your MVP online it's valid to criticize decisions made for it in that context.

chc
While that's true, they haven't been commonly used for cases like indenting child comments since the '90s. You'd usually either indent with a table-based grid of some sort or (increasingly common as you got past the '90s) with margin/padding properties. The way Hacker News does it where every comment is a table with a spacer gif in the first column was never a standard practice AFAIK.
stefan_
Tables were the design element de jure, so much so you could export your UI design straight to generated table HTML.
cmiller1
I still remember how to lay out pages with tables. Just another in the long list of programming techs filling my brain that will never get used again like Hypertalk and Actionscript
neom
Yes, in dreamweaver I definitely moved stuff around using either gifs or transparent tables.
GekkePrutser
At least that was a lot better than using   which most FrontPage users did. I cleaned up so much in that time :D
[deleted]
(comment deleted)
abhisuri97
Me: There's no way that's true

looks in inspect element

Me: I stand corrected

tyingq
Never meet your heroes.
dunham
Yeah, TIL. I've looked at the DOM before, but I saw multiple layers of tables and just assumed it was tables all the way down.
eyelidlessness
Oh my goodness. It’s worse than you probably think. I built a HN dark mode web extension (you can grab it on my GH under the same handle if you want) because it’s been asked for so many times... And the weird hacks I had to do (even basing it off of dang’s invitation to solve it with HN’s base stylesheet) were so unusual that I didn’t feel comfortable promoting it here or anywhere.

There’s not just weird 90s style table layout/spacer gifs, there’s also just random font tags and inline color attributes for important (eg branding) elements. Every downvote greying is inline color attributes.

I’d originally planned on a companion stylesheet for Algolia search and it was so different I just bailed.

Edit: honestly given the forum, I wish they’d open source some portion of HN to allow improvement. I really want a better mobile view, which is easily achievable with CSS without using the API and hosting another domain. If there’s so little interest in UX improvement effort this is something we could pick up the slack on.

eyelidlessness
I’m adding to specifically say to dang: you put probably horrific effort into maintaining this community and no ill will at all was meant to be directed toward you. I’m only sharing what I saw as a frame of reference for what’s currently in the HTML we consume every day and the challenge of tailoring it to other use cases.
GekkePrutser
I thought the same, no way :) But, it makes a point. If nobody notices any side-effects of a bad design, is it still a bad design?

The text-browser point made by the OP is the first that ran into this however most text browsers don't render the current 'best practice' (using CSS classes with margins) correctly either.

livre
> current 'best practice' (using CSS classes with margins)

If comments are nested unordered lists, why isn't the best practice a bunch of ul and li tags styled with CSS?

greggturkington
> If nobody notices any side-effects of a bad design

Lots of people notice, like OP and anyone using assistive technologies. So by your logic, it is bad design.

Lists should be marked up as lists, tabular data marked up as tables. We ended this debate in...1996?

SirLotsaLocks
Yeah I wonder how this affects assistive technologies.
nerpderp82
Stand horrified! What is wrong with tables?
mintplant
Oh, every comment is a table row. But they're all in the same flat table, not nested.
heterodoxxed
I'd love to hear the justification (no pun intended) for this.
akalsz
That makes sense then, w3m's inline image option was probably disabled for OP and the other two can't inline images at all.
austincheney
It is more old than non standard. At one point this was near universal common practice. It is 90s era visual formatting for HTML before anybody used CSS. Dang has been quite clear that he is unpracticed with CSS.

It wasn't CSS that killed this manner of formatting visual content, circa 2005-2010. It was lawyers as it isn't friendly to accessibility.

Blikkentrekker
> It was lawyers as it isn't friendly to accessibility.

That is the point, and that is why it was changed.

The markup should reflect the structure and meaning of the document, so that accessibility tools and crawlers might better understand it.

Ideally, with all CSS and Javascript turned off, it should look as a plain, white, unintereseting, but otherwise usable website.

mssundaram
Ah, so that's why Firefox reader mode renders it all flat
awefawef
Comment rendering doesn't even work properly on normal browsers. If I go to a comment section with tons of comments and collapse a huge tree, subsequent collapses will immediately scroll the page all the way to the top, annoyingly. (Firefox, this happens on multiple computers)
Dregas
I have a similar issue as well, with Firefox. It used to work just fine until a couple months or so ago.
zxcvbn4038
Have you looked at the hacker news API? There is enough information there to reconstruct a tree and do your own formatting. The only issue I've run into is that after some time changes don't seem to flow to the API any longer so you have discrepancies between the site and the API data - mostly comment orders since the scores don't flow to the API, but updates to text often get dropped.
every
links2 does not indent but links2 -g displays properly...
asdff
I wish I could use links -g. I tried building on OS X with graphics enabled and I'm getting segment fault errors. Other X applications work fine, so I know the troubleshooting is going to be cryptic and take me hours.
linguaz
I use ELinks, and with the following in my ~/.elinks/hooks.pl (& ELinks compiled with perl support), HN comment tree indentation looks fine:

  sub pre_format_html_hook {
    my ($url, $html) = (shift, shift);

    if ($url =~ m|news.ycombinator.com/item\?id=|) {
      $html =~ s|<img src="s.gif" height="1" width="([0-9]{1,3})">|'&nbsp;'x($1/10)|eg;
    }

    return $html;
  }