Skip to main content
L
liluc
Participant
November 25, 2010
Question

CSS links styling

  • November 25, 2010
  • 1 reply
  • 1780 views

I really would like to understand how to style my links with css. Is there any way with the TLF? Thanks a lot for any reply!

This topic has been closed for replies.

1 reply

R
Adobe Employee
robin_briggs
Adobe Employee
November 25, 2010

TLF has no direct support for CSS. But if you have something that parses the CSS, then you can apply the CSS rules using the IFormatResolver interface in TLF. The way this works is that when the TextFlow is changed, TLF will call out to the IFormatResolver for each element affected to allow the resolver to set the attributes on the element. We have an example that shows how this can work, see SimpleEditorWithCSS in the sample posted on our blog at: http://blogs.adobe.com/tlf/2010/11/tlf-1-1-and-2-0-textlayouteditor-demo-source.html.

The links are little complicated to style, because they are pseudo-elements. But there are formats you can set for linkHoverFormat, linkActiveFormat, and linkNormalFormat; you could set those from the format resolver.

There is an open source project for parsing CSS in ActionScript, called F*CSS.I don't know too much about it, though; maybe someone else has details.

Hope this helps,

- robin

I
injpix
Inspiring
February 18, 2011

Well after typing a lengthly post I submitted it to have it immediately thrown away. 

So in short, you mentioned above:

The links are little complicated to style, because they are pseudo-elements. But there are formats you can set for linkHoverFormat, linkActiveFormat, and linkNormalFormat; you could set those from the format resolver.

Does this mean you can add these styles directly in the CSSFormatResolver?  If so, I have the following and it still renders my links with the default dark-blue color:

        /** Create a flex style resolver.  */
        public function CSSFormatResolver(styleManager:IStyleManager2):void
        {
            _textLayoutFormatCache = new Dictionary(true);
            _styleManager = styleManager;
           
            var css:CSSStyleDeclaration = new CSSStyleDeclaration();
            css.setStyle("linkNormalFormat", 0xF8BF24);
            _styleManager.setStyleDeclaration("TextFlow",css,true);
        }

And where I instantiate my textFlow is the following:

                textFlow                             = TextConverter.importToFlow(xml, TextConverter.TEXT_LAYOUT_FORMAT);
                // wipe out the default inherits - format take precendence over CSS - this simplifies the example
                textFlow.format                     = null;
                textFlow.formatResolver             = new CSSFormatResolver(styleManager);

When I had these tags embedded into my markup they work.  I had this in one of my .as files:

            var formats:XML     =      <root>
                                    <linkNormalFormat><TextLayoutFormat color="#F8BF24"  textDecoration={TextDecoration.NONE}/></linkNormalFormat>
                                    <linkHoverFormat><TextLayoutFormat     color="#F8BF24"     textDecoration={TextDecoration.UNDERLINE}/></linkHoverFormat>
                                    <linkActiveFormat><TextLayoutFormat color="#F8BF24"  textDecoration={TextDecoration.NONE}/></linkActiveFormat>
                                    </root>;

But it seems if I dont null the textFlow.format property my textFlow doesnt get styled fully.  Do you know of a way to directly append to the external CSS file in actionscript?  Does that make sense?  I understand what I posted may bring up more questions then I intended.

R
Adobe Employee
rdermer
Adobe Employee
February 19, 2011

There are a couple of things going on here.

First I think you need this call:

css.setStyle("linkNormalFormat", 0xF8BF24);

to be:

css.setStyle("linkNormalFormat",{color:0xF8BF24});

Note that the FormatResolver will replace all linkNormalFormat styles so if underline is to be specified that has to be included in the Object passed as the second parameter to setStyle

To make link formats work through the CSSFormatResolver you need to add code in CSSFormatResolver.resolveUserFormat for the link formats.  The link formats was treated as a user style in TLF 1.0 and 1.1 and is still treated that way in 2.0 CSSFormatResolver.  resolveUserFormat  will be called with TextFlow as the element and "linkNormalFormat" as the style.  It should return the above object.

Note I tried this in the 2.0 code should be pretty much the same in 1.1/1.0.

Hope that helps,

Richard

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