https://github.com/threespot/unorphanize
Prevent orphaned words and icons
https://github.com/threespot/unorphanize
Last synced: 7 months ago
JSON representation
Prevent orphaned words and icons
- Host: GitHub
- URL: https://github.com/threespot/unorphanize
- Owner: Threespot
- License: mit
- Created: 2018-03-06T15:07:51.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-09-04T20:48:55.000Z (almost 6 years ago)
- Last Synced: 2025-01-29T03:37:12.243Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://threespot.github.io/unorphanize
- Size: 652 KB
- Stars: 0
- Watchers: 7
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Unorphanize
[](https://www.npmjs.com/package/@threespot/unorphanize)
[](https://travis-ci.org/Threespot/unorphanize)
[](https://coveralls.io/github/Threespot/unorphanize)
Helper function to wrap the last X words in an HTML tag to prevent them from wrapping.
**Caveats**
- This script doesn’t check if text is visible (possible future enhancement)
- Using this inside of links or headings could cause issues in VoiceOver on iOS
- See http://axesslab.com/text-splitting/ for solutions
## Install
```bash
yarn add @threespot/unorphanize
```
## Usage
```js
// ES6 module
import Unorphanize from "@threespot/unorphanize";
// For transpiled ES5 code, import this file:
// import Unorphanize from "@threespot/unorphanize/dist/unorphanize.m";
const nodes = document.querySelectorAll("[data-orphans]");
nodes.forEach(function(el) {
var u = new Unorphanize(el, {
wordCount: 2, // number of words to prevent wrapping [default: 2]
wrapEl: "span", // wrapper element tag [default: "span"]
inlineStyles: true, // Add “white-space: nowrap;” to elements as inline style [default: true]
className: "custom-class", // Custom class to add to wrapper [default: ""]
append: "" // HTML to append to wrapper [default: ""]
});
});
```
**Example:**
```html
First second third fourth fifth sixth.
```
**Becomes:**
```html
First second third fourth fifth sixth.
```
---
To support setting `wordCount` in the HTML, you could do something like this:
```js
import Unorphanize from "@threespot/unorphanize";
const nodes = document.querySelectorAll("[data-orphans]");
nodes.forEach(function(el) {
const options = {};
// Check for custom word count
const wordCount = el.getAttribute("data-orphans");
// Set custom word count if defined (defaults to 2)
if (wordCount) {
options.wordCount = wordCount;
}
var u = new Unorphanize(el, options);
});
```
**Example:**
```html
First second third fourth fifth sixth.
```
**Becomes:**
```html
First second third fourth fifth sixth.
```
---
We recommend using a **custom class** instead of inline styles to allow wrapping in small viewports.
```js
const nodes = document.querySelectorAll("[data-orphans]");
nodes.forEach(function(el) {
var u = new Unorphanize(el, {
inlineStyles: false,
className: "nowrap"
});
});
```
**Example CSS**
```css
@media all and (min-width: 320px) {
.nowrap {
white-space: nowrap !important;
}
}
```
**Example HTML:**
```html
First second third fourth.
```
**Becomes:**
```html
First second third fourth.
```
## License
Unorphanize is free software and may be redistributed under the terms of the [MIT license](https://github.com/Threespot/unorphanize/blob/master/LICENSE.md).
## About Threespot
Threespot is an independent digital agency hell-bent on helping those, and only those, who are committed to helping others. Find out more at [https://www.threespot.com](https://www.threespot.com).
[](https://www.threespot.com)