An extension that loads some CSS on W3C, WHATWG and ECMAScript pages to make them more readable.
On some W3C pages, there is no maximum width, meaning on large screens text becomes difficult to read.
The font used is the default sans-serif - not pretty. And the default font size is 16px. A bit too small for my eyes.
It sets what I consider the right default for readable text:
- A generous font size
- Dark text, not black
- Light background, not white (the contrast ratio is 10, not 20)
- Nice fonts, with a native font stack
- A comfortable column width, about 14 words per row for body text
Also, a few pretty things:
- Breakouts (for examples, notes, etc) are wider and stand out
- Decent line height in the navigation menus for easier click targets
- GitHub style
highlighting
- w3.org/TR
- w3c.github.io
- csswg.org
- html.spec.whatwg.org
- drafts.fxtf.org
- ecma-international.org/ecma-262
Nuthin'
This is for me. The CSS is a shitfight. It probably breaks the layout of every spec I've never been to.
But if you like it and want to help, your PRs and issues are quite welcome.
If you want to change something significantly, raise an issue first. You can paste
screenshots straight into GitHub. If you do a PR, please paste before and after images and
a link to the page where the change takes effect.
It uses StandardJS
All testing is manual. It's a bit tricky, because class names are shared between sites.
Some pages I've looked at in more details than others:
- https://www.w3.org/TR/css-grid-1/
- https://html.spec.whatwg.org/
- http://www.ecma-international.org/ecma-262
- https://drafts.csswg.org/css-variables
- https://www.w3.org/TR/css-2015/
- https://www.w3.org/TR/css-2017/ (note the different nav behavior to 2015)
I'd be quite pleased if the people in charge of these sites took the lead from
this repo and incorporated some readability improvements.