Tuesday 14 August 2018

Prevent Widows with PHP and JavaScript

One of the small touches you can add to your website is preventing "widows" in your H1-H6 tags. For those who aren't aware, a widow (in terms of text and headings) means only one word of a title wraps to the next line -- a bit of an ugly sight if you ask me. The way to prevent widows with just text is by adding a   between the last two words of the text instead of a regular space character. Here are two snippets for preventing widows in your website: one using JavaScript and another using PHP!
// With JavaScript var text = text.replace(/\s(?=[^\s]*$)/g, ' ');
// With PHP $text = preg_replace( '|([^\s])\s+([^\s]+)\s*$|', '$1 $2', $text);


As I mentioned originally, widows are not necessarily a bug, but a small visual quirk that just doesn't look great. Keep these regex usages handy so you can prevent such a smudge!

0 comments:

Post a Comment