├── test ├── mocha.opts ├── standard.js ├── setup.js ├── index.html └── index │ ├── reverse_walk_test.js │ ├── cases_test.js │ └── unorphan_test.js ├── .gitignore ├── .travis.yml ├── .zuul.yml ├── bower.json ├── History.md ├── package.json ├── License.md ├── Readme.md └── index.js /test/mocha.opts: -------------------------------------------------------------------------------- 1 | --recursive 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | /coverage 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | script: 3 | - npm run coverage 4 | node_js: 5 | - iojs 6 | -------------------------------------------------------------------------------- /.zuul.yml: -------------------------------------------------------------------------------- 1 | ui: mocha-bdd 2 | browsers: 3 | - name: ie 4 | version: 8 5 | # - name: firefox 6 | # version: latest 7 | # - name: chrome 8 | # version: latest 9 | -------------------------------------------------------------------------------- /test/standard.js: -------------------------------------------------------------------------------- 1 | /* global describe, it */ 2 | describe('coding style', function () { 3 | this.timeout(5000) 4 | it('conforms to standard', require('mocha-standard')) 5 | }) 6 | -------------------------------------------------------------------------------- /test/setup.js: -------------------------------------------------------------------------------- 1 | /* global before */ 2 | 3 | if (typeof process === 'object') { 4 | require('mocha-jsdom')() 5 | global.expect = require('expect') 6 | require('expect-html-equal') 7 | before(function () { 8 | global.unorphan = require('../index') 9 | }) 10 | } else { 11 | window.require = function () { } 12 | } 13 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "unorphan", 3 | "description": "Removes text orphans", 4 | "keywords": ["typography", "orphan", "unorphan", "widow"], 5 | "authors": ["Rico Sta. Cruz "], 6 | "license": "MIT", 7 | "main": "index.js", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/rstacruz/unorphan.git" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /History.md: -------------------------------------------------------------------------------- 1 | ## [v1.2.1] 2 | > Nov 17, 2015 3 | 4 | * Fix bower.json warning about missing `main` 5 | 6 | ## [v1.2.0] 7 | > Jul 2, 2015 8 | 9 | * Add support for line breaks (`{ br: true }`). 10 | 11 | ## [v1.1.0] 12 | > Jul 2, 2015 13 | 14 | * Account for more cases, most notably `hello world`. 15 | * Update coding style and update tests. 16 | 17 | ## [v1.0.1] 18 | > Mar 5, 2015 19 | 20 | * Fix possible scoping problem 21 | 22 | ## v1.0.0 23 | > Mar 5, 2015 24 | 25 | Initial release. 26 | 27 | [v1.0.1]: https://github.com/rstacruz/unorphan/compare/v1.0.0...v1.0.1 28 | [v1.1.0]: https://github.com/rstacruz/unorphan/compare/v1.0.1...v1.1.0 29 | [v1.2.0]: https://github.com/rstacruz/unorphan/compare/v1.0.1...v1.2.0 30 | [v1.2.1]: https://github.com/rstacruz/unorphan/compare/v1.2.0...v1.2.1 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "unorphan", 3 | "description": "Obliterate text orphans", 4 | "version": "1.2.1", 5 | "author": "Rico Sta. Cruz ", 6 | "bugs": { 7 | "url": "https://github.com/rstacruz/unorphan/issues" 8 | }, 9 | "devDependencies": { 10 | "expect": "1.6.0", 11 | "expect-html-equal": "1.0.1", 12 | "istanbul": "0.3.17", 13 | "jsdom": "5.4.3", 14 | "mocha": "2.2.5", 15 | "mocha-jsdom": "1.0.0", 16 | "mocha-standard": "1.0.0", 17 | "standard": "4.4.0" 18 | }, 19 | "directories": { 20 | "test": "test" 21 | }, 22 | "homepage": "https://github.com/rstacruz/unorphan", 23 | "keywords": [ 24 | "orphan", 25 | "typography", 26 | "unorphan", 27 | "widow" 28 | ], 29 | "license": "MIT", 30 | "main": "index.js", 31 | "repository": { 32 | "type": "git", 33 | "url": "https://github.com/rstacruz/unorphan.git" 34 | }, 35 | "scripts": { 36 | "coverage": "istanbul cover _mocha -- -R spec", 37 | "test": "mocha" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /License.md: -------------------------------------------------------------------------------- 1 | Copyright © 2015, Rico Sta. Cruz. 2 | 3 | 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: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | 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. 8 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mocha 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /test/index/reverse_walk_test.js: -------------------------------------------------------------------------------- 1 | /* global beforeEach, describe, it, expect, unorphan */ 2 | var div 3 | 4 | if (typeof process === 'object') require('../setup') 5 | 6 | beforeEach(function () { 7 | div = document.createElement('div') 8 | }) 9 | 10 | describe('reverse walk', function () { 11 | var etn, res 12 | 13 | beforeEach(function () { 14 | etn = unorphan.reverseWalk 15 | res = [] 16 | }) 17 | 18 | it('works when passed with elements', function () { 19 | div.innerHTML = 'hi theremundo' 20 | etn(div, function (node) { res.push(node) }) 21 | 22 | expect(res.length).toEqual(4) 23 | expect(res[0].nodeName).toEqual('I') 24 | expect(res[1].nodeValue).toEqual('mundo') 25 | expect(res[2].nodeName).toEqual('B') 26 | expect(res[3].nodeValue).toEqual('hi there') 27 | }) 28 | 29 | it('works when passed with elements and text', function () { 30 | div.innerHTML = 'hi there mundo' 31 | etn(div, function (node) { res.push(node) }) 32 | 33 | expect(res.length).toEqual(5) 34 | expect(res[0].nodeName).toEqual('I') 35 | expect(res[1].nodeValue).toEqual('mundo') 36 | expect(res[2].nodeValue).toEqual(' ') 37 | expect(res[3].nodeName).toEqual('B') 38 | expect(res[4].nodeValue).toEqual('hi there') 39 | }) 40 | 41 | it('works when passed with text', function () { 42 | div.innerHTML = 'hi there' 43 | etn(div, function (node) { res.push(node) }) 44 | 45 | expect(res.length).toEqual(1) 46 | expect(res[0].nodeValue).toEqual('hi there') 47 | }) 48 | 49 | it('can be aborted', function () { 50 | div.innerHTML = 'hi theremundo' 51 | 52 | etn(div, function (node) { 53 | res.push(node) 54 | return false 55 | }) 56 | 57 | expect(res.length).toEqual(1) 58 | expect(res[0].nodeName).toEqual('I') 59 | }) 60 | }) 61 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # unorphan.js 2 | 3 | Prevents text orphans. 4 | 5 | > *orphan* (n.) A word, part of a word, or very short line that appears by itself at the end of a paragraph. (via [Wikipedia](http://en.wikipedia.org/wiki/Widows_and_orphans)) 6 | 7 | ![](http://ricostacruz.com/unorphan/screenshot.png) 8 | 9 | [![Status](https://travis-ci.org/rstacruz/unorphan.svg?branch=master)](https://travis-ci.org/rstacruz/unorphan "See test builds") 10 | 11 |
12 | 13 | ## Usage 14 | 15 | Call `unorphan()` on some nodes. 16 | 17 | ```js 18 | unorphan('h1, p') 19 | ``` 20 | 21 | Or pass on a node, or a list of nodes: 22 | 23 | ```js 24 | // Node 25 | unorphan(document.querySelector('#top-heading h1')) 26 | 27 | // NodeList 28 | unorphan(document.querySelectorAll('h1, p')) 29 | 30 | // jQuery 31 | unorphan($('h1, p')) 32 | ``` 33 | 34 |
35 | 36 | **How does it work?** — This changes last orphan space to a [non-breaking space][nbsp] so the last 2 words stick together. Yes, it's [smart][test] and handles many edge cases. 37 | 38 | ```html 39 |

Hello there world

40 |

Hello there world

41 | ``` 42 | 43 | [nbsp]: https://en.wikipedia.org/wiki/Non-breaking_space 44 | [test]: https://github.com/rstacruz/unorphan/blob/master/test/index/cases_test.js 45 | 46 |
47 | 48 | **Line breaks** — You may also unorphan before line breaks by passing `{ br: true }`. 49 | 50 | ```js 51 | unorphan('h1, p', { br: true }) 52 | ``` 53 | 54 | ```html 55 |

4 Privet Drive
56 | Little Whigging
57 | Surrey

58 | ``` 59 | 60 |
61 | 62 | ## Download 63 | 64 | ``` 65 | npm install unorphan 66 | bower install unorphan 67 | ``` 68 | 69 | [![npm version](http://img.shields.io/npm/v/unorphan.svg)](https://npmjs.org/package/unorphan "View this project on npm") 70 | 71 |
72 | 73 | ## Thanks 74 | 75 | **unorphan** © 2015+, Rico Sta. Cruz. Released under the [MIT] License.
76 | Authored and maintained by Rico Sta. Cruz with help from contributors ([list][contributors]). 77 | 78 | > [ricostacruz.com](http://ricostacruz.com)  ·  79 | > GitHub [@rstacruz](https://github.com/rstacruz)  ·  80 | > Twitter [@rstacruz](https://twitter.com/rstacruz) 81 | 82 | [MIT]: http://mit-license.org/ 83 | [contributors]: http://github.com/rstacruz/unorphan/contributors 84 | -------------------------------------------------------------------------------- /test/index/cases_test.js: -------------------------------------------------------------------------------- 1 | /* global beforeEach, describe, it, xdescribe, expect, unorphan */ 2 | var div 3 | 4 | if (typeof process === 'object') require('../setup') 5 | 6 | beforeEach(function () { 7 | div = document.createElement('div') 8 | }) 9 | 10 | describe('simplified cases', function () { 11 | test('', '') 12 | test(' ', ' ') 13 | test('x', 'x') 14 | 15 | // these fail in IE8. harmlessly, really 16 | describe('leading whitespace', function () { 17 | test(' x', '_x') 18 | test(' x', '_x') 19 | test(' x ', '_x') 20 | test(' x ', '_x') 21 | }) 22 | 23 | test('x ', 'x ') 24 | test('x y', 'x_y') 25 | test('x y ', 'x_y') 26 | test('x y', 'x_y') 27 | test('x y ', 'x_y') 28 | test('x', 'x') 29 | test('x ', 'x ') 30 | test(' x', '_x') 31 | test(' x ', '_x ') 32 | test(' x ', ' _x ') 33 | test(' x ', ' _x ') 34 | test('x y z', 'x y_z') 35 | test('x y z', 'x y_z') 36 | test('x y z', 'x y_z') 37 | test('x y z', 'x y_z') 38 | test('x y z', 'x y_z') 39 | test('x y z', 'x y_z') 40 | test('x y z', 'x y_z') 41 | test('x y z ', 'x y_z ') 42 | test('x y z ', 'x y_z ') 43 | 44 | describe('line breaks', function () { 45 | test('a b
c d', 'a b
c_d') 46 | test('a b
c d', 'a_b
c_d', { br: true }) 47 | test('a b
c
d', 'a b
c
_d') 48 | test('a b
c
d', 'a_b
c
_d', { br: true }) 49 | test('a b
c
d', 'a b
c
_d') 50 | test('a b
c
d', 'a_b
c
_d', { br: true }) 51 | test('a b

c d', 'a b

c_d') 52 | test('a b

c d', 'a_b

c_d', { br: true }) 53 | test('a b
c d e
f g', 'a_b
c d_e
f_g', { br: true }) 54 | test('a b
c d e
f g h', 'a b
c d e
f g_h') 55 | test('a b
c d e
f g h', 'a_b
c d_e
f g_h', { br: true }) 56 | }) 57 | 58 | xdescribe('pending cases', function () { 59 | test('x x ', 'x_x ') 60 | }) 61 | }) 62 | 63 | function test (input, output, options) { 64 | var msg = '"' + input + '" → "' + output + '"' 65 | if (options) msg += ' ' + JSON.stringify(options) 66 | it(msg, function () { 67 | div.innerHTML = input 68 | unorphan(div, options) 69 | expect(div.innerHTML).toHtmlEqual(output.replace(/_/g, ' ')) 70 | }) 71 | } 72 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* global define */ 2 | void (function (root, factory) { 3 | if (typeof define === 'function' && define.amd) define(factory) 4 | else if (typeof exports === 'object') module.exports = factory() 5 | else root.unorphan = factory() 6 | }(this, function () { 7 | 8 | var nbsp = '\xA0' 9 | var TEXT = 3 10 | var ELEMENT = 1 11 | 12 | unorphan.reverseWalk = reverseWalk 13 | return unorphan 14 | 15 | function unorphan (n, options) { 16 | if (!options) options = {} 17 | if (!n) return 18 | if (typeof n === 'string') { /* selector string */ 19 | unorphan(document.querySelectorAll(n), options) 20 | } else if (n.nodeType === ELEMENT) { 21 | unorphanElement(n, options) 22 | } else if (n.nodeType === TEXT) { 23 | n.nodeValue = n.nodeValue.replace(/\s+([^\s]*)\s*$/, nbsp + '$1') 24 | } else if (n.length) { /* node list or jQuery object */ 25 | for (var i = 0, len = n.length; i < len; i++) { unorphan(n[i], options) } 26 | } 27 | } 28 | 29 | /* 30 | * Recursively checks text nodes in an element and replaces the first 31 | * eligible space it encounters to a non-breaking space. 32 | */ 33 | 34 | function unorphanElement (node, options) { 35 | var dirty /* keep track if we've seen a non-space character yet */ 36 | var paused /* stop processing text nodes until the next
*/ 37 | 38 | reverseWalk(node, function (n) { 39 | if (n.nodeType === TEXT && !paused) { 40 | var text = n.nodeValue 41 | 42 | if (/\s+[^\s]+\s*$/.test(text) && !dirty) { 43 | // " xx" or " xx " => "_xx" (done!) 44 | n.nodeValue = text.replace(/\s+([^\s]+)\s*$/, nbsp + '$1') 45 | if (!options.br) return false 46 | paused = true 47 | } else if (/^[^\s]+\s*$/.test(text) && !dirty) { 48 | // "xx " or "xx" => pass 49 | dirty = true 50 | } else if (/\s/.test(text) && dirty) { 51 | // " " => "_" 52 | // "xx " => "xx_" 53 | // "xx x" => "xx_x" (done!) 54 | n.nodeValue = text.replace(/\s+([^\s]*)$/, nbsp + '$1') 55 | if (!options.br) return false 56 | paused = true 57 | } 58 | } else if (n.nodeType === ELEMENT) { 59 | // Start over when encountering
60 | if (n.nodeName.toLowerCase() === 'br') { 61 | paused = false 62 | dirty = false 63 | } 64 | } 65 | }) 66 | } 67 | 68 | /* 69 | * Internal: iterates *backwards* through all available text and element 70 | * subnodes. Abort by returning `false` on the block. 71 | */ 72 | 73 | function reverseWalk (node, fn) { 74 | for (var i = node.childNodes.length - 1; i >= 0; i--) { 75 | var sub = node.childNodes[i] 76 | if (sub.nodeType === TEXT) { 77 | if (fn(sub) === false) return false 78 | } else if (sub.nodeType === ELEMENT) { 79 | if (fn(sub) === false) return false 80 | if (reverseWalk(sub, fn) === false) return false 81 | } 82 | } 83 | } 84 | 85 | })); // eslint-disable-line 86 | -------------------------------------------------------------------------------- /test/index/unorphan_test.js: -------------------------------------------------------------------------------- 1 | /* global beforeEach, describe, it, expect, unorphan, afterEach */ 2 | var div 3 | 4 | if (typeof process === 'object') require('../setup') 5 | 6 | beforeEach(function () { 7 | div = document.createElement('div') 8 | }) 9 | 10 | describe('unorphan', function () { 11 | it('works', function () { 12 | div.innerHTML = 'hello there world' 13 | unorphan(div) 14 | expect(div.innerHTML).toHtmlEqual('hello there world') 15 | }) 16 | 17 | it('can accept null', function () { 18 | expect(unorphan(null)).toEqual(undefined) 19 | }) 20 | 21 | it('works with text elements', function () { 22 | var text = document.createTextNode('hello there world') 23 | unorphan(text) 24 | expect(text.nodeValue).toHtmlEqual('hello there world') 25 | }) 26 | 27 | it('works with html', function () { 28 | div.innerHTML = 'hello there world' 29 | unorphan(div) 30 | expect(div.innerHTML).toHtmlEqual('hello there world') 31 | }) 32 | 33 | it('works with nested html', function () { 34 | div.innerHTML = 'hello there world' 35 | unorphan(div) 36 | expect(div.innerHTML).toHtmlEqual('hello there world') 37 | }) 38 | 39 | it('works with nested html', function () { 40 | div.innerHTML = 'hello there world' 41 | unorphan(div) 42 | expect(div.innerHTML).toHtmlEqual('hello there world') 43 | }) 44 | 45 | // inherited from https://github.com/rstacruz/unorphan/pull/4 46 | // Thanks @doup! 47 | it('works with one word html', function () { 48 | div.innerHTML = 'hello there world' 49 | unorphan(div) 50 | expect(div.innerHTML).toHtmlEqual('hello there world') 51 | }) 52 | 53 | it('works with line feed in between', function () { 54 | div.innerHTML = 'hello\n there\n\n world' 55 | unorphan(div) 56 | expect(div.innerHTML).toHtmlEqual('hello\n there world') 57 | }) 58 | 59 | it('works with tags after space', function () { 60 | div.innerHTML = 'hello there world' 61 | unorphan(div) 62 | expect(div.innerHTML).toHtmlEqual('hello there world') 63 | }) 64 | 65 | it('works with spaces at the end', function () { 66 | div.innerHTML = 'hello there world ' 67 | unorphan(div) 68 | expect(div.innerHTML).toHtmlEqual('hello there world ') 69 | }) 70 | 71 | it('works with spaces at the end (2)', function () { 72 | div.innerHTML = 'hello there world ' 73 | unorphan(div) 74 | expect(div.innerHTML).toHtmlEqual('hello there world ') 75 | }) 76 | }) 77 | 78 | describe('in body', function () { 79 | beforeEach(function () { 80 | document.body.appendChild(div) 81 | }) 82 | 83 | afterEach(function () { 84 | document.body.removeChild(div) 85 | }) 86 | 87 | it('works with nodelists', function () { 88 | div.innerHTML = 'hello there world' 89 | unorphan(document.querySelectorAll('div')) 90 | expect(div.innerHTML).toHtmlEqual('hello there world') 91 | }) 92 | 93 | it('works with a string', function () { 94 | div.innerHTML = 'hello there world' 95 | unorphan('div') 96 | expect(div.innerHTML).toHtmlEqual('hello there world') 97 | }) 98 | }) 99 | --------------------------------------------------------------------------------