GhostWire Studios - Flash/Flex UI Components Development And Consulting Services
Quality User Interface Controls For Flash Application DevelopmentAspireUI Components

Jul 10 2009

Using uiTextStyles: Defining Faux Bold Weights (Embedded Fonts)

Published by at 6:30 am under Aspire UI,Flash,Tips

Yesterday, the Aspire UI library was updated to version 1.2.0. Among other changes, we have also implemented support for faux bold weights for embedded fonts.

Faux bold is “fake” bold. It is an efficient way to display text in the same typeface but with different weights (bolder, thinner, etc.). It can be used as an alternative to the real bold font, or used in combination with the real thing.

Sometimes, the bold version of a font simply doesn’t exist so this is also where faux boldness comes in. Or, you can use this feature to make the typeface thinner (rather than bolder).


The “weight” Property
The “weight” property is defined in CSS just like the other text formatting properties:

specialstyle
{
	color:#FFFFFF;
	weight:200;
}

If you prefer to define the style within your application code using ActionScript:

	uiTextStyles.manager.setStyle("specialstyle",{color:"#FFFFFF",weight:200});

The value of the ”weight” property should be a value between -200 to 200. To make the font thinner, use a negative number. To make the font bolder, use a positive number.

You can also use some predefined values when specifying the ”weight” property:
“bolder” is equivalent to 200
“bold” is equivalent to 100
“thin” is equivalent to -100
“thinner” is equivalent to -200


Example
uiTextStyles Faux Bold

import com.ghostwire.ui.controls.uiText;
import com.ghostwire.ui.managers.uiFonts;
import com.ghostwire.ui.managers.uiTextStyles;
 
uiTextStyles.manager.setStyle("styleA",{fontFamily:"DejaVu Sans",fontSize:16,weight:"thinner"}); // -200
uiTextStyles.manager.setStyle("styleB",{fontFamily:"DejaVu Sans",fontSize:16,weight:"thin"}); // -100
uiTextStyles.manager.setStyle("styleC",{fontFamily:"DejaVu Sans",fontSize:16});
uiTextStyles.manager.setStyle("styleD",{fontFamily:"DejaVu Sans",fontSize:16,weight:"bold"}); // 100
uiTextStyles.manager.setStyle("styleE",{fontFamily:"DejaVu Sans",fontSize:16,weight:"bolder"}); // 200
 
// ** faux bold weights can also be combined with true bold **
uiTextStyles.manager.setStyle("styleAb",{fontFamily:"DejaVu Sans",fontSize:16,fontWeight:"bold",weight:"thinner"});
uiTextStyles.manager.setStyle("styleBb",{fontFamily:"DejaVu Sans",fontSize:16,fontWeight:"bold",weight:"thin"});
uiTextStyles.manager.setStyle("styleCb",{fontFamily:"DejaVu Sans",fontSize:16,fontWeight:"bold"});
uiTextStyles.manager.setStyle("styleDb",{fontFamily:"DejaVu Sans",fontSize:16,fontWeight:"bold",weight:"bold"});
uiTextStyles.manager.setStyle("styleEb",{fontFamily:"DejaVu Sans",fontSize:16,fontWeight:"bold",weight:"bolder"});
 
uiFonts.manager.load("DejaVu Sans");
 
var displayTextA:uiText	= new uiText();
displayTextA.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextA.text	= "The quick brown fox jumps over the lazy dog.";
displayTextA.textStyle = "styleA";
addChild(displayTextA);
 
var displayTextB:uiText	= new uiText();
displayTextB.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextB.text	= "The quick brown fox jumps over the lazy dog.";
displayTextB.textStyle = "styleB";
displayTextB.move(0, 20);
addChild(displayTextB);
 
var displayTextC:uiText	= new uiText();
displayTextC.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextC.text	= "The quick brown fox jumps over the lazy dog.";
displayTextC.textStyle = "styleC";
displayTextC.move(0, 40);
addChild(displayTextC);
 
var displayTextD:uiText	= new uiText();
displayTextD.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextD.text	= "The quick brown fox jumps over the lazy dog.";
displayTextD.textStyle = "styleD";
displayTextD.move(0, 60);
addChild(displayTextD);
 
var displayTextE:uiText	= new uiText();
displayTextE.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextE.text	= "The quick brown fox jumps over the lazy dog.";
displayTextE.textStyle = "styleE";
displayTextE.move(0, 80);
addChild(displayTextE);
 
var displayTextAb:uiText	= new uiText();
displayTextAb.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextAb.text	= "The quick brown fox jumps over the lazy dog.";
displayTextAb.textStyle = "styleAb";
displayTextAb.move(0, 105);
addChild(displayTextAb);
 
var displayTextBb:uiText	= new uiText();
displayTextBb.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextBb.text	= "The quick brown fox jumps over the lazy dog.";
displayTextBb.textStyle = "styleBb";
displayTextBb.move(0, 125);
addChild(displayTextBb);
 
var displayTextCb:uiText	= new uiText();
displayTextCb.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextCb.text	= "The quick brown fox jumps over the lazy dog.";
displayTextCb.textStyle = "styleCb";
displayTextCb.move(0, 145);
addChild(displayTextCb);
 
var displayTextDb:uiText	= new uiText();
displayTextDb.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextDb.text	= "The quick brown fox jumps over the lazy dog.";
displayTextDb.textStyle = "styleDb";
displayTextDb.move(0, 165);
addChild(displayTextDb);
 
var displayTextEb:uiText	= new uiText();
displayTextEb.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextEb.text	= "The quick brown fox jumps over the lazy dog.";
displayTextEb.textStyle = "styleEb";
displayTextEb.move(0, 185);
addChild(displayTextEb);


Note
The faux bold feature is implemented via the “thickness” property of the native flash.text.TextField class. Therefore, if you are not using the Aspire UI library, you can still implement the same faux bold feature via that property – just make sure that you have embedded the font and the “antiAliasType” property of the text field is set to flash.text.AntiAliasType.ADVANCED.


Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.

pixelstats trackingpixel
Be Sociable, Share!
               

    No responses yet

    Trackback URI | Comments RSS

    Leave a Reply

    *
    To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
    Click to hear an audio file of the anti-spam word