6 ms·

Readability-inspired Wikipedia Beautifier for Chrome

68 points by wheels 16y ago

va1en0k 16y ago
awesome, but I can't live without links to articles in other languages
- wheels 16y ago
  All navigation elements are still accessible – they fade back in on mouse-over. Edit: Added a note above the large screenshot to reinforce that (though it was in the bullet points as well)
chc 16y ago
Cool idea, but wouldn't this make more sense as a Stylish theme?
- kmfrk 16y ago
  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.
- cobbal 16y ago
  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 http://en.wikipedia.org/wiki/Special:Preferences#preftab-1
  - idonthack 16y ago
    This is a much better solution than downloading an extension.
Tichy 16y ago
Does it also remove the "needs citation" banners? :-)
brok3nmachine 16y ago
I do like it. But it causes horizontal scrolling with my monitor in portrait rotation @ 1024x1280.
ile 16y ago
I had this same idea back in the day but decided to go with Stylebot instead :) http://stylebot.me/styles/29 http://stylebot.me/styles/29
kmfrk 16y ago
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. :)
- beaumartinez 16y ago
  Well, that's a deal-maker for me, that's what I've been wishing the Readability team integrate into their service for ages!
- Groxx 16y ago
  https://github.com/Groxx/wikipedia-beautifier 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.
- unwind 16y ago
  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.
  - Groxx 16y ago
    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.
bdhe 16y ago
A good rule of thumb is to use sans-serif when possible for lots of text. Displays that are lower resolution will render serifs poorly, or just subtly bad enough to make reading difficult. You could give the user to switch between serif and sans-serif. That would make the extension even better.
- carussell 16y ago
  A good rule of thumb is to use sans-serif when possible for lots of text Almost everything I've read on the issue advises the contrary, with an acknowledgment of the caveat for "low resolution" displays. What qualifies as a "low resolution" display? Anything worse than the iPhone 4?
bkudria 16y ago
A similar extension: https://chrome.google.com/extensions/detail/oolicfpkpnpbaonkibdjkpbchakfdmig https://chrome.google.com/extensions/detail/oolicfpkpnpbaonk...
vladocar 16y ago
I did something similar WikiReader – bookmarklet for Wikipedia reading http://www.vcarrer.com/2010/02/wikireader-bookmarklet-for-wikipedia.html http://www.vcarrer.com/2010/02/wikireader-bookmarklet-for-wi...
deleted 16y ago
[deleted]
awj 16y ago
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.
- wheels 16y ago
  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.)
jenhsun 16y ago
IMHO, I found these readability plugins for wikipedia are not good for printing. I used Beautipedia Modified before, but I switched back to original.
llimllib 16y ago
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?
- w1ntermute 16y ago
  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?
  - deleted 16y ago
    [deleted]
  - llimllib 16y ago
    Readable Hacker News is slightly buggy, but a definite improvement: https://chrome.google.com/webstore/detail/jnnojalnifmaekkfknejbppafnaiepjl https://chrome.google.com/webstore/detail/jnnojalnifmaekkfkn... Reddit, it turns out I used to have one installed but I forgot to reinstall it when I got a new computer and they added "thread lines" (so you could see indentation levels) which I used to add via extension. I used Google Reader Fresh Air: https://chrome.google.com/webstore/detail/cpdbjfkhmkcigkfddppmegcjjaaoggcb https://chrome.google.com/webstore/detail/cpdbjfkhmkcigkfddp... until a few days ago, when I got the updated toolbar for Google Reader, and it broke my extension. I've not had the time to update it yet.
  - kakuri 16y ago
    I use Stylish for HN (A Dark Hacker News) and reddit (The Dark Reddit).
  - 5l 16y ago
    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/jbhkdhkngalchoobjfiobbjobnbpfgmg https://chrome.google.com/webstore/detail/jbhkdhkngalchoobjf...
  - skbohra123 16y ago
baddox 16y ago
I've always thought Wikipedia looked great.
- nodoubt 16y ago
  Original Wikipedia is easier to navigate quickly
idonthack 16y ago
What's with all the extra whitespace? If I wanted a smaller content area, I would resize the browser.
- jevinskie 16y ago
  The non-article UI elements fade back when they are moused-over.
  - idonthack 16y ago
    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.
    - wheels 16y ago
      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.
      - carussell 16y ago
        ++ 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.
spooneybarger 16y ago
Is this doing anything you can't do with something like stylebot? http://stylebot.me/ http://stylebot.me/
acabal 16y ago
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.
cookiecaper 16y ago
Interesting. I took a different approach: http://www.deserettechnology.com/journal/wm-read-bookmarklet-to-enhance-readability-on-wikimedia-projects 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.
sfgfdhgfdshdhhd 16y ago
For firefox: Add the following in %appdata%\Mozilla\Firefox\Profiles\[profilename]\chrome\userContent.css @-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;} } Not as nice as the extension linked but much better than default wikipedia. 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.
tuhin 16y ago
I was almost about to begin worrying how to search when I just hovered over the invisible/blank portions of the page to be honestly surprised!
- tuhin 16y ago
  Of course the other option was to go incognito in Chrome!

68 points by wheels 16y ago

va1en0k 16y ago

awesome, but I can't live without links to articles in other languages

wheels 16y ago
All navigation elements are still accessible – they fade back in on mouse-over. Edit: Added a note above the large screenshot to reinforce that (though it was in the bullet points as well)

chc 16y ago

Cool idea, but wouldn't this make more sense as a Stylish theme?

kmfrk 16y ago
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.
cobbal 16y ago
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 http://en.wikipedia.org/wiki/Special:Preferences#preftab-1
- idonthack 16y ago
  This is a much better solution than downloading an extension.

Tichy 16y ago

Does it also remove the "needs citation" banners? :-)

brok3nmachine 16y ago

I do like it. But it causes horizontal scrolling with my monitor in portrait rotation @ 1024x1280.

ile 16y ago

I had this same idea back in the day but decided to go with Stylebot instead :) http://stylebot.me/styles/29 http://stylebot.me/styles/29

kmfrk 16y ago

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. :)

beaumartinez 16y ago
Well, that's a deal-maker for me, that's what I've been wishing the Readability team integrate into their service for ages!
Groxx 16y ago
https://github.com/Groxx/wikipedia-beautifier 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.
unwind 16y ago
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.
- Groxx 16y ago
  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.

bdhe 16y ago

A good rule of thumb is to use sans-serif when possible for lots of text. Displays that are lower resolution will render serifs poorly, or just subtly bad enough to make reading difficult. You could give the user to switch between serif and sans-serif. That would make the extension even better.

carussell 16y ago
A good rule of thumb is to use sans-serif when possible for lots of text Almost everything I've read on the issue advises the contrary, with an acknowledgment of the caveat for "low resolution" displays. What qualifies as a "low resolution" display? Anything worse than the iPhone 4?

bkudria 16y ago

A similar extension: https://chrome.google.com/extensions/detail/oolicfpkpnpbaonkibdjkpbchakfdmig https://chrome.google.com/extensions/detail/oolicfpkpnpbaonk...

vladocar 16y ago

I did something similar WikiReader – bookmarklet for Wikipedia reading http://www.vcarrer.com/2010/02/wikireader-bookmarklet-for-wikipedia.html http://www.vcarrer.com/2010/02/wikireader-bookmarklet-for-wi...

deleted 16y ago

[deleted]

awj 16y ago

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.

wheels 16y ago
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.)

jenhsun 16y ago

IMHO, I found these readability plugins for wikipedia are not good for printing. I used Beautipedia Modified before, but I switched back to original.

llimllib 16y ago

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?

w1ntermute 16y ago
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?
- deleted 16y ago
  [deleted]
- llimllib 16y ago
  Readable Hacker News is slightly buggy, but a definite improvement: https://chrome.google.com/webstore/detail/jnnojalnifmaekkfknejbppafnaiepjl https://chrome.google.com/webstore/detail/jnnojalnifmaekkfkn... Reddit, it turns out I used to have one installed but I forgot to reinstall it when I got a new computer and they added "thread lines" (so you could see indentation levels) which I used to add via extension. I used Google Reader Fresh Air: https://chrome.google.com/webstore/detail/cpdbjfkhmkcigkfddppmegcjjaaoggcb https://chrome.google.com/webstore/detail/cpdbjfkhmkcigkfddp... until a few days ago, when I got the updated toolbar for Google Reader, and it broke my extension. I've not had the time to update it yet.
- kakuri 16y ago
  I use Stylish for HN (A Dark Hacker News) and reddit (The Dark Reddit).
- 5l 16y ago
  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/jbhkdhkngalchoobjfiobbjobnbpfgmg https://chrome.google.com/webstore/detail/jbhkdhkngalchoobjf...
- skbohra123 16y ago

baddox 16y ago

I've always thought Wikipedia looked great.

nodoubt 16y ago
Original Wikipedia is easier to navigate quickly

idonthack 16y ago

What's with all the extra whitespace? If I wanted a smaller content area, I would resize the browser.

jevinskie 16y ago
The non-article UI elements fade back when they are moused-over.
- idonthack 16y ago
  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.
  - wheels 16y ago
    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.
    - carussell 16y ago
      ++ 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.

spooneybarger 16y ago

Is this doing anything you can't do with something like stylebot? http://stylebot.me/ http://stylebot.me/

acabal 16y ago

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.

cookiecaper 16y ago

Interesting. I took a different approach: http://www.deserettechnology.com/journal/wm-read-bookmarklet-to-enhance-readability-on-wikimedia-projects 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.

sfgfdhgfdshdhhd 16y ago

For firefox: Add the following in %appdata%\Mozilla\Firefox\Profiles\[profilename]\chrome\userContent.css @-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;} } Not as nice as the extension linked but much better than default wikipedia. 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.

tuhin 16y ago

I was almost about to begin worrying how to search when I just hovered over the invisible/blank portions of the page to be honestly surprised!

tuhin 16y ago
Of course the other option was to go incognito in Chrome!