Embedded fonts

[brunoja]

Hello! I am trying to use a font here, but when it is displayed I think the display result is not very smooth :eek:

Look what I am doing to create a text field:


[Embed(source="../Rrc/Fonts/Alleg.ttf",fontFamily="Alleg")]
private var allegFont:String;

private static var alleg:TextFormat = new TextFormat();

public function Depot()
{
alleg.size = 10;
alleg.font = "Alleg";
}

static public function createTextField(text:String):TextField
{
var result:TextField = new TextField();
updateTextField(result,"The quick brown fox jumped over the lazy dog.");
return result;
}

static public function updateTextField(result:TextField,text:String):void
{
result.embedFonts = true;
result.autoSize = TextFieldAutoSize.LEFT;
result.antiAliasType = AntiAliasType.ADVANCED;
result.defaultTextFormat = alleg;
result.selectable = false;
result.background = true;
result.text = text;
}Yes, I instantiate somewhere the Depot class (depot = new Depot()).

Here is the result:
http://img3.imageshack.us/img3/6838/badoo.png
And this is how it should be:
http://img199.imageshack.us/img199/430/goodpn.png

I am using a ttf font, it can be found here: http://www.dafont.com/ernest-borgnine.font

Maybe I should disable anti-aliasing? I coundt find how :/
Thank you for help :p

[creatify]

try removing result.embedFonts = true;

[brunoja]

Then my embedded font is not used :/
Result:
http://img200.imageshack.us/img200/860/stillbad.png

[creatify]

hmmmm, I did a test with a pixel font by importing it into the library versus the script embed and it worked fine. I don't usually embed fonts with the meta embed. Is your text field dynamically generated or is it on the stage?

[wvxvw]

Try [Embed ... advancedAntiAliasing="false" gridFitType="pixel"]
I'd be interested to know if it helped, and if it did (not) then what SDK is being used.

[kadaj]

Check this


private static var alleg:TextFormat = new TextFormat("Alleg", 10);

static public function createTextField(text:String):TextField
{
var result:TextField = new TextField();
result.setStyle("textFormat",alleg);
updateTextField(result,"The quick brown fox jumped over the lazy dog.");
return result;
}

static public function updateTextField(result:TextField,text:String):void
{
//result.autoSize = TextFieldAutoSize.LEFT;
//result.antiAliasType = AntiAliasType.ADVANCED;
//result.defaultTextFormat = alleg;
result.selectable = false;
//result.background = true;
result.text = text;
}

[brunoja]

wvxvw (http://www.kirupa.com/forum/member.php?u=36406), I tried your method, and I couldnt use the 'gridFitType="pixel"' because I got this error: transcoding parameter 'gridFitType' is not supported by 'flex2.compiler.media.FontTranscoder'. Using only the 'advancedAntiAliasing="false"' nothing changed :puzzled:
I am using Flex open source 4.

creatify, I am new to flash, I am adding the textfield with the function addChild, and some times I change its text. I am not using the Flash IDE, I am using some other to edit .as files and compile using mxmlc. Is there any other way to use other fonts?

jase21, I needed to modify this to compile:

var result:TextField = new TextField();
var newStyle:StyleSheet = new StyleSheet();
newStyle.setStyle("textFormat",alleg);
result.styleSheet = newStyle;
updateTextField(result,"The...");
return result;
But without the 'result.embedFonts = true' the default font is used, with it nothing is displayed :x

[wvxvw]

Hi, sorry, my bad, I wrote it from memory and my memory seem to be leaking :)
It's fontGridFitType not gridFitType.
Another thing: Can you make sure the text field is positioned in whole coordinates (all way to the stage, i.e. if you do localToGlobal() for the text field, then the coordinates are integers).
And, if it's SDK4, then, you can also try to embedAsCFF="false", however, if you're using it with TextField that would mean that it is false already...

[wvxvw]

Hi... I finally remembered... no, you cannot embed bitmap fonts in Flex... :(
http://www.gskinner.com/blog/archives/2007/03/bitmap_fonts_in.html
However, maybe you can try SWFMill? I'm not sure it can embed fonts though...

Here are all sorts of results I could get with this font...

OK... I've almost got it working for 10px size... however, kerning is screwed and I cannot save the "Q" letter :(

Here's how I did this:


package tests
{
//{ imports
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.text.AntiAliasType;
import flash.text.CSMSettings;
import flash.text.FontStyle;
import flash.text.GridFitType;
import flash.text.TextColorType;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.TextRenderer;
//}

/**
* TestEmbedErnesFont class.
* @author wvxvw
* @langVersion 3.0
* @playerVersion 10.0.32
*/
public class TestEmbedErnesFont extends Sprite
{
//--------------------------------------------------------------------------
//
// Public properties
//
//--------------------------------------------------------------------------

//--------------------------------------------------------------------------
//
// Protected properties
//
//--------------------------------------------------------------------------
//-advanced-anti-aliasing=false
//-managers flash.fonts.JREFontManager
//--------------------------------------------------------------------------
//
// Private properties
//
//--------------------------------------------------------------------------

[Embed(source = '../../lib/Borgnine.ttf',
fontName='BorgninePixel',
advancedAntiAliasing='false')]
private static var _font:Class;

private var _tf:TextField = new TextField();
private var _tff:TextFormat = new TextFormat("BorgninePixel", 10);

//--------------------------------------------------------------------------
//
// Constructor
//
//--------------------------------------------------------------------------

public function TestEmbedErnesFont()
{
super();
super.stage.scaleMode = StageScaleMode.NO_SCALE;
super.stage.align = StageAlign.TOP_LEFT;
_tf.embedFonts = true;
_tf.gridFitType = GridFitType.PIXEL;
_tf.antiAliasType = AntiAliasType.ADVANCED;
_tff.kerning = true;
_tff.letterSpacing = .1;
_tf.defaultTextFormat = _tff;
_tf.autoSize = TextFieldAutoSize.LEFT;
TextRenderer.displayMode = TextDisplayMode.CRT;
var arr:Array = [new CSMSettings(10, 0.0, 0.0)];
TextRenderer.setAdvancedAntiAliasingTable(
"BorgninePixel", FontStyle.REGULAR, TextColorType.DARK_COLOR, arr);
_tf.text = "Quick brown fox jumped over the lazy dog.";
super.addChild(_tf);
}

//--------------------------------------------------------------------------
//
// Public methods
//
//--------------------------------------------------------------------------

//--------------------------------------------------------------------------
//
// Protected methods
//
//--------------------------------------------------------------------------

//--------------------------------------------------------------------------
//
// Private methods
//
//--------------------------------------------------------------------------
}
}

EDIT2: The last image is the best result I could get for 12px font.

[brunoja]

wvxvw (http://www.kirupa.com/forum/member.php?u=100992), thank you very very very much! You saved my day :D, its working very fine now! I would like to ask what means this lines of code, why them made the font work:


borgineFormat.kerning = true;
borgineFormat.letterSpacing = .1;
TextRenderer.displayMode = TextDisplayMode.CRT;
var arr:Array = [new CSMSettings(10,0.0,0.0)];
TextRenderer.setAdvancedAntiAliasingTable("BorgninePixel",FontStyle.REGULAR,TextColorType.DARK_COLOR,arr);

Thank you again :beer:

[wvxvw]

OK... Kerning is the table of spaces to put in between certain letters to make them visually form a more uniform unit... (Once there ware lead letters used in printing machines, and lines of text ware composed by hand from pieces of metal looking somewhat like a stamp, at that time "kern", I think it's a German word, was a name for a piece of metal to put in between letters).
OK, for example 'AT' need to stand closer together then 'HD' because the space in between the letters is visually bigger. Fonts usually have kerning tables (the list of pairs and an amount of space to move them), however, not all fonts have same tables. I'm not really sure if Flash Player uses the kerning table per font, or tries to use some "average" table.

letterSpacing is simply the measure of space to equally distribute between the characters.

TextRenderer.displayMode = TextDisplayMode.CRT;
This tells the flash player what kind of antialiasing to employ when rendering fonts. CRT monitors antialiase vector graphics (and fonts) differently then LCD monitors (In fact CRT do it better... and are just better monitors in general, however, from business perspective they are not great... so, I think there are no more manufacturers of CRT Flatron monitors left...). Oh, and, that was just by trial an error that I've discovered that even on LCD monitor it makes a tiny difference in display - I don't really know the in-depth explanation of how precisely the rendering algorithm differs.

TextRenderer.setAdvancedAntiAliasingTable(....)
When you call this (for not CFF fonts - i.e. for TextField and components that extend TextField), you tell the player how some specific font should be aliased.
Aliasing is the way it calculates the "blurriness" that it creates in the places, where there aren't whole pixels. I.e. when you try to translate vector curve or slanted line into bitmap, you'll get pixels that neither belong to the line, or the shape it encircles, nor to the outside space completely. Say, the line is black, and the outer space is white, then aliasing would be a function that calculates the amount of gray to put in those pixels.

[brunoja]

I think I got it, thanks, but what is this values: CSMSettings(...). I would like to know what specially made my font appear fine :o

Another question is, The white part of the font is going transparent! How to disable that?

Thank you again!

[wvxvw]

CSMSettings is a business object to store the settings for the font rendering. It has fontSize, insideCutOff and outsideCutOff properties.
fontSize - well, I think it doesn't need an explanation.

Assume we render the black font on white background.
insideCutOff - is a linear measure in pixels for which black may extend the whole pixel boundaries.
outsideCutOff - is the measure in pixels for which white background may extend the whole pixel boundaries.
I would imagine that the algorithm for calculating aliasing would be somewhat similar to ConvolutionFilter (i.e. would use a square X pixels wide and high with some formula for merging the pixel of the square with processed pixel) and then apply this square to every pixel on the vector path.

True Type fonts can only have 1 color, i.e. I think that you cannot have font colored in black and white.
However, I think that if the amount of text allows you may try embedding bitmap images of the font characters and making the text from the bitmaps... Another thing you can try is BitmapData.fludFill(). I.e. you'd have to draw the text into BitmapData anyways, and then you may remove some areas of bitmapdata by making them transparent.

[brunoja]

Thank you again ^-^

I saw on your signature that you support FlashDevelop! Does it has any Linux version? (I am using Ubuntu :p)

[wvxvw]

Well, to my best knowledge - no. I think the efforts ware made, but with no great success... So far I can tell, the code editing part compiles OK with Mono, but the the rest of UI is fairly unusable...
http://www.flashdevelop.org/community/viewtopic.php?f=9&t=3756&p=26323

Try looking here, could be they came up with some usable version, however, AFAIK, it's not there yet...