We read from the screen beautifully


    I wish good day to the respected Habr community.

    So the first of September passed. The first bell buried, holiday balls went limp, white bows were hidden in a closet. The morning rulers made a noise, ran a booming echo through the adjacent courtyards and, repeatedly reflected from the walls of the houses, the song “ Teach at school ” dissolved in the warm autumn sky . Scented bouquets showered on teachers' tables, flowers lowered their heads in different directions, despite the aspirin added to the water daily.

    Weekdays came, gray, monotonous, only the fact that today is Friday can brighten them up a bit . The first Friday of the hard week of the first month of autumn.

    Apparently nostalgia struck me, or maybe chronic laziness let go for a second, but I got the idea to improve the quality of reading various literature from the monitor. Of course, everyone will say - who is reading something from the screen right now? Look at what devices you just haven’t let out, use it and don’t worry about anything. However, there are times when you want to read just this second, and the quality of the text design is depressing.

    I really love to read. Often I come across links to interesting works that I immediately open and ... I catch myself on the fact that more than half an hour has passed, and I can’t tear myself away and another half an hour passes after this awareness.

    Having finally overpowered myself, I download, if available, the fb2 version and then I read it humanly. But it’s not always possible to get the right work in a digestible form, and it’s not always a hunt to have this creativity, you just need to “look diagonally” and that’s all. But the eyes are not official.

    I gathered my courage and riveted a small script on my knee that helps me to read quite comfortably from the screen for a long time. And the resource which not so long ago was announced on Habr by the user of Softlink, prompted me to the idea .

    It took me a long time to think about how to adapt such a useful site, and when the next link with reading fell on Skype, all the elements of the mosaic formed in my head.

    I also want to share my attempts with everyone who likes to read from the screen.


    Three browsers are constantly open in my workplace (the fourth one I rarely turn on and then from under the stick) , all of them have the ability to run arbitrary Javascript code to execute or connect user scripts. I used this particular feature.

    The first thing I had to do was to compile a list of resources on which I graze, there were no problems, here is my list: Habr , prose , flibust , libra , you can continue, but this is enough for experiments.

    I turned on the development tools and selected those page elements that require my creative intervention (blocks containing the bulk of the text) .

    The second is to make a list of fonts that I will enjoy looking at. There are no difficulties in this moment either.

    And then everything is prosaic and everyday, I undertook to code.


    The essence of the script is banal, at the top of the page I hook a panel into which I place selectors for the font and its size, and so that this part of the interface does not irritate me much while reading, I added the ability to hide it by narrowing to a small block. Oh yes, I almost forgot about the beauty! Of course I added a shadow!

    Another point, not all resources have jQuery connected, and I didn’t want to refuse the goodies, so I hook it, if necessary, to the page.

    Everything worked right away and without too much debugging. Take the job.

    EULA By
    opening the spoiler you accept the following conditions:
    1. the author speaks English much worse than the local inhabitants of Guadeloupe,
    2. the amount of govnokoda (from the English. write-only code) rolls over,
    3. the author will not be able to help you see it all

    Font switcher
    var webFontBar = function webFontBar() {
      var fonts = {
        'Hattori' : [
        'Ubuntu' : [
        'Blagovest' : [
        'PTSans' : [
        'Cuprum' : [
        'PTMono' : [
        'PTSerif' : [
      sizes = {
        'Force' : [
        'Standard' : [
        'Percent' : [
      selector = function selector(sel, text) {
        var name = '';
        name += '

    Choose ' + text + ':

    '; return name; }, curFontGroup = '', curFont = '', curSize = '', myStyle = function myStyle(fntGrp) { return ''; }, myContainer = ''; switch (window.location.hostname) { case 'flibusta.net' : myContainer = '#main'; break; case 'habrahabr.ru' : myContainer = '.content'; break; case 'www.proza.ru' : case 'proza.ru' : myContainer = '.text'; break; case 'lib.ru' : myContainer = 'pre'; break; default : myContainer = 'body'; break; } jQuery('#webfont').remove(); jQuery('
    ') .attr('id', 'webfont') .appendTo('body') .css({ 'position' : 'fixed', 'width' : '96%', 'top' : '0px', 'right' : '2%', 'display' : 'fixed', 'text-align' : 'center', 'background-color' : '#ffcc66', 'padding' : '0.1em 0.1em', 'font-family' : 'sans-serif', 'font-size' : '16px', 'overflow' : 'hidden', 'margin' : '0px 0px', 'box-shadow' : '0.1em 0.1em 0.3em 0.1em #333' }); jQuery('[_] ' + ' ' + '

    webfont.ru welcomes you!

    ' + selector(fonts, 'font') + ' ' + selector(sizes, 'size') ).appendTo('#webfont'); jQuery('#webfont').children().css({ 'margin' : '0px 0px', 'display' : 'inline' }); jQuery('#webfont span') .attr('title', 'Minimize') .css({ 'cursor' : 'pointer', 'font-weight' : 'bold', 'color' : '#36f' }) .toggle(function () { jQuery(this) .parent('#webfont') .width('2em') .children() .not('span') .css('display', 'none'); jQuery(this).attr('title', 'Maximize'); jQuery(this).text('[#]'); }, function () { jQuery(this) .parent('#webfont') .width('96%') .children() .css('display', 'inline'); jQuery(this).attr('title', 'Minimize'); jQuery(this).text('[_]'); }); jQuery('#webfont select') .change(function () { curFontGroup = jQuery('#webfont select:first option:selected').parent().attr('label'); curFont = jQuery('#webfont select:first option:selected').val(); curSize = jQuery('#webfont select:last option:selected').val(); var myPreviousStyle = jQuery('head style#myWebFont'); if(myPreviousStyle.text() !== '') { if(myPreviousStyle.text().match('.*import/(.*).css')[1] !== curFontGroup.toLowerCase()) { myPreviousStyle.remove(); jQuery(myStyle(curFontGroup)).appendTo('head'); } } else { jQuery(myStyle(curFontGroup)).appendTo('head'); } jQuery(jQuery('#webfont input').val()) .css({ 'font-family' : curFont, 'font-size' : curSize, 'line-height' : '1.4em' }); }); }, startMyFontSwitcher = function startMyFontSwitcher() { if (window.jQuery === undefined) { var jq = document.createElement('script'); jq.setAttribute('type', 'text/javascript'); jq.setAttribute('src', 'http://code.jquery.com/jquery.min.js'); document.head.appendChild(jq); jq.addEventListener('load', function () { webFontBar(); }, false); } else { webFontBar(); } }; startMyFontSwitcher();


    You can use this code in your projects, in which there is a need to use open fonts, correct the list and sort it out individually, until harmony appears on the screen.

    And most importantly, you can wait until the harasser Mithgol leaves somewhere a comment with a sparkling Old Believer speech, put the Blagovest font on the block, and admire not only the form complexity and flexibility of speech, but also visually match it (not from evil, there were just real cases when I could not tear myself away from appropriately composed reviews, I re-read up to three times) .


    If this "tool" will interest someone other than me, I'll post it as a custom script yuzerskripts .

    If the webfonder developer likes this hack, I would like to have some simple api to get the whole list of fonts, then you can always have an up-to-date base on hand and not use the ctrl , c and v keys .

    I wish you all a pleasant weekend and interesting books.

    Also popular now: