Safari-like Reader for any browser including Mobile Safari

We all like the new feature in Safari 5, Reader, well maybe except the advertisers, it is so pristine as anything we would expect from Apple but as it turns out it is actually based on the work of NYC based design house arc90, namely Readability which is acknowledged by Apple in file:///Applications/Safari.app/Contents/Resources/Acknowledgments.html

If you visit their Readability page you will notice that it is implemented as a javascript bookmarklet useable in any browser (i tested Chrome and Firefox) , all you have to do is drag the link to the bookmarks bar, for Mobile Safari which does not have such a bar it is a bit more complicated:
1 – create a placeholder bookmark by pressing plus (can be any page), press Save
2 – copy the javascript at the bottom of this post into the pasteboard
3 – press bookmarks > press edit > press the arrow on the shortcut you created
4 – press the round x to clear the name and type say Readability
5 – select the bottom field, press the round x to clear the address and paste the text

javascript:(function(){readStyle='style-newspaper';readSize='size-medium';readMargin='margin-wide';_readability_script=document.createElement('SCRIPT');_readability_script.type='text/javascript';_readability_script.src='http://lab.arc90.com/experiments/readability/js/readability.js?x='+(Math.random());document.getElementsByTagName('head')[0].appendChild(_readability_script);_readability_css=document.createElement('LINK');_readability_css.rel='stylesheet';_readability_css.href='http://lab.arc90.com/experiments/readability/css/readability.css';_readability_css.type='text/css';_readability_css.media='all';document.getElementsByTagName('head')[0].appendChild(_readability_css);_readability_print_css=document.createElement('LINK');_readability_print_css.rel='stylesheet';_readability_print_css.href='http://lab.arc90.com/experiments/readability/css/readability-print.css';_readability_print_css.media='print';_readability_print_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_print_css);})();

Now when you want to see only the content on a page you are visiting just tap the newly created bookmark and you are all set.
Just in case you want to enhance your Mobile Safari even more you might want to check out http://ipuhelin.com/en/safariplus/ ,in page text search is a must-have if you ask me.

Advertisements

ogg in safari woes

On the heels of the Firefox 3.5 release that brings HTML5 video embedding support the following pattern of embedding video files emerges (including on mozilla.com and openvideoalliance.org) that is two distinct sources for the video , one encoded with ogg , one with mpeg4 , using html code as follows :

<video>
<source src=”thefile.m4v” type=”video/mp4″>
<source src=”thefile.ogg” type=”video/ogg”>
</video>

What this does is show the mp4 file in safari and the ogg file in firefox , and it is all well and dandy except in the cases where a lot of media is involved it is unpractical at least to have 2 formats for every video file .

So let’s chose just one format then ,  because ogg is a open standard and endorsed by the One Video Alliance it is a safe bet  , sites like Dailymotion are already migrating to it .

Ok , how about browsers besides firefox , well safari for example can also support ogg video with a codec plugin namely Xiph Quicktime Component , but a simple test reveals a problem with the mime types , safari will not play the ogg file if  it has type=”video/ogg” in the html tag , works just when embeded ogg files have no type  defined.

At this point i am not certain whether it’s a bug or just a misconfiguration in osx or safari, apparently safari uses system wide mime-type settings that are accessible with System Preferences plugins like RCDefaultApp and MisFox but they do not help this cause a lot.

The point i am trying to make is that if you want to use a single format for embedding video and want it to work in all html5 compatible browsers (with ogg plugins) you best not define the type in the html tag if you want the video to work in safari.