Unicode Ornaments in HTML

Question

I'm working with the font Klavika. Using the Glyphs window in Adobe Illustrator, I can see that the bullet symbol in unicode (U+2022) has multiple ornaments that are circles with arrows inside. It's listing the Unicode as U+2022 ornm34, for example.

I know that the bullet itself is • in pure HTML, but I can't find anything about if or how to use glyph ornaments in HTML.

Any insight on how to do this - or why it can't be done - would definitely be appreciated!

Answer 1

OpenType alternate glyphs like ornaments can be selected through CSS font-feature-settings. This is relatively new and still needs prefixes in some browsers, eg:

.right-arrow-bullet {
    font-family: "Klavika";
    font-feature-settings: "ornm" 34; 
    -webkit-font-feature-settings: "ornm" 34;
}

<span class="right-arrow-bullet">•</span>

(In future it is likely that font-variant-alternates/@font-feature-values will be a better way of doing this, but support is poor today.)

In general your page shouldn't rely on this picking an alternate glyph. The user may see a normal bullet depending on their browser and font preferences. This is fine if you are using the character as a fancy-looking bullet, but if the arrow/direction is of semantic significance, you should instead use a real Unicode arrow character, with appropriate styling.