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

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

61 pointsasdff54 comments

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?

View on HN

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

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

Use mutt! Now you can read each post as if it was part of an email thread. But first you have to get the comments saved as a maildir email conversations... that’s where my fetchpost[1] tool comes in. Demo: https://asciinema.org/a/593u87rrsa3mevktyekepm4ke

[1] https://github.com/holygeek/fetchpost

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

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.

w3m indents stuff correctly for me, using the version maintained for Debian: http://github.com/tats/w3m

I just installed w3m on debian buster stable (sudo apt install w3m) and I see an indent of 2 characters

You might find https://github.com/donnemartin/haxor-news useful.

Is there no dedicated HN console reader for HN using ncurses? I never looked for one but I'd be surprised considering there's so many mobile apps

There's this: https://github.com/ggerganov/hnterm

Appears to be browse-only though.

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/

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.

My understanding is that the arc forum doesn't run on anarki, it runs on arc 3.2 pg's last release.

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)

I have a similar issue as well, with Firefox. It used to work just fine until a couple months or so ago.

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.

That might be non-standard now but spacer gifs did a lot of the heavy lifting in website layout between about 1995 and 2010.

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

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.

one simply lacks even the most basic experience

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

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.

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.

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.

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.

Tables were the design element de jure, so much so you could export your UI design straight to generated table HTML.

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

Yes, in dreamweaver I definitely moved stuff around using either gifs or transparent tables.

At least that was a lot better than using   which most FrontPage users did. I cleaned up so much in that time :D

A 2021 appeal to bring them back: https://www.joshwcomeau.com/react/modern-spacer-gif/

Me: There's no way that's true

looks in inspect element

Me: I stand corrected

Never meet your heroes.

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.

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.

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.

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.

> 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?

Good point!

> 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?

Yeah I wonder how this affects assistive technologies.

Stand horrified! What is wrong with tables?

Oh, every comment is a table row. But they're all in the same flat table, not nested.

I'd love to hear the justification (no pun intended) for this.

That makes sense then, w3m's inline image option was probably disabled for OP and the other two can't inline images at all.

Verily, I've not felt such disgust since I saw the characters from the Canadian Aboriginal Syllabics block-hack.

the generics in go tricks?

What could possibly go wrong with `interface{}` and reflection?

We have generics; we have the technology: https://i.redd.it/9uoa5ngjnba51.png

Context: https://www.reddit.com/r/rust/comments/5penft/parallelizing_...

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.

> 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.

Ah, so that's why Firefox reader mode renders it all flat

links2 does not indent but links2 -g displays properly...

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.

Reply on news.ycombinator.com