Fix for unicode symbol

This is a solution to a little issue I was battling with and I want to record it for my future self as I will likely need this again, and again. As someone who has a deep dislike for emojis and preset styling of button-like appearances for some of the nice typographical elements I like to use, I was stuck.

I am using footnotes for both the handbook and this blog ~ I wanted to use the nice backlink arrow symbol as is common in footnotes and use that in the header as backlink to the main site as well. During my protoyping and designing, all worked fine. The handbook showed the symbol as intended on all browsers I tested in, so I thought all would work the same on this site.

But nope… this was not the case for the blog. While all was well on desktop browsers, and on Android, on iOS Safari and its Safari-Clones ~ the symbol (↩︎), described as leftwards arrow with hook, would be displayed as a horrible glossy blue box with a white arrow, brrr…. clashing with my design and being overly heavy and clunky in appearance.

Just look at this comparison… On the left is the display on iOS, yuk! On the right is what I had intended it to be displayed as – same as the desktop version shown.

I tried to address this by changing the code from the various different options out there. Here area few very insightful sites I checked, purely for the sake of reference:
There’s FileFormat.info which looked promising, and then the UnicodePLUS site seemed like it would definitely have a solution… Not even one of my favourite sites, codepoints.net, offered anything that worked.

Going around in circles, trying a seemingly endless number of different code versions for this – I was at the end of my tether. I thought I could only solve it by using a SVG instead. One last hope was asking David ツ who came to my rescue and suggested some other combinations and to my relief – he found the correct one ~ thank you, David!

The solution

As there could be a few settings that might have contributed to this now working and forcing even iOS browsers to obey, here’s the list of parts that is now in place on this blog.

function to remove emojis

For most if not all of the WordPress themes I design and build I add the function to remove any emojis that might appear. Most online publishers and authors I know are not too keen on these childish, overly colourful additions to their content. This function is added to the function.php file and will keep our pages nicely clean and emoji-free! ツ

# ---------------------------------------------------
# remove smileys/emojis
# ---------------------------------------------------
function remove_smileys($bool) {
  return false;
}
add_filter('option_use_smilies','remove_smileys',99,1);

content type meta

To ensure the correct display for the content, the encoding is specific as meta tag in the header.php file of the theme.

<!-- specify character encoding -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

code for symbol

And lastly there is the code for this symbol, the one that seemed to be at the root of the issue. As mentioned, after trying way too many different versions – David suggested the following combo and corrected an error in my initial attemp. And this worked beautifully. This is now added to header.php file of the theme as backlink, and inside the settings of the Footnotes Made Easy plugin.

↩︎

This solution now works via appending the Unicode variation selector character for forcing text, VS15, ︎ the previous character will be rendered as text instead of an emoji. This is the approach I came across thanks to this post: Unicode symbol as text or emoji
And while I couldn’t quite figure it out alone – with David’s help this snippet now ensures the desired display, even on iOS, and works across the whole blog ツ