Improved readibility in default font size and highlight colors

[joaobarcia]

Hi all, thanks for the great project. I use etherpad with several remote teams, but one of the major issues I've faced when trying to make others adopt the tool is the initial readability.

Issue: Readability for default font settings could be improved

• font-size is 12px
• color palette seems to be generated by the array at src/node/db/AuthorManager.js

Proposal: Increase font size and improve highlight colors

• change font-size to 16px (why? source 1, source 2, source 3)
• change colour palette so that all colors have contrast >15 and lightness >80% (i.e. http://jxnblk.com/colorable/demos/text/?background=%2312d1ad&foreground=%23000000 to http://jxnblk.com/colorable/demos/text/?background=%239FF9E9&foreground=%23000000)

---

Happy to create a PR if the community agrees with the proposal.

Cheers

[jainendra]

I agree with this, currently etherpad doesn't have good readability

[Dhwty]

I feel like this sort of a change should be optional -- something that can be enabled in the settings -- rather than the only choice. I say this because I work with a low-resolution screen and a dark theme, and this would be nightmarish for my ability to read my documents.

[jainendra]

I agree with @Dhwty. @joaobarcia It will be awesome if you do something like @Dhwty mentioned and raise a PR

[joaobarcia]

Great, will try to find some time to work on it the coming week.

@Dhwty , just to make sure I come up with a good proposal it would be nice to understand your user case as well. Why do you think it would impact your ability to read documents? The letters get too big in a low resolution screen? And about the dark theme, is it the theme of your os/browser, or does etherpad have themes that I didn't know of? And how would the highlights affect your readibility?

Thanks

[Dhwty]

@joaobarcia Happy to help. I have some visual processing disabilities that make paragraphs of large text nearly illegible, and I can't handle much light, so I do all of my work in dimly-lit rooms, on dark backgrounds with moderately-sized, light text. (I realise I am such an edge case, and this is only going to affect like twenty other people in the entire world, and three of them are using my server.)

Etherpad's current base font size is a good match for my screen and me -- which I realise probably makes it too damn small to read for anyone else, but I do need an option to keep it that size. (My screen's 1152x864, if you want a good laugh.)

The 'dark theme' is actually from a plugin -- ep_themes, which IIRC doesn't work straight out of the box, but I got it going. What it unfortunately doesn't affect, though is the range of highlight colours. Which, with a dark background and light text, do need to be dark.

So, here's a screenshot of what I'm working with and trying to maintain:

The light blue highlight in the chat is a user who is not currently on the document, and therefore has had their highlight dimmed, but the dark purple is someone present.

[joaobarcia]

Wow, interesting user case, @Dhwty ! Always learning :) Ok, will try to take all that info in consideration.

[HairyFotr]

@Dhwty If you want to darken the icons as well, add this to etherpad's pad.css. I haven't checked if/how it could be added to ep_themes, and it seems some plugin icons don't have the same attribute.

#editbar [data-type="button"] {
  filter: invert(100%);
}

[Dhwty]

@HairyFotr Neat! Thanks! I've got to go tweak a couple of things so it applies across the whole row (and not to the user colour select button, which was an amusing side effect), but where it works right off, it looks so much better.

[muzzol]

any news on this feature request?
just installed my first instance and first thing I notice is how bad the default readability is.

just an option for default size and font could do it for me.

[joaobarcia]

@muzzol , not from my side. Still have it on my backlog to try to submit a PR but haven't had any spare time lately.