The typing symbol hack

Do you remember as a kid playing with the Wingdings font of Microsoft Word on Windows 95 ? Personally it’s one of my favourite memories. I used to always activate the font and type on the keyboard to discover which symbols appeared on the screen. Every key was hiding a symbol. I never really understood why this font even existed mixed in with Times New Roman and Arial. It was like a pirate in the navy, discarding any character encoding rule, outputting whatever it wanted, like a crazy font. It seemed very odd that engineers would come up with that since it follows no logic and the use is really not obvious. Anyway, I found it very fun to play with and always ended up making some posters or invites with it. In the end I would do something that approached this :

For some reason, I particularly loved the bomb symbol, it is very unique, I’ve never seen it in any other font. So this is what the hack I want to share today made me think of, typing symbols in my childhood. High moment of almost creativity.

The hack I’m going to present in this article is about the possibility of typing symbols directly in the text you are editing, let’s call it the typing symbol hack.

Intro

Until now, symbols representing this sequence of characters <3 or 🙂 was rendered as a heart and a smiley only after the text was sent or saved and no longer editable. With this hack, characters patterns can be replaced on the fly by their symbols in the text being edited and be a heart or a smiley character thanks to the power of icon fonts.

Previously when the characters were rendered as symbols, the symbols used were plain images, so technically you could also replace the characters by symbol images in the text being edited. However this would mean that you would be editing html and not text, since <img> tags would be mixed in with the text. So to let the user edit plain text (which is always more comfortable than editing html) it was preferable to render the text with symbols after it is no longer editable.  Now with this hack, the big advantage is that symbols appear in the editable text as plain characters fully part of the text, so even if symbols appear, you will still be editing plain text.

View the demo <- here.

The purpose of my article is to present how the hack works and how it is useful, with a macro view.
So first, how does it work?

How does it work?

To cut to the chase, this hack combines 3 things:

– Icon fonts
– Regexes
– Url encoding

Icon fonts

The principle is that the text that will contain symbols needs to be rendered by an icon font so that symbols can appear. This is done simply in css thanks to a great feature that allows you to specify several fonts in the font-family css rule. All fonts if they exist will apply for unicodes that don’t overlap. So where you might have thought that declaring :

font-family : Arial, FontAwesome;

would only apply Arial because it exists and will not consider FontAwesome, it will actually apply both fonts. This allows the letter characters to be rendered by Arial, and symbol characters by FontAwesome. This is a feature that you can take advantage of to render symbols in a text, it is very interesting. So the first thing this hack uses is this css :

 input { font-family : Arial, FontAwesome; } 

(properly include FontAwesome first)

Regexes

Then it is plain simple to see how the rest should work. By using regexes, you would only replace this pattern <3 by the unicode FontAwesome defined to represent a heart, so you would replace it by &#xf004; (see the cheatsheet).

So simply put, having &#xf004; in a text rendered by an Icon font such as FontAwesome, will output a heart on your screen. It seems very simple at first sight, but it is quite an advancement that you can do that, it offers new possibilities for text editing.

Url Encoding

Finally, only replacing characters by symbols is pretty but it doesn’t do any real stuff. A more interesting feature would be if you could actually count the symbols, they would become a bit more useful this way. Once a symbol is rendered as a symbol you will hardly get back its html code because it has become a character. So to count the symbols, just url encode them! Url encoding allows to distinguish symbols, it is very practical. Now what to do with all that?

How is it useful?

Seeing symbols appear in your text can be useful for 2 reasons (that I see for the moment):

– it is more pleasant to see the symbol you intended to type rather than just a sequence of characters, it improves the UI
– symbols can be used to capture a certain type of information right from the keyboard, they’re not just decorative, it also improves the UI to capture data

View an example <- here.

The symbolTyper library

At the origin I only intended to present this hack for just what it is, but in the end I transformed it in a library since I see myself using it for real stuff soon and I find the hack quite cool, like I said it reminds me a lot of Wingdings. You can play with the library to find new ways of editing text.

View the symbolTyper library <- here.

I hope you find it cool too.