You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by Russell Warren <ru...@perspexis.com> on 2012/11/16 17:42:21 UTC
Embedded fonts, mixed FTE/Textfield components, and embedAsCFF
Hi all,
I've got a non-mobile application where I'm embedding a font. I was also
experiencing unacceptable list rendering delays so I have ended up
occasionally using item renderers subclassed from LabelItemRenderer (in
mobilecomponents.swc) for the huge speedup they provide, as well as the
simplicity of the StyleableTextField that is embedded.
However, I'm now running into font issues and am getting this error:
warning: incompatible embedded font 'Vera' specified for
> itemrenderers::FastLabelRenderer (FastLabelRenderer528) . This component
> requires that the embedded font be declared with embedAsCFF=false.
On investigation, it appears that this is due to the mix of FTE/TLF used by
Spark components, and the old-school TextField based StyleableTextFiled
embedded in LabelItemRenderer. It seems that each require different values
(true/false) on embedAsCFF.
I've set the font for the entire application (and its loaded modules) using
this styling code:
http://static.inky.ws/syn/611
A sample item renderer I'm using to get fast rendering on a desktop app is
here:
http://static.inky.ws/syn/613
So - how do I embed a font and get seamless use of that font across the
different text field types without the embedAsCFF issues?
Russ
Re: Embedded fonts, mixed FTE/Textfield components, and embedAsCFF
Posted by Russell Warren <ru...@perspexis.com>.
> I believe descendant and/or id selectors can be used for this. It depends
> on what you are trying to achieve.
>
Aha! "descendant selectors" is the magic term I needed to know and look
up. Thanks! I was unaware of that way of targeting styles before.
To leave a working example for future reference, this works perfectly when
I set styleName="dense" on the List (or whatever) I want to set the styles
on the itemRenderer for:
.dense s|LabelItemRenderer {
paddingLeft: 1;
paddingTop: 1;
paddingRight: 1;
paddingBottom: 1;
}
Thanks again!
Re: Embedded fonts, mixed FTE/Textfield components, and embedAsCFF
Posted by Alex Harui <ah...@adobe.com>.
On 11/16/12 12:55 PM, "Russell Warren" <ru...@perspexis.com> wrote:
> For closure, I've got this working with the font loaded up twice (or at
> least portions of it). s|StyleableTextField does not work but it works
> fine with s|LabelItemRenderer. Thanks, guys!
>
> On a related note... how do you pass styles to an itemRenderer for a
> particular List (or whatever) instance?
I believe descendant and/or id selectors can be used for this. It depends
on what you are trying to achieve.
The other way is to subclass the renderer and make a type selector for it.
--
Alex Harui
Flex SDK Team
Adobe Systems, Inc.
http://blogs.adobe.com/aharui
Re: Embedded fonts, mixed FTE/Textfield components, and embedAsCFF
Posted by Russell Warren <ru...@perspexis.com>.
For closure, I've got this working with the font loaded up twice (or at
least portions of it). s|StyleableTextField does not work but it works
fine with s|LabelItemRenderer. Thanks, guys!
On a related note... how do you pass styles to an itemRenderer for a
particular List (or whatever) instance?
For example: LabelItemRenderer loads up styles for "paddingLeft",
"paddingTop", "paddingRight", and "paddingBottom". I don't know how to set
styles that will get picked up by the renderer instances?
So far I've successfully set those styles by trying to set the defaults in
my simple FastLabelRenderer subclass (http://static.inky.ws/syn/613). This
works for all cases when I specify FastLabelRenderer, but it was only
supposed to do default style values. When I try and override these values
for a particular list (eg: to be even more condensed with less padding), I
cannot get the "default" value to change.
Setting 'paddingLeft="3"' doesn't work in the MXML for a List, presumably
(and not surprisingly) because the List has no such style defined.
I've tried direct use of .setStyle in the init handler for the List
instance I want to tweak the renderers for, like so:
private function myList_initializeHandler(event:FlexEvent):void {
> var foo:List = List(event.target);
> foo.setStyle("paddingLeft", 3);
> foo.setStyle("paddingTop", 3);
> foo.setStyle("paddingRight", 3);
> foo.setStyle("paddingBottom", 3);
> }
but that does not work. Nor does it provide any warning or error. Each of
the padding values end up being my supposed defaults of 8.
What is the proper way to get styles down to the item renderers?
Russ
On Fri, Nov 16, 2012 at 1:54 PM, Mark Line <ma...@gmail.com> wrote:
> In a large application working on we load the same font twice to overcome
> this problem, although we don't embed the full font only some characters.
>
> Seems to work quite well until we finish moving fully to tlf
>
> -----Original Message-----
> From: Alex Harui [mailto:aharui@adobe.com]
> Sent: 16 November 2012 18:45
> To: flex-users@incubator.apache.org
> Subject: Re: Embedded fonts, mixed FTE/Textfield components, and embedAsCFF
>
> Yes, you can certainly embed the font twice, it just fattens the app, and
> if
> you have a full unicode font, that can be hefty.
>
> I think StyleableTextField is in the Spark namepace which typically has the
> s| prefix. The LabelItemRenderer should be in Spark as well and setting
> fontFamily there should work.
>
>
> On 11/16/12 10:24 AM, "Russell Warren" <ru...@perspexis.com> wrote:
>
> >>
> >> Unfortunately, that is a trade-off you will have to make.
> >
> >
> > Do I really need to trade this off? Can I use brute force instead?
> > For example... is there some way I can embed the same font twice, once
> > as CFF for all the Spark skins, and once as non-CFF for anything based
> > on TextField?
> >
> > Something like this:
> >
> > @font-face {
> >> src:url("assets/fonts/Vera.ttf");
> >> fontFamily: Vera;
> >> fontWeight: normal;
> >> fontStyle: normal;
> >> advancedAntiAliasing: true;
> >> embedAsCFF: true;
> >> }
> >> @font-face {
> >> src:url("assets/fonts/Vera.ttf");
> >> fontFamily: Vera*NoCFF*;
> >> fontWeight: normal;
> >> fontStyle: normal;
> >> advancedAntiAliasing: true;
> >> embedAsCFF: *false*;
> >> }
> >
> >
> > Is this possible to split between Spark/FTE and MX/TextField? I can't
> > figure out a CSS selector path for identifying styles for
> > StyleableTextField instances. I don't quite understand the CSS, though.
> > For instance I have no idea how the snippet below fixes the font
> > issues for the MX tooltips and Alert.show, but it works perfectly:
> >
> > /* Changing the global fontFamily above breaks mx components. The
> >> mx|global bit below fixes this.
> >> Source:
> >> http://mikeorth.com/2012/embedded-fonts-with-tooltip-and-alert-in-fle
> >> x-4
> >> */
> >> mx|global {
> >> textFieldClass: ClassReference("mx.core.UIFTETextField");
> >> }
> >
> >
> > If the brute force font double-up has the potential of working... how
> > would I set the fontFamily for StyleableTextField to VeraCFF? I've
> > tried this
> > with:
> >
> > StyleableTextField {
> >> fontFamily: VeraNoCFF;
> >> }
> >
> >
> > but the compiler complains that "Type 'StyleableTextField' in CSS
> > selector 'StyleableTextField' must be qualified with a namespace." and
> > I can't figure out what the namespace would be to get to
> StyleableTextField.
>
> --
> Alex Harui
> Flex SDK Team
> Adobe Systems, Inc.
> http://blogs.adobe.com/aharui
>
>
--
Russell Warren
Perspexis Technologies Inc.
613-882-1676
This information is confidential and intended solely for the use of the
individual or entity to whom it is addressed.
If you have received this email in error, please notify the sender
immediately.
RE: Embedded fonts, mixed FTE/Textfield components, and embedAsCFF
Posted by Mark Line <ma...@gmail.com>.
In a large application working on we load the same font twice to overcome
this problem, although we don't embed the full font only some characters.
Seems to work quite well until we finish moving fully to tlf
-----Original Message-----
From: Alex Harui [mailto:aharui@adobe.com]
Sent: 16 November 2012 18:45
To: flex-users@incubator.apache.org
Subject: Re: Embedded fonts, mixed FTE/Textfield components, and embedAsCFF
Yes, you can certainly embed the font twice, it just fattens the app, and if
you have a full unicode font, that can be hefty.
I think StyleableTextField is in the Spark namepace which typically has the
s| prefix. The LabelItemRenderer should be in Spark as well and setting
fontFamily there should work.
On 11/16/12 10:24 AM, "Russell Warren" <ru...@perspexis.com> wrote:
>>
>> Unfortunately, that is a trade-off you will have to make.
>
>
> Do I really need to trade this off? Can I use brute force instead?
> For example... is there some way I can embed the same font twice, once
> as CFF for all the Spark skins, and once as non-CFF for anything based
> on TextField?
>
> Something like this:
>
> @font-face {
>> src:url("assets/fonts/Vera.ttf");
>> fontFamily: Vera;
>> fontWeight: normal;
>> fontStyle: normal;
>> advancedAntiAliasing: true;
>> embedAsCFF: true;
>> }
>> @font-face {
>> src:url("assets/fonts/Vera.ttf");
>> fontFamily: Vera*NoCFF*;
>> fontWeight: normal;
>> fontStyle: normal;
>> advancedAntiAliasing: true;
>> embedAsCFF: *false*;
>> }
>
>
> Is this possible to split between Spark/FTE and MX/TextField? I can't
> figure out a CSS selector path for identifying styles for
> StyleableTextField instances. I don't quite understand the CSS, though.
> For instance I have no idea how the snippet below fixes the font
> issues for the MX tooltips and Alert.show, but it works perfectly:
>
> /* Changing the global fontFamily above breaks mx components. The
>> mx|global bit below fixes this.
>> Source:
>> http://mikeorth.com/2012/embedded-fonts-with-tooltip-and-alert-in-fle
>> x-4
>> */
>> mx|global {
>> textFieldClass: ClassReference("mx.core.UIFTETextField");
>> }
>
>
> If the brute force font double-up has the potential of working... how
> would I set the fontFamily for StyleableTextField to VeraCFF? I've
> tried this
> with:
>
> StyleableTextField {
>> fontFamily: VeraNoCFF;
>> }
>
>
> but the compiler complains that "Type 'StyleableTextField' in CSS
> selector 'StyleableTextField' must be qualified with a namespace." and
> I can't figure out what the namespace would be to get to
StyleableTextField.
--
Alex Harui
Flex SDK Team
Adobe Systems, Inc.
http://blogs.adobe.com/aharui
Re: Embedded fonts, mixed FTE/Textfield components, and embedAsCFF
Posted by Alex Harui <ah...@adobe.com>.
Yes, you can certainly embed the font twice, it just fattens the app, and if
you have a full unicode font, that can be hefty.
I think StyleableTextField is in the Spark namepace which typically has the
s| prefix. The LabelItemRenderer should be in Spark as well and setting
fontFamily there should work.
On 11/16/12 10:24 AM, "Russell Warren" <ru...@perspexis.com> wrote:
>>
>> Unfortunately, that is a trade-off you will have to make.
>
>
> Do I really need to trade this off? Can I use brute force instead? For
> example... is there some way I can embed the same font twice, once as CFF
> for all the Spark skins, and once as non-CFF for anything based on
> TextField?
>
> Something like this:
>
> @font-face {
>> src:url("assets/fonts/Vera.ttf");
>> fontFamily: Vera;
>> fontWeight: normal;
>> fontStyle: normal;
>> advancedAntiAliasing: true;
>> embedAsCFF: true;
>> }
>> @font-face {
>> src:url("assets/fonts/Vera.ttf");
>> fontFamily: Vera*NoCFF*;
>> fontWeight: normal;
>> fontStyle: normal;
>> advancedAntiAliasing: true;
>> embedAsCFF: *false*;
>> }
>
>
> Is this possible to split between Spark/FTE and MX/TextField? I can't
> figure out a CSS selector path for identifying styles for
> StyleableTextField instances. I don't quite understand the CSS, though.
> For instance I have no idea how the snippet below fixes the font issues
> for the MX tooltips and Alert.show, but it works perfectly:
>
> /* Changing the global fontFamily above breaks mx components. The
>> mx|global bit below fixes this.
>> Source:
>> http://mikeorth.com/2012/embedded-fonts-with-tooltip-and-alert-in-flex-4
>> */
>> mx|global {
>> textFieldClass: ClassReference("mx.core.UIFTETextField");
>> }
>
>
> If the brute force font double-up has the potential of working... how would
> I set the fontFamily for StyleableTextField to VeraCFF? I've tried this
> with:
>
> StyleableTextField {
>> fontFamily: VeraNoCFF;
>> }
>
>
> but the compiler complains that "Type 'StyleableTextField' in CSS selector
> 'StyleableTextField' must be qualified with a namespace." and I can't
> figure out what the namespace would be to get to StyleableTextField.
--
Alex Harui
Flex SDK Team
Adobe Systems, Inc.
http://blogs.adobe.com/aharui
Re: Embedded fonts, mixed FTE/Textfield components, and embedAsCFF
Posted by Russell Warren <ru...@perspexis.com>.
>
> Unfortunately, that is a trade-off you will have to make.
Do I really need to trade this off? Can I use brute force instead? For
example... is there some way I can embed the same font twice, once as CFF
for all the Spark skins, and once as non-CFF for anything based on
TextField?
Something like this:
@font-face {
> src:url("assets/fonts/Vera.ttf");
> fontFamily: Vera;
> fontWeight: normal;
> fontStyle: normal;
> advancedAntiAliasing: true;
> embedAsCFF: true;
> }
> @font-face {
> src:url("assets/fonts/Vera.ttf");
> fontFamily: Vera*NoCFF*;
> fontWeight: normal;
> fontStyle: normal;
> advancedAntiAliasing: true;
> embedAsCFF: *false*;
> }
Is this possible to split between Spark/FTE and MX/TextField? I can't
figure out a CSS selector path for identifying styles for
StyleableTextField instances. I don't quite understand the CSS, though.
For instance I have no idea how the snippet below fixes the font issues
for the MX tooltips and Alert.show, but it works perfectly:
/* Changing the global fontFamily above breaks mx components. The
> mx|global bit below fixes this.
> Source:
> http://mikeorth.com/2012/embedded-fonts-with-tooltip-and-alert-in-flex-4
> */
> mx|global {
> textFieldClass: ClassReference("mx.core.UIFTETextField");
> }
If the brute force font double-up has the potential of working... how would
I set the fontFamily for StyleableTextField to VeraCFF? I've tried this
with:
StyleableTextField {
> fontFamily: VeraNoCFF;
> }
but the compiler complains that "Type 'StyleableTextField' in CSS selector
'StyleableTextField' must be qualified with a namespace." and I can't
figure out what the namespace would be to get to StyleableTextField.
Re: Embedded fonts, mixed FTE/Textfield components, and embedAsCFF
Posted by Alex Harui <ah...@adobe.com>.
On 11/16/12 8:42 AM, "Russell Warren" <ru...@perspexis.com> wrote:
> Hi all,
>
> I've got a non-mobile application where I'm embedding a font. I was also
> experiencing unacceptable list rendering delays so I have ended up
> occasionally using item renderers subclassed from LabelItemRenderer (in
> mobilecomponents.swc) for the huge speedup they provide, as well as the
> simplicity of the StyleableTextField that is embedded.
>
> However, I'm now running into font issues and am getting this error:
>
> warning: incompatible embedded font 'Vera' specified for
>> itemrenderers::FastLabelRenderer (FastLabelRenderer528) . This component
>> requires that the embedded font be declared with embedAsCFF=false.
>
>
> On investigation, it appears that this is due to the mix of FTE/TLF used by
> Spark components, and the old-school TextField based StyleableTextFiled
> embedded in LabelItemRenderer. It seems that each require different values
> (true/false) on embedAsCFF.
>
> I've set the font for the entire application (and its loaded modules) using
> this styling code:
> http://static.inky.ws/syn/611
>
> A sample item renderer I'm using to get fast rendering on a desktop app is
> here:
> http://static.inky.ws/syn/613
>
> So - how do I embed a font and get seamless use of that font across the
> different text field types without the embedAsCFF issues?
>
> Russ
If you need TextField in order to get the performance you need (which is
what LabelItemRenderer does, IIRC, then you will need to embed fonts with
embedAsCFF=false.
By doing so, you are giving up on left-to-right text. If you can afford to
do that, you can consider replacing all text controls with MX versions, but
then you will lose out on Spark skinning.
Unfortunately, that is a trade-off you will have to make.
--
Alex Harui
Flex SDK Team
Adobe Systems, Inc.
http://blogs.adobe.com/aharui