-
Notifications
You must be signed in to change notification settings - Fork 27
Hate typographic widows hanging around on your site? Use this. See it in action on artequalswork.com
License
nathanford/widowadjust
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
Widow Adjust …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 Widow Adjust 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? jQuery-like Selector 'p,li,dd' chars Number of characters to qualify a “widow” 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. +/- change 'pos' Options: 'pos' 'neg' event Any window events on which to run the fix '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' }); Browser Support Widow Adjust works in IE8+ and all other modern browsers. Details Widow Adjust was created by Nathan Ford. Feel free to interrupt him any time with questions, concerns, complaints, etc. nathan@artequalswork.com @nathan_ford on Twitter
About
Hate typographic widows hanging around on your site? Use this. See it in action on artequalswork.com
Resources
License
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published