What’s an orphicon?
Don’t worry. We’ll get there… it’s story time first.
The other day at work I noticed some external links in the sidebar of the page I was working on… you know, those links that go to somewhere else on the internet. I thought, It’d be nice to know at a glance which links stay within the site (local or “internal”) and which ones navigate offsite (external).
That’s easy to do! I told myself. There are a zillion ways to indicate this, but I really wanted a trailing icon. Fortunately, in my project all the local links are constructed using vue-router which means only the external links will have the http or https part, like this:
// HTML <a> anchor tag
<a href="https://cssbites.com/save-the-orphicons">read this</a>Which gave me a natural and predictable hook without needing to alter any existing view code. So, I popped a style into the mix and, sure enough, my external links were accompanied by little icon arrows.
// CSS attribute selector with pattern matching
a[href^='http']::after {
content: '\f14c';
font-family: 'Font Awesome 5 Pro';
}It was convenient (in my case) to hook into the href pattern. But this could be any attribute and value, or a classname, or aria attribute… whatever makes sense for the context.
Right away, though, I noticed a problem. The icons on these links were getting a bit too cozy with the text. In fact, the icons were suffocating the last letter in the last word of the linked text. “That’s an easy fix.” I reassured myself, “Just add a space in there. Like this:
content: ' \f14c';
^I thought I was done and ready to move on with my day. An all-staff email went out announcing some lunch-time-meeting left-overs in the kitchen upstairs. If I wait more than five minutes to react to those, it’ll be too late. The scavengers are plenty and they are fast. The remains are usually some soggy croutons, wilted lettuce, and the hard bits of overcooked chicken chunks.
One last thing, I thought before sprinting to the bounty of free left-overs, “What if there’s not enough room for the text and the icon, and it wraps to the next line?
“That’s easy to do!” he said. “Just add this real quick.” he said. “That’s an easy fix.” he said. Famous last words. Here’s the thing: I care about the details. I care about not suffocating text and not settling on inappropriate white space. I care about the widows and the orphans. I care about the user’s experience and not presenting to them an icon that wraps to the next line all by itself—it just looks weird and feels icky. Easy or not, I should know by now that “easy” isn’t a real thing when you care about something.
Cool story, bro. So, what’s an orphicon?
I call these orphaned icons that wrap all alone on the next line “orphicons” because that sounds cool and elite and super word-nerd dorky. This idea of abandoned text harkens back to typesetting days—widows and orphans are short lines of text or single words that are left alone either at the beginning or end of a column or block of text.
Now, there are a handful of ways to solve this to prevent the ::after icon pseudo-element from wrapping all lonely-like. Most of those ways involve adding superfluous markup which will most likely be hard to enforce in a “more than one person” team, as well as managing corresponding classes so white-space:nowrap has a home… this just adds to the overhead and cognitive load on developers. Or, this necessitates introducing arbitrary padding and negative margin values as well as any specific or use-case overrides because the first ones didn’t hold up with text size adjustments in a bullet-proof or predictable way. Or, managing image assets and using the background-image and background-position properties, which if you are already using background styles on your links… have fun with that one!
If you are using a font-icon library of some sort (I’m not opening this up for debate on the use or abuse of font-icons), then you don’t have to deal with background hacking, or calculating acceptable arbitrary values for padding and width and negative margins as the icon will be sized to whatever text size is that it gets applied with.
And, how do we save the orphicons?
Easy. We use another, very special unicode glyph. We can save these orphicons and protect the last word from being suffocated! This glyph is most commonly known as a “non-breaking space,” or the HTML character entity
In unicode it’s U+00A0 and referencing unicode values in CSS looks like: \00a0
You may hove noticed the \f14c in the content:'\f14c' part of the ::after pseudo-element style and wondered what that is? It’s the unicode value for one of the Font Awesome icons in their font set. Here’s a great post about that.
Okay, back to saving the orphicons… by using the unicode non-breaking space glyph, we effectively let the last word breathe and prevent the pseudo-element from wrapping all on its lonesome.
CSS Bite
a[href^='http']::after {
content: '\00a0\f14c';
font-family: 'Font Awesome 5 Pro';
line-height: 0;
}Fun fact: if there’s an overall line-height on the content, the existence of these icons will likely cause the lines of text to shift a smidge when they wrap (orphaned or not) so setting line-height:0; for the pseudo-elements prevents that shift from happening.
Playground