Skip to content
Javascript library to adopt orphaned words at the end of blocks of text.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
src
tests
.gitignore
.gitlab-ci.yml
jest.config.js
package.json
readme.md
rollup.config.js
yarn.lock

readme.md

Adopt-Words

This is a Javascript function that adopts orphaned words.

Demo

Take, for example, the following paragrpah of text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit nisl venenatis efficitur ullamcorper. Pellentesque pulvinar ligula sed fermentum tempor. Etiam rhoncus cursus libero, et interdum turpis volutpat non. Vivamus urna erat, fermentum vel ullamcorper et, mattis pretium leo. Nam pellentesque turpis at facilisis placerat. Nulla suscipit turpis massa, eu vehicula libero ultrices sit amet. Pellentesque sapien erat, condimentum quis risus a, mattis fringilla sem. Phasellus sit amet lobortis felis. Cras nisi sem, accumsan a metus ac, volutpat aliquet purus.

Now imagine that it is wrapped to a narrower viewport:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit
nisl venenatis efficitur ullamcorper. Pellentesque pulvinar ligula sed fermentum
tempor. Etiam rhoncus cursus libero, et interdum turpis volutpat non. Vivamus urna
erat, fermentum vel ullamcorper et, mattis pretium leo. Nam pellentesque turpis at
facilisis placerat. Nulla suscipit turpis massa, eu vehicula libero ultrices sit amet.
Pellentesque sapien erat, condimentum quis risus a, mattis fringilla sem. Phasellus
sit amet lobortis felis. Cras nisi sem, accumsan a metus ac, volutpat aliquet
purus.

That word on its own on the last line is an orphan. It's sad and lonely, poor thing. Let's adopt it.

let paragraph = AdoptWords.adopt('Lorem ipsum dolor sit amet... volutpat aliquet purus.')

Here's what we get back:

Lorem ipsum dolor sit amet... volutpat aliquet purus.

Adoption also works on string containing HTML tags. For example:

AdoptWords.adopt('<p>Here is some <strong>text with a <a href="#">link</a></strong>.</p>')

gives us:

<p>Here is some <strong>text with a&nbsp;<a href="#">link</a></strong>.</p>

Usage

Download the repository and host dist/adopt-words.bundle.js somewhere on your server. Then just include it in your HTML and use it in your scripts. You can use the init() function to automatically apply Adopt-Words to all the selectors on the page; this could be as simple as 'p' or you can include multiple selectors at the same time, e.g. 'p, h3, h2, .adopted, .content li'

<script src="path/to/adopt-words.bundle.js"></script>
<script>
  AdoptWords.init('p')
</script>

ES6

You can integrate Adopt-Words into your own development pipeline by adding it as an NPM dependency:

npm require --dev https://github.com/mafu-d/adopt-words.git#master

Now you can import the library in your code using ESM format:

import AdoptWords from 'adopt-words'

AdoptWords.init('p, h1, h2, blockquote')

const adopted = AdoptWords.adopt('some text')

CommonJS

If you prefer to use the CommonJS format, you'll need to use /dist/adopt-words.js.

const AdoptWords = require('adopt-words/dist/adopt-words.js')

AdoptWords.init('p, h1, h2, blockquote')

const adopted = AdoptWords.adopt('some text')

Caveats

Trailing spaces

Trailing spaces (after punctuation) will be automatically removed, as these cause problems otherwise.

Exceptions

Adoption will not apply to sentences with fewer than 5 words, or where the last word is already really long.

Where the last two words are really short, even when joined with &nbsp;, the last three words will be joined. For example:

This adopts more than you might expect&nbsp;it&nbsp;to.

Testing

A Jest test suite is set up.

npm run test

or

./node_modules/.bin/jest
You can’t perform that action at this time.