Headliner
I find headlines with orphaned words visually unappealing, so here are a few ways to insert a non-breaking space between the last two words of your headlines.
Jekyll / Liquid
Put the following code at the top of your post.html
layout file:
{% capture headliner %}
{% assign words = page.title | split: ' ' %}
{% if words.size < 2 %}{{ page.title }}{% else %}{% for word in words %}{% if forloop.last %} {{ word }}{% else %} {{ word }}{% endif %}{% endfor %}{% endif %}{% endcapture %}
You can then access the new headline data from the headliner
variable.
JavaScript
Ideally, you’ll be able to pre-process your headlines like the above example. However, not everyone has the ability to alter the way their CMS renders data, so I’ve written a small JavaScript file to take care of things on the front end. Just put this in a script file at the bottom of your page, and then add the class .headliner
to any elements that contain headlines.
(function() {
var titles = document.getElementsByClassName("headliner");
for(var i = 0; i < titles.length; i++) {
var headline = titles[i];
var words = headline.textContent.split(" ");
if (words.length > 2) {
var titleLength = words.length
var orphaned = words[titleLength-2] + " " + words[titleLength-1]
words = words.slice(0, titleLength-2)
words.push(orphaned)
var newHeadline = words.join(" ")
headline.innerHTML = newHeadline;
console.log(newHeadline)
}
}
})();
One huge nitpick: This script post-processes your HTML, so headlines may visibly, albeit very quickly, change after the page loads. The processing is fast, so you may not see it happen, but the very fact it’s there may bug some folks, including myself. For that reason, I will, ironically, not be using Headliner; however, I hope someone is able to make good use of it.