Using Unicode in HTML Lists

9/29/2016

Unicode is an international encoding standard for use with different languages and scripts, by which each letter, digit, or symbol is assigned a unique numeric value that applies across different platforms and programs. It is great for displaying unusual characters that do not appear on your keyboard.

Since the Unicode Consortium is an ongoing project that is constantly updated, some of the Unicode used on this page may not appear on all platforms. During my testing, it viewed best on a smart phone even though two of the Unicode characters did not render.

There are several ways of doing lists in HTML. Let's play around with some of them while looking at their use.

Let's start out with just HTML and see how nice we can make our lists look.  We'll take a look at ordered, unordered, and description lists. Ordered lists have numbers, unordered lists have bullet points, and description lists have nothing.


So a simple ordered HTML list looks like this:

Example

  1. Item one
  2. Item two
  3. Item three

Code

<ol>
   <li>Item one</li>
   <li>Item two</li>
   <li>Item three</li>
</ol>

A simple unordered list looks like this:

Example

  • Item one
  • Item two
  • Item three

Code

<ul>
   <li>Item one</li>
   <li>Item two</li>
   <li>Item three</li>
</ul>

So now let's play around with our lists by taking out the default numbers and bullets and seeing what we can come up with to give our lists a little pizazz.

We could use various items such as icons, glyphicons, unusual fonts, or images like gif, png or jpg. But in this article we'll use Unicode, which has been around for many years and continues to be necessary for use especially in browsers. Unicode is like a True Type Font in that is vector graphic, which means it adjusts to any size without degrading or pixelating, like bitmaps do.

In spite of the fact that I am using an American Standard keyboard, Unicode allows me to display characters in a non-Latin character set or math symbols. Unicode is widely used for that purpose, although folks who deal with math and science usually use software such a LaTex, ConTexT or another of the various typesetting systems.

Unicode provides a unique number for every character, no matter what the platform, program, or language. For more information on Unicode, take a look at links below for other resources.

Simply put, Unicode allows the display of characters across any platform. What we will use here are the equivalent Unicode characters to the font called Wingdings and since we are using Unicode, they will appear in any browser. Keep in mind, not every character with render in whatever browser you are using. As mentioned above, this is an ongoing project.

See the related links area below for some usable lists of Unicode characters. Also, go to the Unicode Consortium (see below) and take a look at the multitude of character sets and play around with some of the numbers yourself.

We will focus on two methods of adding Unicode as bullet points for lists.

Method 1: Adding Unicode to your HTML in regular text or in the list item itself is done by typing "& # the Unicode decimal number and ;" without the spaces. Unicode uses both Decimal and HEX numbers, so if you need to use the hexadecimal number you would add an x before the number by typing "& # x the Unicode hex number and ;" without the spaces. This is the method you would use for multiple Unicode characters on a single page when directly adding them to your HTML. As a side note, if your bullet lists are short and you are not concerned about the line breaking over, you don't need the rest of this CSS stuff.

An example of this method: &#10048; displays ❀ using decimal and &#x2740; displays ❀ using HEX.

The aesthetic purpose here is would be finding a fitting Unicode character for the article we are working on. The daisy example might be nice in an article about flowers, but then again it's always good to remember that fonts, styles and formatting, if they are overdone, can take the focus off the article itself.

Method 2: As programmers would say, this is the more elegant way. Adding a single character in CSS will make both the bullet point and the list display properly. We will add the CSS to remove the pre-defined HTML bullets and to style the list so that if the text breaks over into a second line, the line will be indented. We'll also place the Unicode character number, just the decimal number within the CSS. This will change every list on that page to the same bullet character, unless you are using class selectors. Class selectors are a topic for another article.

Adding the CSS below will result in long lines indenting properly and add the Unicode character ➥ as the bullet. In the example CSS, the Unicode arrow is \27a5 is shown in red and the \0020 is a space. The comments are in green. You can copy/paste from here.

CSS

<style> 
    ul {
        list-style: none;   <!--removes the default bullet -->
        margin-left: 0;   <!--sets the bullet all the way left -->
        padding-left: 1.2em;   <!--sets the list text to the right -->
        text-indent: -1.2em;   <!--indents the list text -->
    }
    li:before {   <!--puts the content below before the text of the line -->
        content: "\27a5 \0020";   <!--this content is the arrow and a space -->
    }
</style> 

Result

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in finibus turpis, sed iaculis nunc. Morbi tempus bibendum ante.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in finibus turpis, sed iaculis nunc. Morbi tempus bibendum ante.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in finibus turpis, sed iaculis nunc. Morbi tempus bibendum ante.

The Unicode Consortium link below has many available sets of Unicode characters. Some of them may not be visible on all platforms. Below are some examples of ordered and unordered lists. This is an area of HTML you can be artistically subdued or completely wacky. I am showing method 1 with inline code.

Examples

Arrows
  • ➢ Item one1
  • ➠ Item two
  • ➦ Item three

Stars
  • ✪ Item one
  • ✡ Item two
  • ✧ Item three

Over the top
  • 🦁 Item lion
  • 🤡 Item clown
  • 💀 Item scary

Circles
  1. ⓵ Item One
  2. ⓶ Item Two
  3. ⓷ Item Three

Dice
  1. ⚀ Item One
  2. ⚁ Item Two
  3. ⚂ Item Three

Mahjong
  1. 🀙 Item One
  2. 🀚 Item Two
  3. 🀛 Item Three

Code

Arrows
<ul>
   <li>&#10146; Item one</li>
   <li>&#x27a0; Item two</li>
   <li>&#x27a6; Item three</li>
</ul>
Stars
<ul>
   <li>&#x272a; Item one</li>
   <li>&#x2721; Item two</li>
   <li>&#x2727; Item three</li>
</ul>
Wacky
<ul>
   <li>&#x1f981; Scary lion</li>
   <li>&#x1f921; Scary clown</li>
   <li>&#x1f480; Scary Scary</li>
</ul>
Circles
<ol>
   <li>&#x24f5; Item One</li>
   <li>&#x24f6; Item Two</li>
   <li>&#x24f7; Item Three</li>
</ol>
Dice
<ol>
   <li>&#9856; Item One</li>
   <li>&#9857; Item Two</li>
   <li>&#9858; Item Three</li>
</ol>
Mahjong
<ol>
   <li>&#x1F019; Item One</li>
   <li>&#x1F01a; Item Two</li>
   <li>&#x1F01b; Item Three</li>
</ol>

The information we've been looking at is the simple end of Unicode. If you investigate some of the links on the Unicode Consortium website, you'll see that Unicode is still in the future of not only multi-lingual systems, but of multi-disciplines. Web developers must not only write websites in Chinese or Arabic but also must be able to write in the languages and symbols of Chemistry, Mathematics and the like.

A great reason for using Unicode and other types of SVG (Scalable Vector Graphics) is how well they look on very large screens, very small screens and everything in between. To prove it, take a look at this web page on your phone. Also, on your computer, hold down the control key and scroll with your mouse to blow this page up to 500% and take a look at Unicode and fonts on this page. They should be sharp and clear. That is the advantage of using SVG for icons and bullets. Very closely related to Unicode, are glyphs or glyphicons which are also in SVG format and render much like True Type Fonts. The icons in my sidebar are glyphs. For more information on using glyphs and similar icons, see my article here.

Thank you for viewing my article. Please send me a comment here.

Related Articles

The Unicode Consortium

The organization that maintains Unicode, the universal character encoding. This link goes straight to the charts. At the top of the page click on SYMBOLS and then go to the "Emoji & Pictographs" are and try some of those.

Web Link »


Alan Wood’s Unicode resources

I think he has stopped working on the site, but he still have lots of info here.

Web Link »


Tomas Schild - Search Tool

Search for character(s) in Unicode 8.0.0. Use this by typing in a simple name, such as "flag" and it returns all the flag related Unicode.

Web Link »

Categories

Technology  

The saddest aspect of life right now is that science gathers knowledge faster than society gathers wisdom.
~Isaac Asimov

Learn more »


Education  

Education must not simply teach work; it must teach Life.
~W. E. B. Du Bois

Learn more »


On the Web  

The Internet is the trailer park for the soul.
~Marilyn Manson

Learn more »


Christianity  

I gave in, and admitted that God was God.
~C. S. Lewis

Learn more »


Books  

So many books, so little time.
~Frank Zappa

Learn more »


Music  

Ah, Bach! I'm partial to the fugue.
~Walter Radar O'Reilly

Learn more »


Sports  

You can observe a lot by watching.
~Yogi Berra

Learn more »


Projects  

The best-laid schemes o' mice an' men Gang aft agley, An' lea'e us nought but grief an' pain, For promis'd joy!
~Robert Burns

Learn more »