openfl / openfl

The Open Flash Library for creative expression on the web, desktop, mobile and consoles.

Home Page:http://www.openfl.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Text Field fails to render certain Unicode characters

EliteMasterEric opened this issue · comments

commented

Describe the bug
Rendering with OpenFL simply displays a blank space when attempting to display the character .

The issue occurs on Windows and MacOS but not HTML5.

To Reproduce

var format = new TextFormat("Arial", 30, 0xFF000000, null, null, null, null, null, TextFormatAlign.CENTER);
var textField = new TextField();
textField.x = 0;
textField.y = 50;
textField.width = 600;
textField.defaultTextFormat = format;
textField.text = "Keybind is ⌘ + N";
addChild(textField);

Expected behavior
I would expect the Unicode to display correctly.

Screenshots

Windows example:
image

HTML5 example:
image

Additional context
OpenFL 9.2.2

Use case: Creating a user interface for use specifically on Mac, which uses dedicated symbols for its keybinds.

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.

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

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.

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.

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.

commented

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

image