Why does HN not respect accessibility settings in browser?

https://news.ycombinator.com/item?id=34014378

by jtode • 4 years ago

5 7 4 years ago

news.ycombinator.com

I don't read HN on my phone, because I cannot read HN on my phone - I have font size completely cranked in my browser and phone settings, but this site comes out with like, six point text at best. My vision is bad, there's a system in place to address this, but your web designers apparently don't care about that.

LinuxBender• 4 years ago

Could it be an addon is overriding your font sizes by chance? HN is presented to me in the font and font-size I set in the settings. I am using Firefox on Linux. I will try it on the phone a little later.

I set this in Settings -> General -> Fonts/Zoom and in Advanced Font Settings I uncheck the box that allows sites to set their own settings. Be sure to set the "Minimum Font Size" in advanced font settings.

jtode• 4 years ago

No issue at all on desktop, I can CTRL-scroll on this site like any other, last time I checked, and my monitors are nice and large, so I mostly interact with HN here at my desk.

But I get bored out in public, and as long as I'm paying for this phone, I would prefer to spend that boredom time here rather than watching some silly video. I have books, but I need like ten minutes or there's no point starting to read. The only place I confidently start reading a book is in my doctor's office, and even there, they tricked me last time by calling me into the office right on time. I did not see that move coming at all.

dredmorbius3• 4 years ago

HN specifies 10 and 9 pt fonts posts and comments respectively, which plays very poorly with high-DPI displays. (I think it used to use px, which is even worse as it's tied to the physical dot pitch.) My preference would be "medium", which should default to an reader's specified font preference.

It's highly unreadable for me on a 220 dpi e-ink display unless cranked to 150% magnification. The darker background and lighter text don't help either --- I can and do correct both issues on Desktop via the Stylish CSS manager and a custom stylesheet, see below, but mobile browsers don't have that flexibility. My preferred mobile browser (EinkBro) does have a zoom function, but it's a bit buggy (the indicated value isn't necessarily what's displayed, and must be toggled between values to work properly), and there's no per-site zoom-setting memory, so I've got to bump up zoom for HN, then decrease it again for many other sites.

I've had numerous conversations over many years with dang, who's suggested a per-user default font setting, though that's not yet appeared. Even that wouldn't work well for my mobile usage which is typically done without logging in (trying to minimise my distractions, though this seems somewhat futile).

My present HN Stylish CSS:

  /* Colours */
  
  body {
      background-color: #f6f6ef;
  }
  
  #hnmain {
      background-color: white !important;
  }
  
  /* Fonts */
  
  /* ... change this to define *overall* font size */
  
  body {
      font-size: medium;
  }
  
  /* ... derived values.  Tweak to suit. */
  
  td { font-size: 1em; }
  
  .default { font-size: 1em; }
  .admin {font-size: 0.85em; }
  .title { font-size: 1em; }
  .subtext { font-size: 0.7em; }
  .yclinks { font-size: 0.8em; }
  .pagetop { font-size: 1em; }
  .comhead { font-size: 0.8em; }
  .comment { font-size: 1em; }
  
  input, textarea {
      font-size: 1em;
      font-family: courier, monospace;
  }

dredmorbius3• 4 years ago

And since the obvious consequence of posting a site's stylesheet is to tweak further, I present Dred's HN CSS Mods:

  /* Colours */
  
  body {
      background-color: #f6f6ef;
  }
  
  #hnmain {
      background-color: white !important;
  }
  
  /* Fonts */
  
  /* ... change this to define *overall* font size */
  
  body {
      font-size: medium;
  }
  
  /* ... derived values */
  
  td { font-size: 1em; }
  
  .default { font-size: 1em; }
  .admin {font-size: 0.85em; }
  .title { font-size: 1.2em; }
  .subtext { font-size: 0.8em; }
  .yclinks { font-size: 0.8em; }
  .pagetop { font-size: 1em; }
  .comhead { font-size: 0.9em; }
  .comment { font-size: 1em; }
  .morelink { font-size: 0.8em; }
  
  input, textarea {
      font-size: 1em;
      font-family: courier, monospace;
  }
  
  /* Elements */
  
  .title, .titleline, .title a { 
      color: #000 !important;
  }
  
  .comhead, .comhead a {
      color: #333;
  }
  
  .comhead a:link {
      color: #000;
  }
  
  /* Index pages "news" */
  
  
  [op="news"] #pagespace {height: 2em !important;}
  
  [op="news"] .spacer { height: .75em !important; }
  
  [op="news"] .subtext { padding-top: 0.3em; }
  
  /* Posts & threads pages "item" */
  [op="item"] .default
  , [op="threads"] .default {
      padding-bottom: 1.25em;
      padding-top: 0.25em;
      margin-top: 0.25em;
      border-top: solid 1px #ccc;
  }
  
  /* More ... */
  .morespace + tr .title {
      font-size: 0.85em;
      border: solid 2px #ffbbaa;
      border-radius: 0.25em;
      padding: 0.3em;
      margin: 0.3em;
      background: #f0f0f0;
  }

dredmorbius3• 4 years ago

FWIW: I've been working further on the above, though I'm waiting for my tweaks to stabilise before posting an update.

solardev• 4 years ago

There are many hn apps on the stores that let you change font size. You can also change your browser font size.

sourcecodeplz• 4 years ago

This is a problem for me too. Just can't get the font size up on mobile, whatever I try.

Why does HN not respect accessibility settings in browser?

Related Stories