Save The Orphicons!

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 &nbsp;

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

Life’s Too Shor… Or, How to Ellipsify Long Text in a Small Container

I know, ellipsify is not a word… but it’s a neologism because the internet, so it’s okay. And I just learned a new word!


The News

Just this morning in the thirty minutes of spinning up and reading the news, I’ve seen the phrase “Life’s too short” at least thre… nope, four times.

I’m not a big believer in coincidence. Everything has a purpose. Although, sometimes that purpose is encrypted and locked behind intricately connected yet discordant things and it may not be obvious.

This morning, that phrase made me want to shut down my computer, get out of my cubicle, and live like today was my last day alive! Except… what would I do? What do I want to do?

Ugh…

In lieu of knowing the answers to those questions, here’s a bit about how to use CSS to truncate text that’s too long for its container: text-overflow: ellipsis

But! It’s not that simple. That won’t work by itself. Sometimes a CSS property is more like the drummer in rock band than a solo hipster doing that coffee shop guitar thing while everyone just wants to be able to hear each other and not have to put up with some whatever songs about his narcissistic metamorphosis of the heart, or how work is just a peanut butter sandwich with no jelly, or whatever.

Anyway, Here’s How to Make It Work

The magic happens when the three properties of my .ellipsis class work together in a container that either has a set width, say, by your mom, or by an outside force that renders it too small for its content, like some responsive layout mechanics.

CSS Bite

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

The Break Down

  • The overflow: hidden hides the inner stuff that doesn’t (or won’t) fit.
  • The white-space: nowrap prevents the content from wrapping at natural breakpoints.
  • The text-overflow: ellipsis tells the content how to be decorated when the non-wrapping text gets clipped by the overflow: hidden directive.

Playground

But What About…

This method of truncating text purely with CSS works for lots of cases. However, it does not work when you want multiple text lines (white-space: normal) and want an ellipsis at the end of a certain number of words or characters. To do that, javascript (jQuery, Angular, etc…) would need to hijack the text and fiddle with it, or something on the server-side of things would have to deliver that from the get-go.

For more complicated and probably more robust JavaScript solutions, and other things about ellipses, check The Goog.

Yay! Dots!