When designing websites on WordPress, we often encounter the challenge of moving short words, single letters, or symbols (such as quotation marks) to a new line. This can disrupt the aesthetics and readability of the text, creating unwanted “orphans.” In this post, I’ll show you how to modify a PHP function to prevent this issue, which will significantly improve the appearance of your posts and pages.
Understanding and solving the problem of "orphans"
“Orphans” are a typographical term referring to single words, short phrases, or symbols that are moved to a new line, usually at the end of a paragraph. These isolated fragments not only disrupt the visual harmony of the page but can also hinder smooth reading by drawing the reader’s attention to the unsightly arrangement.
Below is an example of a single letter “z” (“from” in Polish) at the end of a line. A small detail, but one that noticeably mars the appearance of the entire paragraph:
To avoid this issue, we can implement a simple modification that helps control how lines break.
Below is a PHP code snippet that we can add to our WordPress project. The two simplest methods for adding snippets, in my opinion, are detailed in a separate article.
function ezpage_prevent_orphans($content) {
return preg_replace_callback('/>[\s\S]*?</', function($matches) {
return preg_replace(
'/(\s)([a-zA-ZąćęłńóśżźĄĆĘŁŃÓŚŻŹ0-9,.!?()\'"]{1,2})(\s)/u',
'$1$2 ',
$matches[0]
);
}, $content);
}
add_filter('the_content', 'ezpage_prevent_orphans');How does the function work?
The ezpage_prevent_orphans function uses regular expressions to find places in the text that may create “orphans.” It then replaces the standard space between the last words of a paragraph with a non-breaking space (nbsp;). Here’s a step-by-step explanation for those interested:
- Applying regular expressions: The function starts by using the
preg_replace_callbackfunction, which searches the entire content of the page or post for text fragments enclosed in HTML tags. This is essential to ensure that our modifications affect only the visible text, not the HTML code. - Identifying modification points: For each found fragment, the function triggers another function,
preg_replace, aimed at identifying places where single words, short phrases, or symbols may be left alone at the end of a line. This particularly concerns short words (one- or two-letter), digits, punctuation marks, and quotation marks. - Replacing spaces with non-breaking spaces: When a potential “orphan” is identified, the function replaces the standard space before it with a non-breaking space (
). A non-breaking space is a special HTML character that prevents the preceding element from being moved to a new line. This ensures that the last words in a line are not separated from the rest of the text. - Automatic application across the entire site: After processing the text fragments, the modified content is returned and displayed on the page. The function is automatically called for each text passing through the
the_contentfilter in WordPress, meaning that every post, page, or other content types will automatically benefit from this modification.
