Displaying non Unicode character on website

Dusan Jelesijevic
Dusan Jelesijevic Posts: 66
in Font Technology
Hello,

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.
Dusan

Comments

  • Bhikkhu Pesala
    Bhikkhu Pesala Posts: 210
    Convert it to an image? 
  • Theunis de Jong
    Theunis de Jong Posts: 112
    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 Maylett
    Cory Maylett Posts: 248
    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.

  • Peter Baker
    Peter Baker Posts: 190
    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.
  • Jacob Casal
    Jacob Casal Posts: 99
    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 Hudson
    John Hudson Posts: 3,229
    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 Savard
    John Savard Posts: 1,135
    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.
  • Georg Seifert
    Georg Seifert Posts: 674
    @John Savard HTML can’t use glyph indexes, only unicodes. I tried it to simplify a font test page...
  • John Savard
    John Savard Posts: 1,135
    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.
  • Cory Maylett
    Cory Maylett Posts: 248
    Here's a hurriedly built example of it being done, like I mentioned in my previous post.
  • Matthew Smith
    Matthew Smith Posts: 90
    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 Maylett
    Cory Maylett Posts: 248
    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.
  • Dusan Jelesijevic
    Dusan Jelesijevic Posts: 66
    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 Jagosz
    Adam Jagosz Posts: 689
    edited April 2019
    For displaying glyph lists maybe you could use something like opentype.js.
  • Simon Cozens
    Simon Cozens Posts: 752
    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.

Categories