Skip to main content
F
FM_Flame
Known Participant
May 21, 2010
Answered

TLF htmltext issues

  • May 21, 2010
  • 1 reply
  • 2336 views

Ok so I have just a few simple questions with the new text framework I need to know the answers of:

1) in the old textField you could put an image and align it left so the text wraps around it. Is it somehow possible to achieve this with TLF because I've read align is not supported with the image tag?

2) I wanted to set sharpness and thickness of the text so I can imitate the photoshops smooth sharp chrisp modes and it turns out I can't do that, anyone knows if that's going to happen?

3) I've read about links and anchor tag that you can't set styles to it so on default it to be with no decoration and on roll over the link to go underlined for example, is that true ? Can I somehow in a simple way apply some styles or it's like what you see is what you get - static text and links with no hover and so on?

I think these are the most simple html things a user would want in order to display some text with links and images...

Please someone confirm me that I can't do these things or correct me if somehow I can ?

Here is the adobe demo for a text editor:

http://labs.adobe.com/technologies/textlayout/demos/ - you can't do the things I just described and that for me are just basics... and they are MISSING!!!

Here is where I read these features are missing unlike the textfield:

http://www.eonflex.com/flex/4.1/langref/flashx/textLayout/conversion/TextConverter.html

So my conclusion is that I better use the textfield class until these feature are included in TLF, am I correct ?

Does anyone know if in near future these basic standard HTML/CSS features will be included in TLF ?

This topic has been closed for replies.
Correct answer robin_briggs

1) in the old textField you could put an image and align it left so the  text wraps around it. Is it somehow possible to achieve this with TLF  because I've read align is not supported with the image tag?

There is no way to wrap the text around a graphic now, although this is something we are working

on for the future.

2) I wanted to set sharpness and thickness of the text so I can imitate  the photoshops smooth sharp chrisp modes and it turns out I can't do  that, anyone knows if that's going to happen?

The antialias settings have changed with Flash Player 10 FTE, and sharpness and thickness are no longer directly settable. You should get good antialiasing by default, however,

3) I've read about links and anchor tag that you can't set styles to it  so on default it to be with no decoration and on roll over the link to  go underlined for example, is that true ? Can I somehow in a simple way  apply some styles or it's like what you see is what you get - static  text and links with no hover and so on?

You can set the default appearance of the links (<a>) by setting the linkActiveFormat, linkHoverFormat, etc. on any FlowElement in the hierarchy, and it will inherit down to the link. So if you want all the links in the TextFlow to have the same appearance, you can set the linkHoverFormat (for example) on the TextFlow. If you have a number of TextFlows, and you want them all to look the same, you can set this once in the Configuration.defaultLinkHoverFormat. And if you want each link to look different, you can set the linkHover/linActiveFormat on the LinkElement itself.

I hope I've answered all your questions,

- robin

1 reply

R
Adobe Employee
robin_briggsCorrect answer
Adobe Employee
May 24, 2010

1) in the old textField you could put an image and align it left so the  text wraps around it. Is it somehow possible to achieve this with TLF  because I've read align is not supported with the image tag?

There is no way to wrap the text around a graphic now, although this is something we are working

on for the future.

2) I wanted to set sharpness and thickness of the text so I can imitate  the photoshops smooth sharp chrisp modes and it turns out I can't do  that, anyone knows if that's going to happen?

The antialias settings have changed with Flash Player 10 FTE, and sharpness and thickness are no longer directly settable. You should get good antialiasing by default, however,

3) I've read about links and anchor tag that you can't set styles to it  so on default it to be with no decoration and on roll over the link to  go underlined for example, is that true ? Can I somehow in a simple way  apply some styles or it's like what you see is what you get - static  text and links with no hover and so on?

You can set the default appearance of the links (<a>) by setting the linkActiveFormat, linkHoverFormat, etc. on any FlowElement in the hierarchy, and it will inherit down to the link. So if you want all the links in the TextFlow to have the same appearance, you can set the linkHoverFormat (for example) on the TextFlow. If you have a number of TextFlows, and you want them all to look the same, you can set this once in the Configuration.defaultLinkHoverFormat. And if you want each link to look different, you can set the linkHover/linActiveFormat on the LinkElement itself.

I hope I've answered all your questions,

- robin

F
FM_FlameAuthor
Known Participant
May 24, 2010

Thank you very much robin So.. yeeeeiiii !!! you are working on the text wrap around the image, that's great

I don't get why in fp 10 they removed the custom anti-alising... you don't plan to add it or it's not possible ?

And yeah, later on I found you could set such styles for the anchor tag only not possible via css, I hope I say it right this time Will any kind of css styling be implemented with the TLF?

J
JTtheGeek
Known Participant
April 5, 2011

Robin I am using FTETextField, using rotation, and using cff embeded fonts which is verified by FlexGlobals.topLevelApplication.SystemManager.IsFontEmbeded(objFontFormat) - which returns true...

However, the text looks like crap when rotated.   We were able to solve this in our previous iterations via sharpness and thinkness on advanced Anti-Alias settings ( see: http://blog.flexexamples.com/2007/10/24/setting-a-fonts-anti-alias-type-sharpness-thickness-and-grid-fit-type-in-flex/), but now we are trying to make all our charting components multi-lingual (http://www.Dedoose.com) and thus using FTE.

These options were on UITextFormat, but are no longer available in the FTE components as far as all the sleuthing I've done.

I have a simple demo app with a mx label, spark label, and FTETextField. T

he mx label using a nonCFF embeded font, the spark and FTE using the same cff embeded font.

The mx I can control the sharpness and thickness and looks great!

The  spark label looks okay, it's at least anti-aliasing properly though I would like to control the font thickness a little better.

The FTEText field is a disaster: It is  supposedly using the exact same FTE engine and font as the spark label but looks like crap when rotated.  If you decrease the font size it gets far worse.

Please please help, the spark label is not an option as this is for a sprite based charting engine per raw performance is mission critical.

Here is the code and an screenshot:

http://is200.imagesocket.com/images/2011/04/05/badfterotationaliaspy4yy.png

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

   xmlns:s="library://ns.adobe.com/flex/spark"

   xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" initialize="OnInit(event)">

<fx:Style>

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/mx";

@font-face

{

src: url("HELVETICA.TTF");

fontFamily: fntEmbededHelveticaCFF;

embedAsCFF: true;

}

@font-face

{

src: url("HELVETICA.TTF");

fontFamily: fntEmbededHelveticaNotCFF;

embedAsCFF: false;

}

</fx:Style>

<fx:Script>

<![CDATA[

import mx.core.FTETextField;

import mx.core.FlexGlobals;

protected var _txtFTE:FTETextField;

protected var _objRotTimer:Timer;

protected function OnInit(objEvent:Event):void

{

var objFormat:TextFormat = new TextFormat("fntEmbededHelveticaCFF", 18);

_txtFTE = new FTETextField();

_txtFTE.embedFonts = true;

_txtFTE.text = "Testing FTE";

_txtFTE.setTextFormat(objFormat);

ucFTEHolder.addChild(_txtFTE);

lblEmbeded.text = "IsFontEmbeded: " + FlexGlobals.topLevelApplication.systemManager.isFontFaceEmbedded(objFormat);

_objRotTimer = new Timer(50);

_objRotTimer.addEventListener(TimerEvent.TIMER, OnRotTimerTick);

_objRotTimer.start();

}

protected function OnRotTimerTick(objEvent:Event):void

{

_txtFTE.x = (ucFTEHolder.width - _txtFTE.width) * .5;

_txtFTE.y = (ucFTEHolder.height- _txtFTE.height) * .5;

_txtFTE.rotation += 1;

_lblSpark.rotation += 1;

_lblMX.rotation +=1;

}

]]>

</fx:Script>

<s:VGroup width="100%" height="100%" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5">

<s:Label id="lblEmbeded"/>

<s:HGroup width="100%" height="100%">

<s:Group id="grpMXLabel" width="100%" height="100%">

<mx:Label id="_lblMX" text="Texting MX" fontFamily="fntEmbededHelveticaNotCFF" fontSharpness="-50" fontThickness="120" fontSize="18" horizontalCenter="0" verticalCenter="0"/>

</s:Group>

<s:Group width="100%" height="100%">

<s:Label id="_lblSpark" text="Testing Spark" fontFamily="fntEmbededHelveticaCFF" horizontalCenter="0" verticalCenter="0" fontSize="18"/>

</s:Group>

<mx:UIComponent id="ucFTEHolder" width="100%" height="100%"/>

</s:HGroup>

</s:VGroup>

</s:Application>

Cross posted this at: http://forums.adobe.com/message/3595941#3595941

As well here is a better uncompressed image to compare: http://www.imagesocket.com/view/2011/04/05/badfterotationaliaspy4yy.png

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices