Readability-inspired Wikipedia Beautifier for Chrome | Hacker News Reader

Readability-inspired Wikipedia Beautifier for Chrome

github.com

68 pointswheels40 comments

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.

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!

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.

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.

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.

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?

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?

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

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

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

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

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

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.

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

I've always thought Wikipedia looked great.

Original Wikipedia is easier to navigate quickly

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.

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?

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

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

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

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 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!

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

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

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

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.

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.

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

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)

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.

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.

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.

Reply on news.ycombinator.com