Readability-inspired Wikipedia Beautifier for Chrome

https://github.com/scotchi/wikipedia-beautifier/wiki/Wikipedia-Beautifier

by wheels • 15 years ago

68 40 15 years ago

github.com

va1en0k• 15 years ago

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

wheels3• 15 years 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• 15 years ago

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

kmfrk2• 15 years 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• 15 years 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

idonthack3• 15 years ago

This is a much better solution than downloading an extension.

Tichy• 15 years ago

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

brok3nmachine• 15 years ago

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

ile• 15 years ago

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

kmfrk2• 15 years 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• 15 years 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!

Groxx2• 15 years ago

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• 15 years 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.

Groxx2• 15 years 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• 15 years 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.

carussell2• 15 years 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• 15 years ago

vladocar• 15 years ago

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

awj• 15 years 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.

wheels3• 15 years 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• 15 years 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• 15 years 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• 15 years 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?

kakuri• 15 years ago

I use Stylish for HN (A Dark Hacker News) and reddit (The Dark Reddit).

5l• 15 years 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/jbhkdhkngalchoobjf...

skbohra123• 15 years ago

https://addons.mozilla.org/en-us/firefox/addon/readability/

logic• 15 years ago

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

baddox• 15 years ago

I've always thought Wikipedia looked great.

nodoubt• 15 years ago

Original Wikipedia is easier to navigate quickly

idonthack3• 15 years ago

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

jevinskie• 15 years ago

The non-article UI elements fade back when they are moused-over.

idonthack3• 15 years 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.

spooneybarger• 15 years ago

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

acabal• 15 years 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• 15 years ago

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.

sfgfdhgfdshdhhd• 15 years 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.

tuhin2• 15 years 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!

tuhin2• 15 years ago

Of course the other option was to go incognito in Chrome!

Readability-inspired Wikipedia Beautifier for Chrome

Related Stories