Displaying non Unicode character on website


I recently run into problem of displaying non Unicode character on an website.

The character is an custom symbol, that has no Unicode value.

Website is done in Wordpress.

Does anyone know maybe how to do this?
There is no option to assign Unicode value for that character now, it's already final product.

Thanks in advanced.


  • Convert it to an image? 
  • That must be some special software you are using this for. Most common software cannot handle not-in-Unicode characters at all -- almost per definition.

    As HTML is firmly built around font encoding conventions (up to the point that a 'proper' web page must have its encoding specified in the HTML header), it cannot display non-Unicode characters. But consider this: even if it could, you'd need to embed your font, else the end users would still not be able to see your special character.

    I agree with the above, an image is realistically the only option.
  • Cory MaylettCory Maylett Posts: 155
    edited April 2019
    It's a hack, but you could create a new, one-character web font, assign your custom symbol to the unicode position of your choice, upload it to your server, link to it from your <head> section, then in the HTML/CSS, surround that character, wherever it appears in the HTML, with a span tag using a CSS class that substitutes the web font you created. If the reader's browser fails to load your web font, of course, they'll see something else where your symbol should be.

    If this special character doesn't need to be inline with the other text or isn't needed that often, it would probably just be best to do it by inserting an .svg file via HTML. For that matter, you could load the .svg as an inline image, but those things can be problematic.

    There is no option to assign Unicode value for that character now, it's already final product.

    If it's a final product and you can't do anything with the text or the layout, there really are no options since it's a done deal.

  • Have you looked for an OpenType feature that might display it? Most font designers would include some way of displaying an unencoded glyph--perhaps via a Stylistic Set or Character Variant. And current web browsers can handle OpenType features very well.
  • I’m not very well acquainted with webfonts, but couldn’t Dusan encode the character in a Private Use Area, or does that create messy situations when trying to implement its use on the web, or it simply doesn’t work?
    Echoing Cory: you note it’s the final product though, so there’s no way to update it? If this is case I agree with making the image. The website itself can still be edited, no?
  • John HudsonJohn Hudson Posts: 1,851
    If you have reliable webfont control and display, then you should be able to apply a Private Use Area codepoint to the character in the webfont. If not, then you probably want to handle it as an SVG graphic.
  • John SavardJohn Savard Posts: 595
    Whether the character is in Unicode or not, if it is in a font, then there is some character code number which causes it to display - unless it's an alternate form that requires use of things like OpenType features to get at it. So I would think the answer to the question depends on the font itself - and, presumably, somewhere the font is described with instructions on how to use it.
  • @John Savard HTML can’t use glyph indexes, only unicodes. I tried it to simplify a font test page...
  • John SavardJohn Savard Posts: 595
    I wouldn't expect that there would be a mechanism in HTML for using the glyph indexes internal to a font. After all, an HTML page might display on an operating system that uses some other type of font entirely instead of TrueType or OpenType.

    But if you can see the mysterious "non-Unicode" character in question by looking at a text file under some circumstances, then that character still has a character position, even if it's not Unicode compliant. Of course, that would almost certainly mean that there would be a Unicode value that displays the glyph.

    You can begin a web page, after <html>, with

    <meta http-equiv="Content Type" content="text/html; charset=Big5">

    possibly adding a / before the final > to be compliant with newer HTML standards, and then the web page can be a file in the Big5 encoding instead of, for example, UTF-8. That's the sort of thing I'm thinking of when I say that web pages aren't slaves to Unicode, they should be able to get at any printable character. But glyphs that aren't connected to characters in a font aren't printable.
  • Here's a hurriedly built example of it being done, like I mentioned in my previous post.
  • There are a few things to consider with Cory's approach.

    1. If the webfont containing the icon(s) fails to load, it'll likely display incorrect glyphs.
    2. The separate webfont should have the same vertical metrics so that it doesn't affect the line height if they're being used inline (as they are in Cory's example).
    I'm of the opinion that you should probably just use an SVG. It'll likely load faster and have more support across browsers/platforms.

  • Cory MaylettCory Maylett Posts: 155
    edited April 2019
    All things considered, the inline .svg solution offered by Matthew is probably best since it can be done through the normal CMS content editor without the need for hacking and loading another font.

    Sizing problems with the .svg can be addressed using CSS min and max width values based on the em size of the text in which it's embedded. Changing the color of the .svg, if desired, gets more complicated, as do certain other things more easily done with text than an image.

    Here's an inline .svg example.
  • Thank you all for suggestions.

    Unfortunately, I was pretty aware there is no clean solution for this before posting the question here. Since I can't edit existing font, solution will probably be with SVG as many of you suggested.

    Also, as someone mentioned using OT features for displaying the character. That would work, yes, in that situation as that method. But for example, if you want to display glyph list (with all characters within single font file), you won't see these characters again, even they are displayed previously trough OT features. It's like you're trying to listen radio station that's beyond regular frequencies, it exists physically, but it's unreachable for listeners.

    Thank you all once again!

  • Adam JagoszAdam Jagosz Posts: 605
    edited April 2019
    For displaying glyph lists maybe you could use something like opentype.js.
  • You could probably even use opentype.js to access the unencoded glyph and render it to an SVG canvas inline. No need to mess about with external files. That seems like the cleanest solution.
Sign In or Register to comment.