Fixing orphans on responsive websites
By Michael Argentini
Managing Partner, Technology and Design
In a previous blog article I talked about our recent migration to Ghost as the publishing platform for our blog. One of the needs we had was for a user experience that was as good as something we'd create for ourselves. So the attention to detail was important. During QA testing we discovered that Ghost doesn't allow markup or HTML entities in post titles, so we had no way of controlling orphans.
An Orphan Looks Like
Yuck. In the example above, I'd include "Like" on the second line, so it looked like this:
An Orphan Looks
Basically, it scans an object with the selector "h1.posttitle_fynydd_blog a" or "h1.articletitle_fynydd_blog" and fixes orphans using non-breaking spaces. It evaluates whether the output device is a phone or not (based on a virtual viewport width of 375 points) and if so, it cuts the desired size in half. It only processes the text if the overall length is greater than the desired orphan size * 2 AND there are 3 or more words. It will keep appending orphans until a desired length is reached. I also added a hack to handle fixing "OS X" wrapping anywhere.
I can see this evolving to better handle in-line wrapping, like processing proper names (perhaps based on a dictionary or capitalization rules).
You can see this at work on our blog (right here!).
Article last updated on 4/21/2018