15 October 2008
This article assumes that you have basic knowledge of working with text in Fireworks and general experience working in the Fireworks workspace.
The release of Adobe Fireworks CS4 includes significant improvements in the area of type handling. These updates also increase the core integration with Fireworks and other Adobe content creation tools. The new Adobe Text Engine provides a consistent typesetting experience in Fireworks, similar to the process of type editing using Adobe Photoshop and Adobe Illustrator. Type handing in Fireworks CS4 is much easier, because you can access the typesetting controls directly on the Fireworks canvas, rather than editing the text in a separate type editor window.
In this article, I'll describe the new text features in Fireworks CS4 and provide examples so that you can take advantage of the new text engine's power.
The improvements in the area of type handling in Fireworks CS4 include updates to the Property inspector, making it easier than ever before to manipulate text elements in your layouts and designs. The new Property inspector will also likely look familiar, as it has been redesigned to match the interface of other Adobe image editing products (see Figure 1).
Figure 1 highlights some of the interface items that are described below:
Note: Click Control+Left or Right Arrow key (Windows) or Command+Left or Right Arrow key (Mac) to increase or decrease the tracking values while the text is selected.
Like kerning, tracking adjusts the horizontal spacing between the characters, and the value is applied to the space between each character. If you want your text to have a more open, airy feel, try increasing the tracking value by a pixel or two. Figure 2 illustrates the effect of increased spacing on a set of characters.
Until Fireworks CS3, if you wanted to create bold text with a font that didn't include a true bold version, your only option was to apply the Faux Bold setting to simulate a bolder effect of a text element. The Faux Bold setting has several disadvantages: it creates jagged edges and does not render properly in web browsers. With Fireworks CS4 this issue has been resolved; you can now choose the actual font weight (of a font that includes a bold version) instead of applying the Faux Bold attribute. In Figure 4, you can clearly see the difference between text rendered with the Faux Bold setting applied and the rendering of text that has a bold font weight.
As demonstrated in Figure 4, there are many new additions to the Property inspector that is displayed when text is selected in Fireworks CS4. The updated interface allows you to have more precise control when formatting text, but we've only scratched the surface of the new text manipulation features available. The next section of this article explains the process of converting text formatted in older versions of Fireworks to take advantage of the new text rendering functionality available in Fireworks CS4.
When you open a PNG file containing legacy text (i.e. text which was created using Fireworks CS3 or earlier), an alert message appears to allow you to update the text or defer the update until later (see Figure 5). Fireworks CS4 has a completely new text engine, which means that font rendering and line spacing will be slightly different than in Fireworks CS3 (and earlier versions).
If you encounter the situation where the legacy text objects use fonts that are not currently installed on your machine, you will be presented with a Missing Font dialog box. The dialog box alerts you to the missing fonts, which have not been assigned to a substitute font. When you make a substitution, the text will be re-rendered as it is updated to use the new font. Alternately, you can also choose to install the missing fonts on your machine to continue making text edits to the legacy document.
One of the great benefits of the integrated Adobe Text Engine (which is shared in other Adobe Creative Suite 4 products) is that all of the text attributes copied from other programs are now preserved in Fireworks CS4. This means you can seamlessly edit text that was created in a different tool. Even better, you can create text in another program, copy it, and then paste it into Fireworks CS4 even though some of those text properties are not supported in Fireworks. Figure 6 shows how text created and then copied in Illustrator maintains its appearance and renders correctly when pasted in Fireworks CS4.
Attributes such as character rotation, strikethrough, text justification with last line right aligned, and any other properties which have been applied in Illustrator are now preserved and can even be edited in Fireworks CS4. You can either open the saved AI or PSD file and continue editing the text elements, or just copy the text blocks and paste them into Fireworks and continue working on your design.
Note: To paste a text object, select the Text tool from the Tools panel and choose Edit > Paste.
By default, ligatures are not currently supported in Fireworks CS4. But if you've created a text element in Illustrator that now exists in your Fireworks CS4 document (either by opening and importing an AI file or by copying and pasting the text element), then you can set the preferences in Fireworks to preserve and edit ligatures (see Figure 7).
To update your settings to use the discretionary ligatures (rather than the default standard ligatures), follow the steps below:
Windows XP: [Drive, C:]\Documents and Settings\[user]\Application Data\Adobe\Fireworks CS4\[application language folder, such as "English"]\
Windows Vista: [Drive, C:]\Users\[User Name]\AppData\Roaming\Adobe\Fireworks CS4\[application language folder, such as "English"]\
Mac OS: [User Name]\Library\Preferences\Adobe Fireworks CS4\[application language folder, such as "en"]\
true(see Figure 8).
After making this change to the preference file, any new text objects copied and then pasted into Fireworks will preserve the ligatures and render them as expected.
Fireworks CS4 includes a new feature called Text in Path. This functionality allows you to easily create effects, such as wrapping text around images. Most websites these days incorporate designs that display images with text flowing around them. Text wrapping makes the layout more legible and results in a design that does not look too square and blocky. The Text in Path feature not only makes it possible to create text flow inside a defined path, it has the added bonus of retaining both the editability of the text AND the vector object that defines the text area. Figure 9 illustrates how you can make text flow around an image in your Fireworks CS4 design.
To create text that wraps around an image (or flows within a specified area) follow the steps below:
Fireworks CS4 includes some useful new preferences. For example, you may find it helpful to set the preferences to display the English names when creating designs that incorporate non-Roman fonts. Additionally, if you find that you are working with a large quantity of fonts, you may find that your workflow is more efficient when you take advantage of the new preference that limits the number of recently used fonts in the list displayed in Fireworks CS4.
By default, when you use non-Roman fonts in Fireworks CS4, the font list does not display the font names in English. However, this behavior can changed by updating the Type preferences so that the font names display their equivalent English names.
Follow the steps below to update this setting:
In Mac OS: Select Fireworks > Preferences and choose the Type category.
Figure 11 illustrates the difference in the display of the font names in the font list. On the left appears the default display behavior; on the right is the result of displaying the font list with English names.
If you have a lot of fonts installed on your machine, which causes your font list in Fireworks CS4 to become rather long, the best way to navigate to a particular font is to press the keys that correspond with the first few letters of the font's name. Typing the beginning of the name jumps you directly to that font in the list. This strategy allows you to quickly select the desired font for your project.
If you wish to make the process go even faster, imagine searching through a smaller subset of fonts that are displayed in the Property inspector's font list, so that you only have to type the first letter of a font to select it. And imagine how nice it would be if the last font you used was the one selected by default in the list.
In Fireworks CS4, it is now possible to limit the number of fonts listed in the Property inspector (you can even set your recent font list limit to zero) so that you can quickly navigate to a particular font by simply typing the first letter (or two) of the desired font name.
Follow the steps below to limit the number of recent fonts that are displayed:
In Mac OS: Select Fireworks > Preferences and choose the Type category.
After following these steps, you'll notice that the next time you open the font list, it will not start from the beginning of all of the fonts installed on your machine. Instead, it will start from the last font you selected. Since many projects only incorporate a few fonts, this is a great way to make your workflow more efficient.
The new Adobe Text Engine integration in Fireworks CS4 provides a consistent typesetting experience when you jump from working in applications like Photoshop and Illustrator to Fireworks.
To learn more about working with Fireworks CS4, visit these helpful online resources:
Also be sure to visit the Fireworks Developer Center to find more articles and tutorials, including sample file projects, so that you can begin using all the new features in Fireworks CS4.