Lyrics
I wish you a good day to the respected Habra community.
That was the first of September. The first bell broke off, the festive balls went limp, white bows hidden in the closet. The morning rulers went down, a booming echo ran through the adjacent courtyards and, having repeatedly reflected from the walls of houses, the song “
Teach in School ” dissolved in the warm autumn sky. Fragrant bouquets were poured on the teachers' tables, the flowers hung their heads in different directions, despite the aspirin added to the water daily.
')
Weekdays, gray, monotonous, came to brighten them up a little can only the fact that today is
Friday . The first Friday of the difficult week of the first month of autumn.
Apparently nostalgia struck me, and maybe chronic laziness for a second let go, but I set about trying to improve the quality of reading various literature from the monitor. Of course, everyone will say - who reads from the screen now? Won what devices you just don’t get, use it and don’t worry about anything. However, there are times when you just want to read this very 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 discover and ... I catch myself that more than half an hour has passed, but I can not tear myself away, and this awareness takes another half hour.
Having finally overpowered myself downloading, if available, the fb2-version and then I finish reading like a human being. But it is not always possible to get the desired work in a digestible form, and it’s not always a desire to have this creativity, you just need to “look diagonally” and that's it. And the eyes are not official.
I got up with the spirit and even a small script riveted on my knee, which helps me to read quite comfortably from the screen for a long time. And I got the idea of ​​a
resource that was recently
announced on Habré by the
Softlink user.
I have been spinning for a long time in my head, so how can I adapt such a useful site, and here, when another link fell down on Skype, I had all the mosaic elements in my head.
I want to share my attempts with everyone who likes to read from the screen.
Theory
Three browsers are constantly open at my workplace
(I rarely turn on the fourth one and then out of hand) , they all have the ability to run arbitrary Javascript code or connect custom scripts. This is the feature I used.
The first thing I had to do was compile a list of resources for which I graze, there were no problems here, here it is my list:
habr ,
prose ,
flibusta ,
libra , you can continue, but this is enough for experiments.
I turned on the development tools and selected those elements of the page that require my creative intervention
(blocks containing the bulk of the text) .
The second is to make a list of fonts that I will be pleased to look at. In this moment, too, there is no difficulty.
And then everything is prosaic and casual, I took the code.
Practice
The essence of the script is trivial, at the top of the page I grab the panel into which I place the selectors for the font and its size, and so that this part of the interface doesn’t annoy me much in the process of reading, I added the ability to hide it, hitting it to a small block. Oh yeah, I almost forgot about the beauty! Of course, I added a shadow!
One more thing, not all resources are connected jQuery, but I didn’t want to give up the buns, so I cling it, if necessary, to the page.
Everything worked immediately and without particularly long debugging. Take the job.
EULAOpening the spoiler you accept the following conditions:
- The author speaks English much worse than the locals of Guadeloupe,
- the amount of govnokod (from the English. write-only code) rolls over,
- the author will not be able to help you to see it all
Font switchervar webFontBar = function webFontBar() { var fonts = { 'Hattori' : [ 'HattoriHanzoLight' ], 'Ubuntu' : [ 'UbuntuBold', 'UbuntuCondensedRegular', 'UbuntuLightRegular', 'UbuntuLightBold', 'UbuntuRegular' ], 'Blagovest' : [ 'blagovest' ], 'PTSans' : [ 'PTSansCaptionBold', 'PTSansNarrowRegular', 'PTSansRegular' ], 'Cuprum' : [ 'CuprumRegular', 'CuprumBold' ], 'PTMono' : [ 'Pt_monoregular' ], 'PTSerif' : [ 'PTSerifRegular', 'PTSerifBold', 'PTSerifCaptionRegular' ] }, sizes = { 'Force' : [ '16pt', '18pt', '20pt', '22pt', '24pt', '26pt' ], 'Standard' : [ 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large' ], 'Percent' : [ '0.8em', '1.0em', '1.2em', '1.4em', '1.6em', '1.8em', '2.0em', '2.2em' ] }, selector = function selector(sel, text) { var name = ''; name += '<p>Choose ' + text + ': <select>'; jQuery.each(sel, function (key, val) { name += '<optgroup label="' + key + '">'; jQuery.each(val, function () { name += '<option>' + this + '</option>'; }); name += '</optgroup>'; }); name += '</select></p>'; return name; }, curFontGroup = '', curFont = '', curSize = '', myStyle = function myStyle(fntGrp) { return '<style id="myWebFont" type="text/css">@import "http://webfont.ru/font/import/' + fntGrp.toLowerCase() + '.css";</style>'; }, 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('<div></div>') .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('<span>[_]</span> ' + '<input type="text" value="' + myContainer + '" /> ' + '<p><a href="http://webfont.ru" target="_blank">webfont.ru</a> welcomes you! </p>' + 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();
Bonuses
You can also use this code in your projects, in which there is a need to use open fonts, correct the list and even sort it out one by one, until harmony appears on the screen.
And most importantly, it is possible, having waited for the Mithgol
hacker, to leave somewhere a comment with a sparkling Old Believer speech, to put the block on Blagovest to the block, but to admire not only the flexibility of forms and flexibility of speech, but also a visual way to match them
(not from evil, there were just really cases when I could not tear myself away from the appropriately compiled reviews, I reread it up to three times) .
Wishlist
If this "tool" will interest someone other than me, I will post it in the form of a user script in
userscripts .
If the webfontere developer likes this trick, I would like to have some simplest app to get the entire list of fonts, then you can always have the current base at hand and not slay the
ctrl ,
c and
v keys.
I wish you all a nice weekend and interesting books.