Quick & Easy Guide to Using Emoji in HTML

I truly realized I was an adult this morning when one of my younger colleagues had to explain to me what Snapchat is and how to use it 👴. Previously, my knowledge of Snapchat was limited to their technical background 💻, business story 📈, and IPO 💰. The way that emoji have become a part of language in the US has only been expedited by the proliferation of visually-oriented chat options like Snapchat. So, the time has come as a now almost middle aged web developer to embrace the emoji. But, how to do it? It’s pretty easy when you understand a few key concepts.

HTML Entities

Anyone who’s done much with HTML will be familiar with HTML entities. &,  , < > © etc. are part of your vocabulary. Simply put, these allow you to render special characters that either have special meaning in HTML or aren’t found on most keyboards. The list of HTML entities is generally restricted to “named” entities but, you can actually use a similar syntax to express non-“named” entities using Unicode codes.

Unicode

Unicode is a standard (and the organization behind the standard) that sets out how software should express characters in order to allow different systems to communicate clearly. If you sent an email to a friend asking them to pay you the $10 they owed you but the system they use interprets the “$” character as a “¥” then you’d be pretty upset when they send you 9 cents. Unicode seeks to eliminate these types of issues by making sure characters are consistent across systems. This is important for emoji because Unicode has defined codes for over 2,500 different emoji. These might be rendered differently on different systems (see the Apple gun vs. the more standard one used by Google) but they should be the same element just with different styles.

Unicode + HTML Entities = 😁

All you need to know to get emoji in your HTML is how to write non-named HTML entities using Unicode codes. It’s pretty easy, really:
1. Find the Unicode code of the emoji you want to use. For what Unicode call the “grinning face” this is “U+1F600”
2. Drop the “U+” from the front, that’s just an indicator that it’s a Unicode code. For the grinning face you’d get “1F600”. This is a hexadecimal number.
3. Add that to the HTML entity form for non-named entities with hexadecimal values: &#x—–; and you get 😀 which renders as 😀

Now all you have to worry about is making sure you don’t accidentally use the wrong combination and end up with a sexual innuendo (unless that’s what you’re going for 😉).

Note

  • Unicode’s Full Emoji List is a really useful guide for looking up the Unicode code of over 2,500 Emoji.
  • Not all systems, software, or devices support all of the Emoji but Unicode’s list actually shows you which systems do support each one. It’s likely not up to date but with emoji support increasing it’s more likely to not show one that is supported than to show one that’s not supported so it’s a solid guideline.
  • Since Emoji styles vary between systems, if you want full control of the style used on your site you’ll probably want to grab a CSS Emoji library that’s to your liking.

Generating Barcodes in PHP

I’ve discovered some applications which will allow you to create barcodes in PHP but never came across one which had been issued under MIT license (which allows full use for free, including commercial use, with a few restrictions). All the other applications I had found were quite expensive or licensed only for not-for-profit use.

Then, I stumbled upon this post by David Scott Tufts who had developed a PHP script which will generate barcodes “in four barcode formats including Code 128, Code 39, Code 2of5, and Codabar”. I downloaded his code and tried it out and, sure enough, it worked perfectly for the application I was building! Thanks to David Scott Tufts for saving me a significant amount of time, or quite a bit of money! His solution is quick, accurate, and simple.

To use his script, download his PHP file (he uses the .phps extension on the file to allow download, I believe, so I just changed that to .php before using). Upload the script to your server and use it as follows in your HTML:

<img src=”/images/barcode.php” alt=”barcode” />

Available parameters are:


text=string (Default: “0”)

size=int (Default: “20”)

codetype=(Code128|Code39|Code25|Codabar) (Default: “Code128”)

orientation=(horizontal|vertical) (Default: “Horizontal”)

Text: Should be a url-escaped string (e.g. “%20″ for ” “).

Size: 50 worked well for me. Play around to find the best size for your application, especially if printing.

Code Type: I used Code 128 for my application. The code you use may depend on your application or the scanner you expect to read the barcode with.

Orientation: Self-explanatory. Just make sure your IMG tag widths and heights reflect the orientation correctly.

That’s all there is to it! It took a few minutes to play around with the settings and get something that worked for what I needed, but compared to writing my own script it was a breeze.

Notes:

  1. This script requires PHP’s GD Library to be installed and available on the server.

Debugging CSS Print Stylesheets without Killing Trees

Working on a print stylesheet has been a pain for me to the point where I often don’t even add print styles even to things that ought to have them. Partially this is because it so rarely comes up (either the page is meant to be printed or not… why complicate things) but partially because debugging is such a pain!

However, while working on a page where the content was the same for what should be displayed on the screen and what’s printed, all I needed to do was hide the navigation I realized I needed a solution. Instead of making my changes and printing a new copy for every major change I needed a way to preview my print style in the browser. Then Google provided the answer: they linked to this StackOverflow page where user “danblaker” with the suggestion provided by “ZMorek” solved the problem.

All you have to do is make sure the “print” stylesheet is the last one in your HTML <head>, remove the “media=’print'” attribute from it and add the following to the top of your print stylesheet to set the appropriate size for the document:


BODY {
width: 8.5in;
height:11in;
}

After that, you can see the results of applying the print stylesheet in your browser! You’ll still need to print at least once to make sure everything looks the same in the browser as on the page, but this saved at least a dozen sheets of paper and probably a half-hour of my time.

Remember that if you’re doing this on a production site all visitors will see the results of the print stylesheet so watch out!

Styling HTML Ordered Lists with CSS

Nicely styled OL on KeepAndCastle.Com
Nicely styled OL on KeepAndCastle.Com

As with the previous post, it’s the simple, small things that build your site’s “feel.” As with the HR in the previous post, ordered lists often end up being quite boring despite the range of numbering options. However, again, CSS3 offers us the ability to style these lists in a wide range of ways giving us full control over the lists’ feel.

Here I found Red Team Design‘s article “CSS3 Ordered List Styles” excellent and helpful. While I didn’t use any of the animations they built (they seemed a bit over the top to me, except for the small movement on the rectangle-shaped elements) I did find these examples a great starting point for creating my own styles.

The only issue I ran into that I have yet been able to solve is restarting the numbering on a multi-page list since their examples used CSS3’s counter-reset and counter-increment properties which I don’t fully understand yet.

Styling Horizontal Rules (HRs) in HTML

Beautiful CSS-Styled HTML HR with Code
Beautiful CSS-Styled HTML HR with Code

While the large things (colors, images, content, etc.) contribute to the “look” of your site, it’s the small things that make your site “feel” the way you want. When you’re looking at enhancing the “feel” of your site it’s often good to default styles applied by the users’ browser as much as possible. One place this can be done is with the HR element. Most websites use the horizontal rule in one way another as a way to easily divide content on the site. However, while it’s easy to change the color by setting the CSS “border-color” property, this leaves the same square, blocky look as the default HR. However, with widespread adoption of modern CSS properties, we can now use the “background-image” property to effectively modify the appearance of HRs, while allowing for excellent backwards-compatibility. To that end, I’ve discovered the “Simple Styles for <hr>’s” document at css-tricks.com to be very handy. These styles are beautiful, simple, and useful.

Magento 1.7: The Beginning

In spinning up a new store for keepandcastle.com I decided to go with Magento (the free community edition) because it seems to be an extremely flexible base to build on from a design perspective. I have worked with Zen Cart for about 6 years and enjoyed the speed at which you could spin up a store (you could have a fully running and functional store within 6 hours, if you had a payment processor ready to go) but have been frustrated by difficulties in setting up custom templates or adding functionality because either of these activities seemed to require (sometimes extensive) modifications of core files. Version 2.0 of Zen Cart has been promised for a few years and seems like it would address those issues. However, I wanted to try out a new platform so I chose Magento.

Installing Magento was easy enough, I need a database, a user for that database, and needed to allow write access to a few folders during the installation. It took about 15 minutes all told. This is where I diverged from the simple path, however, since I didn’t want our site to look like very other site out there. This meant creating a new design package and theme. In Zen Cart this was easy (if my theme doesn’t have a needed file, the default is used). In Magento the process took over half an hour and I ended up with absolutely no styling. Since my goal was to be able to style the site myself from the ground up, I celebrated!

I used this guide to walk through the basics, and I’ll post later on how easy it was to add my own styles and functionality. However, at the moment, I have an non-functioning but entirely unstyled site to work with. We’ll see how it goes from here!

Using HTML5 Audio Tags: Not as Easy as You Might Think

The HTML <audio> tag is a relative newcomer amongst the HTML tags we use regularly. It was introduced to help correct what seemed to many, myself included, like a major oversight of the modern web: native audio support by browsers. A wide variety of image formats have been available via the <img> tag since soon after HTML was initially developed, but digital audio and video were initially too heavy to be used in HTML pages intended for the public. However, today we finally have both an <audio> tag and a <video> tag. Problem solved, right? Nope. Unfortunately, there are still a number of bugs to work out, mostly with browser interoperability. The root of this issue is a lack of a standard file format.

But, I’m a modern web developer. I’m not going to use some Flash shiv to get my page playing audio! It took some troubleshooting but here’s how I did it:

First of all, it’s important to know a bit about how the <audio> tag works. It can either stand alone or act as a container. A standalone audio tag would look like this and appear familiar to any web developer:

<audio src="bach_brandenburg_5-1.mp3" controls preload="auto" autobuffer></audio>

You’ll recognize the “src” attribute, of course. The “controls” attribute tells the browser whether it should render controls for the audio element or if that will be handled by the page (i.e. Javascript). The “preload” attribute set to auto tells the browser to automatically preload however much of the audio file it feels is appropriate. “Autobuffer” does the same thing as ‘preload=”auto”‘ but it has been deprecated in favor of preload.

The above tag will show controls for an audio file, buffer it, and allow it to be played. If only it were that easy. This will only work in IE 9+, Chrome 6+, and Safari 5+. In Firefox, Opera (although this may change with the switch to Webkit), or any older browser it will silently fail.

The problem is that neither Firefox nor Opera support MP3 as a file format. In fact, there is currently no single file format which can be played natively by every modern browser. IE, Chrome, and Safari can handle MP3, Chrome, Firefox, Safari, and Opera can handle WAV (but do you really want to use WAV?), and Chrome, Firefox, and Opera can handle OGG. So you’ll need both an MP3 and an OGG copy of every audio file you want to use. I used media.io to convert my MP3s to OGGs.

You might think we’re going to get into Javascript browser sniffing here so that we can serve the correct file but, thankfully, the solution is simpler than that. Here’s the final code I ended up using:


<audio controls preload=”auto” autobuffer>
<source src=”bach_brandenburg_5-1.mp3″ />
<source src=”bach_brandenburg_5-1.ogg” />
    Unfortunately your browser does not support our audio formats.
</audio>

It turns out that the <audio> tag can be the container for multiple <source> tags each of which can define a different format. The great thing here is that so far in testing, all the browsers I’ve used have simply ignored the formats they couldn’t read and played the one they could. The text is a fallback if the browser fails to render the audio controls (old browsers, mostly).

This worked for me, although the site I used it on doesn’t rely heavily on the audio being available so we were fine with the text fallback, however, if audio is a critical part of what you do you’ll likely need to look into either a Javascript or Flash or hybrid solution. For me this solution was perfect as <audio> support is only getting better.