Tag Archives: font

alpha & rotation issue for textArea with htmlText

I had been playing with this for one of a project requirement.

Description of scenario:

  • Embedded fonts ‘Times New Roman’ both, using default font manager (Batik) as well as AFE
  • The application consists of two text area components
  • For 1st textarea, I am setting text using ‘text’ property and setting font family, size and color using setStyle().
  • For second, I am providing text related information via ‘htmlText’ property.
  • Using a slider I should be able to change alpha value of both textArea components.

Behavioral problems:

  • When I change value using slider, the alpha effect is applied and visible for 1st textarea, but in case of second, alpha value gets applied but text has no visible impact of alpha.
  • When I rotate both textArea components using, 1st gets rotated, but not second. In case of both textareas, I am referring and using embedded font only. (font family ‘TNR’ in example)

I expect both textAreas behave identical.

As far as I know and received primary feedback from a famous flexer guy, my code is right. If I consider this, there is definitely a limitation / bug in flex SDK. Hence I suggested a new task in SDK.

Here is a code I had written to simulate the SDK limitation / bug:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	<mx:Style>
		@font-face
		{
			src: url('/assets/fonts/times-new-roman.ttf');
			fontFamily: "TNR";
			font-weight:normal;
			font-style:normal;

			advancedAntiAliasing: true;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import mx.events.SliderEvent;

			private function init():void
			{
				basicTxt.text = "This is a sample text!";
			}

			private function onChange(event:SliderEvent):void
			{
				basicTxt.alpha = event.value;
				htmlTxt.alpha = event.value;
			}

			private function doRotate(event:MouseEvent):void
			{
				basicTxt.rotation = 20;
				htmlTxt.rotation = 20;
			}
		]]>
	</mx:Script>
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="70%" height="50%">
			<mx:TextArea id="basicTxt" width="80%" backgroundColor="blue" fontSize="36" height="100%" fontFamily="TNR"/>
			<mx:TextArea id="htmlTxt" width="80%" backgroundColor="blue" height="100%">
			<mx:htmlText>
					<![CDATA[<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="TNR" SIZE="36" COLOR="#000000" LETTERSPACING="0" KERNING="0">This is a sample text!</FONT></P></TEXTFORMAT>]]>
				</mx:htmlText>
			</mx:TextArea>
		</mx:HBox>
		<mx:HSlider minimum="0" maximum="1" value="1" change="onChange(event)" />
		<mx:Button label="Rotate" click="doRotate(event)" />
	</mx:VBox>
</mx:Application>

I will appreciate if anyone can give some ideas / pointers to work around.

Flex application & new fonts

A typical requirement was to provide some means so that anyone can upload / add new font(s) and the same can be used by Flex application. The Flex project should not require recompilation process.

Font, as a TTF or FON file cannot be used unless embedded, but that requires recompilation.

Searching around net gave me a way to solve this gave me a reasonable good solution.

Instead of specifying external styles such as <mx:Style source=”assets/styles/fonts.css”/> I used StyleManager.

Any change in fonts.css requires project recompilation to get the change in effect.

So, I compiled fonts.css using mxmlc fonts.css . This compiled CSS to SWF.

Then I loaded fonts at runtime using StyleManager.loadStyleDeclarations(“fonts.swf”, true, true);

And that’s it….! The font(s) inside fonts.swf can be used and that gives the same effect as embedded.

Font transcoding error – specify font style

Flex SDK has rich set of font managers. Those 3 (Batik, AFE, JRE) manage and transcode to flash player fonts.
However, using following code in CSS caused comile time exception.

“exception during transcoding: Font for alias ‘Arial Bold’ with plain weight and style was not found at…”

@font-face
{
src: url('/assets/fonts/arial-bold.ttf');
fontFamily: "Arial Bold";
}

@font-face
{
src: url('/assets/fonts/arial-bold-italic.ttf');
fontFamily: "Arial Bold Italic";
}

The perfect solution that I could find was that I also need to specify font weight & style in CSS, as per the type of font, I am embedding.

Here is the perfect solution:

@font-face
{
src: url('/assets/fonts/arial-bold.ttf');
fontFamily: "Arial Bold";
font-weight:bold;
}

@font-face
{
src: url('/assets/fonts/arial-bold-italic.ttf');
fontFamily: "Arial Bold Italic";
font-weight:bold;
font-style:italic;
}

Flex SDK is really very smart in this case. It actually detects that the font supplied is of which type effect – bold, italics or both.
More on font managers is here.

%d bloggers like this: