Search code examples
htmlxmlgoogle-chromeencodingspecial-characters

Low asterisk in HTML


There are a number of asterisk (*) types as you can see here:

http://www.eki.ee/letter/chardata.cgi?search=asterisk

Even now, we can see that some of these characters like the one with the code: "204E" also known as "low asterisk" is not rendered in HTML (at least while using Chrome anyway).

You can see the character here:

⁎ -> ⁎

Other similar types work however:

✢ -> ✢

✣ -> ✣

✤ -> ✤

Of course out of all the possible types, the authors of my input data have chosen ⁎ to work with.

It makes me think it should be somewhat general, because I saw solutions where a tiny image was used instead of this character in the entire HTML document. Needless to say I do not like that approach even a bit.

Is there a way to make this work in HTML? Is this possibly a browser specific issue?

UPDATE:

Internet Explorer 9 and Google Chrome also fail to render this special character.

Firefox and Chromium (Ubuntu) seem to be able to render it.

Please note, that I would like to find a general solution if possible.


Solution

  • This primarily depends on the fonts installed in the user’s system, not on browser (though some browsers, most notably IE, might be unable to utilize all the fonts in the system, as they should). Regarding e.g. U+204E, font support is relatively limited: no font shipped with Windows contains it, whereas Linux systems probably have some font that contains it.

    Using @font-face for some suitable free font, you could make the character display in most computers (excluding basically just those that have font loading disabled). See my Guide to using special characters in HTML.

    In this case, that would probably be overkill, if you just need e.g. a low asterisk. A normal asterisk, in a lowered position, should be sufficient – at least compared with the overall typographic quality of HTML documents. Example:

    <style>
    .low { 
      position: relative;
      top: 0.55ex;
    }
    </style>
    Compare: *&#x204e;<span class=low>*</span>
    

    (Using relative positioning is safer than using vertical-align, directly or via the sub element, since vertical-align usually messes up line spacing.)