
Why doesn't HN use responsive units? - terminalcommand
HN works great on mobile, but on desktop it doesn&#x27;t. Every time I open HN on my computer, I either have to make the window smaller to make the text readable or zoom.<p>The problem is that if I zoom, the line-width gets out of hand and it gets hard to read the comment threads.<p>If HN used a responsive unit instead of pt for font sizes, the site would become much more readable.<p>There isn&#x27;t much difference in readability between 1 em and 10 pt in mobile, but there is a huge difference in desktop browsing.<p>To test out my ideas I&#x27;ve hacked together a 10 line custom css to demonstrate the concept.<p><pre><code>  @-moz-document domain(news.ycombinator.com) {
  .comment {
 	  font-size: 1.2em; 
  	  line-height: 2em; &#x2F;* optional *&#x2F;
  }

  .title {
 	  font-size: 1em;
 	  padding: 0.25em 0.1em;
  }

  .subtext {
          font-size: 0.8em;
  }
  }
</code></pre>
I&#x27;ve also created a stylish theme on this CSS, if you want to test it or look at screenshots, you can look at: https:&#x2F;&#x2F;userstyles.org&#x2F;styles&#x2F;160671&#x2F;minimal-hn-readable .<p>I think we need to tweak the HN stylesheet for desktop users. With high-dpi screens becoming more and more present in our lives, the old pt method will cause us problems. And the solution is so simple: we can just switch to em&#x27;s.
======
pwg
> The problem is that if I zoom, the line-width gets out of hand and it gets
> hard to read the comment threads.

One question. On desktop, do you by chance have your browser window maximized?

If so, try an experiment. Demaximize your browser window, make it full screen
height, but about 1/2 (or a bit more) screen width.

Then see if the line length goes out of hand.

If your browser is not maximized, well then this experiment will be of no
benefit.

~~~
terminalcommand
> Demaximize your browser window, make it full screen height, but about 1/2
> (or a bit more) screen width.

This works, the line-width does not get out of hand. It even switches to full
screen view and removes the margins.

If I use a narrower window, there is no problem. But if I use any window
bigger than 1400px, the line-width becomes an issue.

I think the problem may lie in the screen specific CSS of HN, there is no
custom CSS after 1349px max width:

    
    
      @media only screen and (min-width : 300px) and (max-width : 389px) {
        .comment { max-width: 270px; overflow: auto }
        pre { max-width: 200px; }
      }
      @media only screen and (min-width : 390px) and (max-width : 509px) {
        .comment { max-width: 350px; overflow: auto }
        pre { max-width: 260px; }
      }
      @media only screen and (min-width : 510px) and (max-width : 599px) {
        .comment { max-width: 460px; overflow: auto }
        pre { max-width: 340px; }
      }
      @media only screen and (min-width : 600px) and (max-width : 689px) {
        .comment { max-width: 540px; overflow: auto }
        pre { max-width: 400px; }
      }
      @media only screen and (min-width : 690px) and (max-width : 809px) {
        .comment { max-width: 620px; overflow: auto }
        pre { max-width: 460px; }
      }
      @media only screen and (min-width : 810px) and (max-width : 899px) {
        .comment { max-width: 730px; overflow: auto }
        pre { max-width: 540px; }
      }
      @media only screen and (min-width : 900px) and (max-width : 1079px) {
        .comment { max-width: 810px; overflow: auto }
        pre { max-width: 600px; }
      }
      @media only screen and (min-width : 1080px) and (max-width : 1169px) {
        .comment { max-width: 970px; overflow: auto }
        pre { max-width: 720px; }
      }
      @media only screen and (min-width : 1170px) and (max-width : 1259px) {
        .comment { max-width: 1050px; overflow: auto }
        pre { max-width: 780px; }
      }
      @media only screen and (min-width : 1260px) and (max-width : 1349px) {
        .comment { max-width: 1130px; overflow: auto }
        pre { max-width: 840px; }
      }
    

The interesting bit is, that if I try to load HN on responsive view in
developer tools (ctrl+shift+m) and adjust the screen size to 1920x1080, the
site displays without any problems, with bigger fonts and saner defaults.

But if I open HN on a regular tab with the same pixel size, fonts get super
small.

The problem becomes more annoying, if you use a tiling window manager such as
i3. Then you have to open another frame and adjust the size of the window.

Even on regular window managers, it is annoying to have to make the browser
window smaller to browse HN.

------
yesenadam
HN works fine for me..like every other website. I suggest the problem is with
your setup and not with HN.

~~~
terminalcommand
Could you elaborate a bit?

What is your screen resolution? Do you use text scaling?

Do you open your browser in maximized view or do you prefer smaller windows?

------
KhayriRRW
Alternatively, you can also use UserJS to modify the font size and layout of
HN on your browser.

~ Khayri R.R. Woulfe

~~~
terminalcommand
I am doing this right now, but I think we can solve this issue without needing
user styles.

HN looks super sharp and usable on mobile, why not achieve some usability on
desktop as well. All that is required is a simple media query for browser
windows larger than 1400px in width or using responsive units.

