{Carrer web log} ←

ClipR - bookmarklet for better internet reading

Wednesday, March 24, 2010 { 10 Comments }

ClipRead or ClipR is a tool(bookmarklet) who can help you read better on internet directly from your browser
.
Before I will explain how this bookmarlet works here some screenshots.

Attention: All of the examples don’t have readability problems(actually are good example when you don’t need this bookmarklet). I just wanted to show you how this bookmarklet works.


I was inspired by Instapaper, Readability, Readable, Printliminator. Also I combined the web typography knowledge of my CSS projects (Azbuka, Better Readability Project, The Golden Grid, Emastic and Hartija) so the result is ClipR.


From: Seth's Blog


From: Jeffrey Zeldman Blog


From: 456 Berea Street

Go to the Download Page

Technical details: (For the people who know HTML, CSS and javascript)

The principle of ClipR is very simple it extracts only the content of(div and table) you select. So you read only the things you want everything else disappear from the page.

The main issue was how to resolve the typography in order to obtain better Readability.

I used the Golden Proportion and Fibonacci sequence (0,1,1,2,3,5,8,13,21,34,55,89,144...) to resolve some typographical issues.

I used Georgia like main font, In My Humble Opinion when Georgia is bigger than 16px provides excellent readability results.

For the font size I used 21px Georgia.

I increased the leading(line-height in CSS) from the standard(1.5) to (1.618 the golden proportion) also I decrease the distance by two paragraphs(13px).

The reading area of the page is 62% of the total page (62%:38% approximation the golden proportion).

Dark gray for the text(#111) and light gray(#f9f9f9) for the background.

For potential printing ClipR uses small part of Hartija – CSS Framework.

For the javascript part I used JQuery and Ben Alman Bookmarklet Generator.
One thing that strikes me over and over about JQuery it is that works even when it shouldn’t. I had the feeling that I’m not working with javascript. JQuery is just beautiful masterpiece.

ClipR is around 1kb end everything is inside the bookmarklet.

Only dependence of this bookmarklet is the Google Server where is hosted JQuery library http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

This project is licensed under MIT license(so please feel free to personalize it)

Here is the source code and the explanation how to use the bookmarklet.

Direct link to the bookmarklet

Good reading!

10 Responses to “ClipR - bookmarklet for better internet reading”

1. //  Anonymous // 3/24/2010

   font: "21px/1.618
   s/b
   font: "21/1.618  

2. //  Vladimir // 3/24/2010

   @Anonymous: 1.618 is the line-height and is perfectly OK without unit. Here is the link with more details: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/  

3. //  Anonymous // 3/24/2010

   on firefox the text is too big. taking out px made it smaller.  

4. //  Vladimir // 3/24/2010

   @Anonymous2: I'm not sure if I understood the question.I'm seeing the text equal in all the browsers. But if your point is that you prefer smaller text. Take the source code change 21px/1.618 to whatever value you prefer and go to this page http://benalman.com/code/test/jquery-run-code-bookmarklet/ (select jQuery 1.42) and create personalized bookmarklet.  

5. //  Xavi // 3/26/2010

   Good job!! Thanks for sharing..
   
   Xavi
   www.yazarbozuntusu.com  

6. //  Anonymous // 3/27/2010

   Bless you.  

7. //  Ashwin Jayaprakash // 3/30/2010

   An option to choose a dark background with gray text would've been nice - soothing for the eye.  

8. //  Vladimir // 3/30/2010

   @Ashwin Jayaprakash: I definitely agree. I will try to make more options in the next version of ClipR.  

9. //  Ashwin Jayaprakash // 3/30/2010

   @Vladimir Something like Readable's style - http://javaforu.blogspot.com/2010/03/make-your-online-reading-more-pleasant.html  

10. //  sd // 9/04/2010

    Many thanks. Instapaper, Readability, Readableapp, Clippable, Aardvark, this beats them all.
    
    I have it mapped to a keyboard shortcut using the excellent Vimperator firefox addon.
    
    Wish: a version that would simply automatically detect the biggest element on the page and do the magic on it. I could then convert the new version to a greasemonkey script and automatically apply it to certain websites.
    
    All the same, great job.
    
    sd  

Post a Comment

<< Home