from Hacker News

Show HN: I built a Hacker News userscript to make this site more legible

by midenginedcoupe on 12/18/22, 1:29 PM with 51 comments

  * Base font size increased
  * A little more room around headings
  * Top menu bar is full-width and with a little more padding
  * Downvoted comments no longer faint hard-to-read grey. Instead they're rendered with a light gray background and in a smaller font size.
  * Comments have a more readable max line length
  * Quotes are parsed and transformed to look like genuine quotes. I.e. any p or span that starts with '>' is transformed and rendered with a light orange background and in italics.
  * The 'Add comment' box on items is hidden by default. (Surely you'd want to read all the comments first before leaping in with your own 2p's worth!?)

• by livre on 12/18/22, 5:42 PM

  Try to not recommend Tampermonkey, it is closed source, slow, bloated and a bit sketchy, uses Google Analytics and right now the privacy policy link in their website isn't working for me (redirects to the home page). There are better, faster, less bloated and open source alternatives, like Violentmonkey which now has a reasonable privacy policy (https://violentmonkey.github.io/privacy/).

  Btw thanks for the script, the alternating colours between comments and replies should be part of the standard hacker news experience, thanks for adding that.

• by tutfbhuf on 12/18/22, 7:01 PM

  I think someone should tell dang that the HN news font is too small. If hundred of people on HN complain about the small font size (including me), then the font size should be increased IMHO.

• by crtasm on 12/18/22, 5:40 PM

  Looks good, might you consider crossposting it on https://greasyfork.org/ ?

  I suggest Violentmonkey (open source) over Tampermonkey (proprietary).

• by jibbers on 12/19/22, 2:07 AM

  I just made my own CSS for this site, too! I'm most proud of replacing those upvote arrow images with a Unicode glyph.

  .votearrow { background: none; } .votearrow:after { content: "\25B2"; position: relative; display: block; line-height: 0.9; color: rgb(154, 154, 154); font-size: 12px; }

  https://github.com/dillonjohnbrown/user-styles/blob/main/hac...

• by jccalhoun on 12/18/22, 5:40 PM

  Nice. I use https://github.com/plibither8/refined-hacker-news

• by allarm on 12/18/22, 6:15 PM

  Nice, thank you.

  > downvoted comments no longer light gray text and hard to read

  I don’t understand the reasoning behind this design decision. There’s often long comments threads starting from a downvoted comment and it’s super difficult for me to read it.

• by Emigre_ on 12/18/22, 5:49 PM

  The background of the center section of Hacker News is #F6F6EF. The colour of the main text of a post is #828282, which results on a contrast ratio of 4:1 (calculated here [1]).

  This is below the minimum required level to conform to the Contrast and Color Accessibility requirements of the WCAG... a pity! See [2]. The minimum contrast is recommended to be 4.5:1.

  The comments (below the main post text) text colour is black (#000000) and that has good contrast - it reaches level AAA in the WCAG guidelines, which is the best rating. Unfortunately as mentioned by OP downvotes faint the colour of the text!...

  [1] https://www.accessibilitychecker.org/color-contrast-checker/

  [2] https://webaim.org/articles/contrast/

• by mrj on 12/18/22, 6:23 PM

  This is cool, thanks for this! I have added

        @media (min-width: 768px) {
          body {
            padding: 0 40px;
          }
        }
  

  because it felt crowded on a desktop screen. I do feel like removing the :visited color difference is a usability negative.

  Also the 'add comment' input isn't a button so it doesn't get a normal pointer:

        input[type='submit'] {
          cursor: pointer;
        }
  

  HN's table layout makes it tough to do normal things you'd expect on a site like this.. kinda surprising to see a no-kidding table layout these days. It brings back bad memories. Thanks for posting.

• by giuliomagnifico on 12/18/22, 3:00 PM

  Niice thanks, I only changed the font to "San Francisco" (Apple user) and 0.9rem in comment. Maybe on desktop the layout needs to be centered (like the original).

• by hamburglar on 12/18/22, 9:16 PM

  My main problem with HN is that when reading it on an iPhone, the font size control seems to be completely ineffective because when I make the font size larger, the layout changes and the browser zooms out to view the whole thing. So I just end up having to zoom in and pan incessantly, which is a much worse experience than just going and finding my laptop.

• by bastawhiz on 12/18/22, 10:41 PM

  I have arguably thick sausage fingers, and I routinely accidentally flag or hide posts when trying to visit a link on my phone. It's easy to accidentally do this and hard to undo. I would love it if this site would make destructive actions slightly harder to accidentally perform, or at least make it a setting.

• by Beltalowda on 12/18/22, 6:04 PM

  I have the following in Stylus:

    body      { margin: 0; color: #000; background-color: #eee; }
    #hnmain   { background-color: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .2) } /* Better colours */
    .itemlist { padding-left: .5em; }
    td        { color: inherit; }
    .togg     { float: left; margin-right: .5em; } /* Collapse button to the left */
    .comment  { line-height: 1.4em; }              /* Bit more line-height */
  

  The thing I miss the most is the ability to clearly cite/quote things, whether it's other posts or something from an article. Yes, you can use ">", maybe wrapped in italics, but I find it pretty unclear, especially for longer texts. You can have some user CSS or whatnot to clarify that, but that won't work for the majority of folks reading your post.

• by Obscurity4340 on 12/19/22, 6:12 AM

  Not sure if this is appropos but I gave up on using the website in a browser. Interested to hear everyone's take on this but I've found the HACK app to be the most visually and functionally appealing, particularly in making the experience more similar to using Reddit through an app like Apollo.

  Its cool that people are putting together their own solutions but there are options that have invented the wheel in a pleasing format already and might facillitate discovery and ease of use in a way that might not be as comprehensive.

• by cowsup on 12/18/22, 5:31 PM

  Very impressive and very clean. I’ve set up many user scripts for websites I browse for all of my devices. User scripts are indispensable to me.

  Two quirks:

  1. In Safari on my iPad, “add comment” is invisible, since it still uses the white font from vanilla HN. I’ve fixed this by adding “color: #333;” just below your existing “background-color: white;”

  2. There seems to be no way to indicate if I have already read a post. In vanilla HN, read posts are slightly more faint. This script breaks that by overriding all links, including a:visited.

  Otherwise a nice set of great QoL changes.

• by guiambros on 12/18/22, 4:23 PM

  Nice additions. I like in particular the removal of the indexes, and how quotes look better.

  Just a heads that if you use a dark theme (e.g. [1]), then it makes a whole mess, with illegible colors, parts in white background and so on. Not a surprise, given both are fighting to manipulate the DOM.

  [1] https://github.com/TheLastAirsickLowlander/DarkHacker

• by casmike on 12/28/22, 5:11 PM

  I customized your script for myself and thought I'd share it - https://github.com/Meekelis/Hacker-News-Readability-Tweaks.

  I included a link to your original repository in my README.md as it would have taken some effort to fork just one directory properly. Thanks for the script.

• by lapcat on 12/18/22, 5:38 PM

  I take a minimalistic approach, which is not perfect, but good enough for me, and gets my preferred font size and dark mode support. CSS:

  :root { color-scheme: light dark; }

  * { background-color: revert !important; color: revert !important; font-size: revert !important; }

  center { text-align: left !important; }

  table#hnmain { width: 100% !important; }

• by stefanvdw1 on 12/18/22, 5:41 PM

  Nice!

  Felt the same way but took it a step further and designed a whole new front-end[0] so that it was easier to use on modern large format screens (and added some things like dark mode).

  0. https://modernorange.io

• by justsomehnguy on 12/18/22, 7:12 PM

  That's what the zoom for.

  I have HN set to 130% and it's fine.

  Please, stop messing with the font size, every time I see 1/3 of my FullHD monitor set with 28pt+ text (and barren wastelands on other 2/3) I really want to slap someone over TCP/IP.

• by rrgok on 12/18/22, 5:56 PM

  I wish this had max-width: 60ch (or at least 80ch). I have some difficulties in reading and keeping my attention past 60-80ch line width wall of texts. Sometime I manually edit the CSS to make line shorter, so that I can keep reading.

• by cbeach on 12/20/22, 12:01 AM

  My biggest bugbear is the size of the upvote/downvote buttons. They’re tiny, hard to touch accurately and vanish when clicked, giving useless feedback.

• by fourmajor on 12/19/22, 3:38 PM

  I love the Modern for Hacker News extension: https://www.modernhn.com/

• by zzo38computer on 12/18/22, 8:16 PM

  I use a CSS code which makes downvoted comments to be displayed the same as any other comments, and adding vertical lines to the left of indented items.

• by sogen on 12/18/22, 8:09 PM

  Can this script be automatically updated using a remote host?

• by petodo on 12/18/22, 4:03 PM

  nice work, I wouldn't mind if this was HN redesign (especially like uncensored comments section), though it still doesn't fix obvious issue with useless HN homepage which is brigaded/manipulated, so one has to resort to alternative sites like Serializer or BestHackerNews to read HN posts