Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text Field fails to render certain Unicode characters #2669

Open
EliteMasterEric opened this issue Oct 23, 2023 · 6 comments
Open

Text Field fails to render certain Unicode characters #2669

EliteMasterEric opened this issue Oct 23, 2023 · 6 comments

Comments

@EliteMasterEric
Copy link

EliteMasterEric commented Oct 23, 2023

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.

@joshtynjala
Copy link
Member

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
Copy link
Contributor

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
Copy link
Member

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
Copy link

nanjizal commented Oct 28, 2023

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
Copy link

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
Copy link
Author

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

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants