Posts in Category "Fonts"

Scaling Label text size to fit available area

Working with text in Flex 3 can be difficult. Especially if you want to scale text to fit an area (a task I recently discovered was not intuitive at all). Should you scale the text control? Convert the contents to a bitmap and resize it? Set the fontSize and test it’s width against the parent container?

The cleanest solution I found was to use was to compare the textWidth property of the Label against the parent container’s width (the available area), and then scale the Label component based on that comparison.

Here’s the running example (the default font size is 36 pts, but you can see that the second and third labels are scaled according to how much text is in the Label):

There’s a bit of a caveat to this, which is that in general, this will not be a “UI best practice”. A list of text items, where the text varies in size for each item in the list, is not the most readable or user friendly way to present information.

The main app and custom component files are below, but here’s a few lines to show you how it’s done.

In the Label tag, trigger a function on the creationComplete event:

<mx:Label id="myLabel"
x="101" y="22"
fontSize="36"
text="{title}"
width="100%" truncateToFit="false"
creationComplete="scaleLabelToFit()"
/>

You should also set truncateToFit to false so that a Label whose text comes close to the edge does not get truncated.

The scaleLabelToFit() function calculates the ratio of the main component’s width to the width of the Label’s text (textWidth):

var ratio:Number = ((this.width - myImage.width) - 10) / myLabel.textWidth;

This line subtracts the width of the image and an additional 10 pixels to account for padding.

Then, if the ratio is less than 1, scale the text control. If the ratio were greater than 1, you would not want to scale the text up, so just ignore that case.

if (ratio < 1) {
myLabel.scaleX = ratio;
myLabel.scaleY = ratio;
}

That’s it. Here’s a ZIP of the entire app, including images:

ScaleLabelSizes.zip

Using Fonts in Flex 4

The chapter on using fonts in Flex 4 has been updated. This chapter discusses embedding fonts, setting character ranges, and troubleshooting among other things.

While there aren’t any new features for fonts in Flex 4, there are some significant changes you should be aware of. For example:

  • Support for TLF is on by default (all Spark components use this new library of text manipulation)
  • Using embedded fonts with Halo/MX controls might require you to set some style properties to ensure that the right font is used
  • Font fallback substitutes a character from a device font that might not be available in an embedded font

One of the biggest changes you’ll notice is that all the examples now specify a property when embedding fonts: embedAsCFF. This property determines how a font is embedded: with DefineFont4 or DefineFont3. When embedded with DefineFont4, an embedded font can use the features of TLF. All Spark controls support DefineFont4. Some Halo controls support it, if you set their text renderers to use the new TLFTextField and TLFTextInput classes. This is all described in the doc.

One further note: For Beta 2, this document is accurate. However, for the final release, the following class names will be changed:

  • TLFTextField will become FTETextField
  • UITLFTextField will become UIFTETextField
  • TLFTextInput will become FTETextInput

Click here to download the latest Fonts documentation:

fonts.pdf