How to Flip a Glyphicon in CSS (Bootstrap)

Bootstrap has a small set of Glyphicons, but they don’t have a clockwise and counterclockwise rotation icons. They do have a refresh icon, which looks just like a clockwise rotation icon, so I wanted to use that and just flip it for use in both situations. This snippet will allow you to mirror the icon. I’m using Bootstrap 3 with the stock Glyphicons.

Just add the .flip-glyphicon class to your Bootstrap button.

An Easy Way to Obfuscate Your Email on a Website

I was looking for a quick way to hide my email from spam bots on my website. I was looking for best practices so I loaded up Google and looked for some solutions. I wasn’t 100% happy with what I found so I ended up rolling one myself.

Some research on this site shows that a quick way to do this is to use CSS. It’s a pretty awesome solution, with one big flaw. You provide the reverse of the email address and CSS will reverse it. Sounds like a really easy and clever solution. The problem is that if the user tries to copy the text they will get the reversed and incorrect email address in their clipboard. I only tested it in Google Chrome, so maybe it works on other browsers.

My solution is similar, but I use JavaScript to reverse the string instead of CSS. Bots might become keen to this and you might have to use more advanced techniques like building the email from a string concatenated in different places, but for me this should work well. I use GMail so hopefully Google can filter out the spammers that get passed this.

This script will find all elements marked for our hidden email and get the reversed email from the tag and reverse it to the correct email. It will also add the email to the href attribute and to the element value. Your HTML email might look like this:

The email you want to reach in this example is test@test.com. The reverse of that can be seen in the anchor element value.

Displaying Custom Fonts in HTML5 Canvas

In some browsers custom fonts will not display on the canvas unless they are also rendered somewhere on the page. This is because the browser will not bother to download the custom font file unless it believes it will definitely need it. The browser doesn’t know what fonts will be required by the canvas until it sees the text element created and by that time it is too late.

There are two ways to fix this problem. The first way is the most simple and involves creating a HTML element somewhere on the page that uses the font.

Make sure sure to not use display:none and instead use visibility: hidden. Using display:none will cause the same issue where the browser believes that the font is not being used. I’m also using the same color as the background as a fallback. Your custom @fontface fonts should now display properly in the canvas.

Do you require dynamic font loading?

In a recent project I not only needed to use custom fonts on canvas, but the project required that they be dynamically loaded at runtime instead of on page load. I accomplished this by using a library called Web Font Loader, which is developed by Google and Typekit. It provides many font related features, but the one we are most interested is in the dynamic loading of custom fonts, which you can read about here: Custom fonts.