Readability-inspired Wikipedia Beautifier for Chrome(github.com)
github.com
Readability-inspired Wikipedia Beautifier for Chrome
https://github.com/scotchi/wikipedia-beautifier/wiki/Wikipedia-Beautifier
20 comments
Cool idea, but wouldn't this make more sense as a Stylish theme?
Actually, Wikipedia even lets you upload your own custom css and javascript when you're logged in. http://en.wikipedia.org/wiki/Special:Preferences#preftab-1
This is a much better solution than downloading an extension.
Extensions get synced with Chrome; Stylish themes have to be backed up and applied, if you use another computer, format, etc.
Ideally, both options should be available.
Ideally, both options should be available.
Does it also remove the "needs citation" banners? :-)
I do like it. But it causes horizontal scrolling with my monitor in portrait rotation @ 1024x1280.
I had this same idea back in the day but decided to go with Stylebot instead :) http://stylebot.me/styles/29
It uses justification and hyphenation, which is a deal-breaker for me (and presumably people with dyslexia, too). But I guess that's why it's on GitHub. :)
Well, that's a deal-maker for me, that's what I've been wishing the Readability team integrate into their service for ages!
I think it would be interesting if you were to expand a bit on this, it's not obvious to me why either justification or hyphenation makes it harder for you.
Making more people aware of such "side effects" of visual design might make help designs improve. I'm thinking a bit about the "awareness" of color blindness as being related, here.
Making more people aware of such "side effects" of visual design might make help designs improve. I'm thinking a bit about the "awareness" of color blindness as being related, here.
My reasoning is as follows:
Ragged-edges make lines easier to distinguish. You don't lose your vertical location as easily, and it aids in remembering the physical location of words because every paragraph looks different. I seem to have very good location memory with what I read, though, so I may be abnormal in that part.
Varying space width means variation in reading words. Less variation is less cognitive cost.
Hyphenation means breaking a word in half, so you have to hold an incomplete word in your memory until you resume the next line. Useful to prevent huge gaps in paragraphs, but more = higher cognitive cost.
In summary: they're bad for my speed-reading. Very bad.
Ragged-edges make lines easier to distinguish. You don't lose your vertical location as easily, and it aids in remembering the physical location of words because every paragraph looks different. I seem to have very good location memory with what I read, though, so I may be abnormal in that part.
Varying space width means variation in reading words. Less variation is less cognitive cost.
Hyphenation means breaking a word in half, so you have to hold an incomplete word in your memory until you resume the next line. Useful to prevent huge gaps in paragraphs, but more = higher cognitive cost.
In summary: they're bad for my speed-reading. Very bad.
https://github.com/Groxx/wikipedia-beautifier
Don't have Git installed, so I can't delete the hyphenator.js file, but there ya go :) Delete it when you download it, and load it as an unpacked extension.
Don't have Git installed, so I can't delete the hyphenator.js file, but there ya go :) Delete it when you download it, and load it as an unpacked extension.
A similar extension: https://chrome.google.com/extensions/detail/oolicfpkpnpbaonk...
I did something similar WikiReader – bookmarklet for Wikipedia reading http://www.vcarrer.com/2010/02/wikireader-bookmarklet-for-wi...
[deleted]
What are your thoughts on an option/setting for partial fade on the navigation elements? I like the general thrust of the idea, but removing them entirely puts navigating wikipedia a little too close to mystery meat.
That was actually what I tried at first, but still found the extra cruft distracting, even when faded down to 10%.
I wouldn't be opposed to merging in a setting if someone else wants to create it. (Same goes for justification / hyphenation and serif / sans-serif.)
I wouldn't be opposed to merging in a setting if someone else wants to create it. (Same goes for justification / hyphenation and serif / sans-serif.)
IMHO, I found these readability plugins for wikipedia are not good for printing. I used Beautipedia Modified before, but I switched back to original.
I now have beautifiers installed for the following sites:
news.yc reddit.com wikipedia.org reader.google.com
As well as readability available for most blogs.
I wonder if this is a trend or a temporary thing?
news.yc reddit.com wikipedia.org reader.google.com
As well as readability available for most blogs.
I wonder if this is a trend or a temporary thing?
What beautifiers do you use for HN, Reddit, and Google Reader? I only have one for Google Reader (Helvetireader).
Also, does anyone have a Firefox port of this?
Also, does anyone have a Firefox port of this?
For HN, I use "Comfy Helvetica": https://comfy-helvetica.jottit.com/
For Reddit, I've only added Reddit Reveal: Chrome: https://chrome.google.com/webstore/detail/ccjhmanjcinnojaidg... Firefox: https://addons.mozilla.org/en-US/firefox/addon/reddit-reveal... Userscript: http://userscripts.org/scripts/show/66698
For Reddit, I've only added Reddit Reveal: Chrome: https://chrome.google.com/webstore/detail/ccjhmanjcinnojaidg... Firefox: https://addons.mozilla.org/en-US/firefox/addon/reddit-reveal... Userscript: http://userscripts.org/scripts/show/66698
[deleted]
I use Sublime Reader [0] for Google Reader. Without a dark background I get instant eye strain these days.
[0] https://chrome.google.com/webstore/detail/jbhkdhkngalchoobjf...
[0] https://chrome.google.com/webstore/detail/jbhkdhkngalchoobjf...
I use Stylish for HN (A Dark Hacker News) and reddit (The Dark Reddit).
What's with all the extra whitespace? If I wanted a smaller content area, I would resize the browser.
The non-article UI elements fade back when they are moused-over.
They've gone farther than that. Take a look at the screenshots. There's an extra 300px of horizontal margin (150px on each side), after accounting for the space taken up by the hidden sidebar.
There's a reason text is usually put into columns of a limited width when being laid out – it's much easier for the eyes to follow. (You'll see this nearly universally in print.) In fact, the current columns there are still way too wide by conventional standards, but Wikipedia's content isn't structured in such a way as to make even narrower columns tenable.
The Readability plugin, for example, uses a larger font and a 700px wide div for the text.
The Readability plugin, for example, uses a larger font and a 700px wide div for the text.
++
Here's my PSA: if you're reading Wikipedia from a fullscreen or maximized window on what is typical for a widescreen display by today's standards (desktop or notebook, even), you're doing yourself a disservice for this very reason.
Here's my PSA: if you're reading Wikipedia from a fullscreen or maximized window on what is typical for a widescreen display by today's standards (desktop or notebook, even), you're doing yourself a disservice for this very reason.
Is this doing anything you can't do with something like stylebot? http://stylebot.me/
On a side note I'm really happy that they included screenshots and a description in the repo. There are so many github links that go straight to source code and have nothing in the wiki, as if I have the time to read, download, compile, and execute code just to see what it looks like/does. Whenever I reach a repo like that I usually end up just closing the tab.
Interesting. I took a different approach: http://www.deserettechnology.com/journal/wm-read-bookmarklet... . As a frequent reader of articles on Wikimedia, I get really annoyed when there is a big chunk of wasted screen space while I attempt to read. It becomes distracting pretty quickly in long articles.
For firefox:
Add the following in
%appdata%\Mozilla\Firefox\Profiles\[profilename]\chrome\userContent.css
Hides navigation panel on the left when not hovering and introduces max-width making long texts readable. A border added to make the change in width more natural. Change font to whatever you want, i apparently found verdana to be easy on the eyes last time i edited this but with the new font renderer in firefox 4 i think there are better choices today.
@-moz-document domain(wikipedia.org) {
#content
{
max-width:50em !important;
border-right:1px solid #ccc;
padding:2em;
}
p { font-family:Verdana ! important; }
#mw-panel { opacity:0.01 !important; }
#mw-panel:hover { opacity:1 !important; }
/* Donate to founder banner */
#JA1banner3 {display:none;}
#JA1banner2 {display:none;}
#JA1banner1 {display:none;}
}
Hides navigation panel on the left when not hovering and introduces max-width making long texts readable. A border added to make the change in width more natural. Change font to whatever you want, i apparently found verdana to be easy on the eyes last time i edited this but with the new font renderer in firefox 4 i think there are better choices today.
You could give the user to switch between serif and sans-serif. That would make the extension even better.