A font-free skin for TinyMCE version 4

Since my last post, I’ve been doing another Coursera course, this time one called Computing for Data Analysis, by Roger Peng of John Hopkins University. It was an introduction to the statistical programming language, R, and I wanted to do it because I thought it would increase my potential for answering questions on StackOverflow. Sadly I think there are too many very qualified people watching the topic and the people asking the questions are too sensible for a person with shallow knowledge to be able to pick up points. But it was good, nonetheless. Two of the most generally useful things I learnt were:

• R isn’t suitable for crunching Big Data, because all the data points are held in RAM;
• What ‘lexical scope’ is. (Finally!)

Intriguingly, the final exercise involved analysis of the police records of the 1250 homicides in Baltimore (the home town of John Hopkins) in the period between 2007 and 2012. Is it the university’s policy to encourage distance learning?

Anyway, enough about my life. I thought it would be worth a little post to say what I’ve been doing over the weekend, which is creating a new skin for the popular browser-based HTML editor, TinyMCE. At work we’ve been using the default ‘lightgray’ skin, but we’ve come across a problem with some of our users. What should look like this:

actually looks like this:

It’s not hard to see the problem. All the icons have disappeared, which kinda reduces the usability of the editor.

The reason for this problem is that the icons aren’t normal images, they’re actually characters in a special font which has been embedded using the CSS @font-face rule. This is a nice idea for at least two reasons:

1. you can get lots of images with just one download, and thus load faster,
2. fonts are designed to scale nicely, so they’re a bit like scalable vector graphics, but supported on older versions of I.E.

But unfortunately we have a few users who are using a locked-down installation of Internet Explorer which is set not to download fonts. And, unlike many of the woes relating to developing for IE, this problem isn’t fixed by later versions. IE 11 also allows font downloads to be blocked.

So all I’ve done is create a new skin which uses CSS sprites rather than fonts. I converted the fonts (there are two, one for normal buttons and one for slightly smaller buttons) to sprites using the excellent IcoMoon site, and then edited the icons.less and icons.ie7.less files in the original lightgray skin to refer to the sprite rather than the font. So where there had been a rule like this before:

.mce-i-paste:before          { content: "\e008"; }

I changed it to this:

.mce-i-paste          { background-position: -384px -64px; }

I had to do this for 53 icons, so I’m now quite a lot better at my 32 times table.

The results are pretty good – the only difference between my skin and the original I can discern is that there isn’t an embossed effect on the icons for the font-free skin. It might be possible to fix this by putting a disabled HTML element showing the same image underneath each icon and offsetting the lower image by one 1px. But I am not bothered enough to do this. Besides, 3D effects in UIs are OUT OF FASHION.

Spot the difference – fonty above, font-free below.

I’ve put the skin on my BitBucket. I need to write a readme telling you how to compile it if you need to (although it will actually work if you just put all the code into your TinyMCE skins directory and add skin: ‘lightgraynofonts’ to your tinyMCE.init function) and I need to work out what legal stuff to put in. TinyMCE is under the Gnu Lesser GPL v 2.1, so I would guess that my skin is as well. I do mean to submit it to the TinyMCE site once it’s all been tested by a professional tester.