Text Field fails to render certain Unicode characters

[EliteMasterEric]

Text Field fails to render certain Unicode characters

[joshtynjala]

I wonder if the Arial font actually includes the ⌘ character, or if other native apps (including web browsers) automatically detect special characters and fall back to a different font when needed. I know that emoji are stored in a separate font, so certain other special characters might be too.

[scanline]

The looped square char (U+2318) is not included with Arial.
https://www.fileformat.info/info/unicode/font/arial/list.htm

Chrome for instance falls back to the Cambria Math font which includes it.
https://www.fileformat.info/info/unicode/font/cambria_math/list.htm

[joshtynjala]

As far as I know, OpenFL's TextField doesn't currently have a mechanism for falling back to another font for any kind of special character.

Interestingly, Flash Player and AIR on macOS (just a quick test... I didn't try on Windows or Linux) can render the ⌘ character when specifying Arial (I also saw it with Verdana and Courier New), so it seems to have some kind of fallback capability.

[nanjizal]

https://www.fileformat.info/info/unicode/char/2318/fontsupport.htm
If you have a swf asset I am sure I used to have an html textfield and manually put all the characters in it and set to embedded. You can then on populating content convert to html.
Found this.
https://divillysausages.com/2011/02/17/as3-font-embedding-masterclass/
It seems to mention that flash treats some char as symbols so the fall back mentioned for pure flash.
If you manage to get the font in your code you could try something like

var textString = '....';// your text here
var tf = new TextField( 100, 100 );
addChild(tf);
var beginArial = '<FONT FACE="Arial" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="0">';
var beginCambria =  '<FONT FACE="Cambria" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="0">';
tf.htmlText = beginArial + textString.split('⌘').join( '<\FONT>' + beginCambria + '⌘' + '<\FONT>' + beginArial ) + </FONT>;

another way is with CSS styles setup in code either by trying to reference them in the flash html.
Another approach that may work something like..

tf.defaultTextFormat = arialTextFormat;
var arr = [];
var i = 0;
while(true) {
// becareful of infinite loops should be ok but put a max iter in there on first run.
  var j = textString.indexOf('⌘',0);
  if( j == -1 ){
     break;
    } else {
      arr.push( j );
      i = j +1;
     }
}
for( i in 0...arr.length ){
  tf.setTextFormat( cambriaTextFormat, arr[i], arr[i+1] ); 
} 

Not tried any of this recently and not sure I even have any of my as3 textmangling still to hand and unsure how well will work on openfl but you will need to embed required font/chars.
To check the font of an html textfield that for instance you embedded in the swf with an onscreen textfield you can trace it to help with setting up your dynamically added textfields.

[nanjizal]

signed distance field fonts would allow you to use images with characters you want without trying to hack a char into an existing TTF. Ceramic uses SDF by default I think.
I made a start on porting a simple html one to pure haxe but yet to get round to tackling the gl aspect as likely need to tidy it up, unsure what SDF support openfl/lime has, but in theory the webgl ported if simple enough would be made to work with lime c++/js via a shader. It would likely lack much of flash textfields features as layout is always hard to do very well.

[EliteMasterEric]

Scanline provided the information I needed; here is the same sample on Windows, but using the Inconsolata font.