Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit 781858b162cb2285246d751d035f754f0a5d0dcc Nathan Ford committed Jun 21, 2012
Showing with 248 additions and 0 deletions.
  1. +7 −0 LICENSE.txt
  2. +67 −0 README
  3. +174 −0 widowtamer.js
@@ -0,0 +1,7 @@
+Copyright (C) 2012 Nathan Ford
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
67 README
@@ -0,0 +1,67 @@
+The Widow Tamer
+
+…is a Javascript to automatically fix typographic widows on your web pages. It is designed to work with responsive sites, fixing widows as it finds them on resize or orientation change.
+
+*What is a Widow?*
+
+Widows are left over characters at the end of a paragraph. If the last line of a paragraph contains less than 14 characters (for example), it is said to have a widow. Widows are disruptive to both text layouts and reading experiences. Therefore, we must tame them.
+
+*How does The Widow Tamer work?*
+
+By setting the elements you want fixed, the number of characters you consider a “widow”, and the method by which you want them fixed, you can eliminate widows from your site. The script will cycle through the elements, apply your “method” (more on that later), check if the widow has been fixed, and repeat until the widow is tamed.
+
+You only need to download the script, and link it in the HEAD of your page(s). Then, you can call a simple Javascript function to start taming widows:
+
+ wt.fix();
+
+You can also set a few custom options:
+
+Option Description Default
+
+elements Which elements do you want to tame - jQuery-like Selector 'p,li,dd'
+
+chars Number of characters to qualify a “widow”. - Number 14
+
+method Method by which to fix the widow. 'word-spacing'
+ Options: 'word-spacing'
+ 'padding-right/padding-left'
+ 'letter-spacing'
+ 'nbsp'
+
+dir Used with certain methods. Positive or negative change. 'pos'
+ Options: 'pos'
+ 'neg'
+
+event When do you want the fix to run? Any window events. 'orientationchange'
+ Suggested Options: 'orientationchange'
+ 'resize'
+
+The script will run initially on window.onload, and then fire every time the 'event' is triggered.
+
+*Example Implementation*
+
+You can run multiple instances of the function target different elements with different methods. For example, here we are adding padding to the right of paragraphs in our main post article:
+
+ wt.fix({
+ elements: '#posts article p',
+ chars: 20,
+ method: 'padding-right',
+ event: 'resize'
+ });
+
+And on the same page, on the same events, we may want to fix the headers in our footer by adding non-breaking spaces:
+
+ wt.fix({
+ elements: 'footer aside h1',
+ chars: 20,
+ method: 'nbsp',
+ event: 'resize'
+ });
+
+*Details*
+
+The Widow Tamer was created by Nathan Ford. Feel free to interrupt him any time with questions, concerns, complaints, etc.
+
+nathan@artequalswork.com
+@nathan_ford on Twitter
+
@@ -0,0 +1,174 @@
+// Widow Tamer JS by Nathan C. Ford http://artequalswork.com
+
+wt = {
+
+ // default options
+ opts : {
+ elements : 'p,li,dd',
+ chars : 14,
+ method : 'wordSpacing',
+ dir : 'pos',
+ event : 'orientationchange'
+ },
+
+ to : new Array(),
+
+ fix : function (opts) { wt.bind('load', function () { wt.init(opts); }); },
+
+ init : function (opts) {
+
+ var m = opts.method;
+
+ switch (m) {
+
+ case 'padding-right': case 'nbsp': case 'padding-left': case 'word-spacing': case 'letter-spacing' : case undefined :
+
+ if (opts.dir == 'neg' && m && m.match('padding')) {
+
+ console.log('Invalid method. You cannot use neg with padding.');
+
+ } else wt.hunter(opts);
+
+ break;
+
+ default : console.log('Invalid method. Please use either padding-right, padding-left, word-spacing, or letter-spacing.');
+
+ }
+
+ },
+
+ hunter : function (uopts) {
+
+ var opts = new Object();
+
+ // overwrite defaults with options from user
+ if (uopts) {
+
+ for(i in wt.opts) {
+
+ if (uopts[i]) opts[i] = (i == 'method' && uopts[i].match('-')) ? wt.fixmethod(uopts[i]) : uopts[i];
+ else opts[i] = wt.opts[i];
+
+ }
+
+ }
+ else opts = wt.opts;
+
+ var eles = document.querySelectorAll(opts.elements),
+ i = 0;
+
+ while (i < eles.length) {
+
+ var t = eles[i];
+
+ if (t.offsetHeight > wt.getstyle(t, 'line-height', true)) {
+
+ // find a textnode longer than chars
+ var nodes = t.childNodes,
+ j = nodes.length - 1,
+ c = false;
+
+ while (j >= 0) {
+
+ var ntext = wt.text(nodes[j]);
+
+ if (ntext != undefined && ntext.length > opts.chars) {
+ c = nodes[j];
+ break;
+ }
+
+ j--;
+
+ }
+
+ t.style[opts.method] = '0';
+
+ var ctext = wt.text( c );
+
+ if (c) wt.tamer(c, t, ctext, 0, opts);
+
+ }
+
+ i++;
+
+ }
+
+ wt.bind(opts.event, function () { wt.onevent(opts); });
+
+ },
+
+ text : function (t) {
+
+ return t.innerText || t.textContent;
+
+ },
+
+ tamer : function (c, t, text, i, opts) {
+
+ var h = t.offsetHeight;
+
+ c.innerHTML = text.slice(0, (opts.chars * -1));
+
+ if (t.offsetHeight < h) {
+
+ if (opts.method == 'nbsp')
+ c.innerHTML = wt.text( c ) + text.slice((opts.chars * -1)).replace(/\s/g, '&nbsp;');
+
+ else {
+
+ var inc = (opts.method.match('padding')) ? (i / 10) : (i / 100);
+
+ if (opts.dir == 'neg') inc = inc * -1;
+
+ t.style[opts.method] = inc + 'em';
+
+ c.innerHTML = text;
+
+ wt.tamer(c, t, text, i + 1, opts);
+
+ }
+
+ }
+ else c.innerHTML = text;
+
+ },
+
+ onevent : function (opts) {
+
+ var to = "'" + opts.elements.replace(/[^a-zA-Z0-9\-\.]/g, '') + "'";
+
+ clearTimeout(wt.to[to]);
+ wt.to[to] = setTimeout(function () { wt.hunter(opts); }, 250);
+
+ },
+
+ bind : function (e, f) {
+
+ if (window.attachEvent) window.attachEvent('on' + e, f );
+ else window.addEventListener(e, f, true);
+
+ },
+
+ fixmethod : function (s) {
+
+ return s.replace(/-([a-zA-Z])/, function (m) {
+
+ return m.replace('-','').toUpperCase();
+
+ });
+
+ },
+
+ getstyle : function (t, s, n) {
+
+ var r;
+
+ if (t.currentStyle) r = t.currentStyle[s.replace(/-([A-z])/gi, function(a,b) {return b.toUpperCase();})];
+ else if (window.getComputedStyle) r = document.defaultView.getComputedStyle(t,null).getPropertyValue(s);
+
+ if (n) return parseFloat(r);
+ else return r;
+
+ }
+
+};

0 comments on commit 781858b

Please sign in to comment.