Working with the Adobe Text Engine in Fireworks CS4

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.

Reviewing the updated text features in the Property inspector

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:

• Font family: A drop-down menu that allows you to select the different fonts installed on your machine.
• Font style: A drop-down menu that lists all of the corresponding font weights for the current font family. This improved organization displays of all the fonts related to a particular font family, making it much easier to choose fonts in Fireworks CS4.
• Faux bold: This effect is used to apply a simulated bold style to a particular font element. Apply the faux bold style by clicking the button.
• Faux italics: This effect is used to apply a simulated italic style to a particular font element. Apply the faux italics style by clicking the button.
• Underline: This effect is used to apply an underline style to a text element—usually to simulate a hyperlink. Apply the underline style by pressing the button.
• Tracking control: The original range kerning control in Fireworks CS3 has been replaced by the tracking control in Fireworks CS4. Unlike kerning, tracking can be applied only to a selection of characters. Use your mouse to select and highlight a character (or range of characters), and then use the tracking slider in the Property inspector to increase or decrease the tracking value.

  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.

• Text orientation: The default text orientation is set to Horizontal left to right. If you want to create text that is displayed vertically, click the text orientation button and select the Vertical right to left option.
• Text anti-aliasing: You can increase legibility of text by selecting different anti-aliasing options. You can use these settings to ensure that the selected text will be rendered without jagged edges, which is especially helpful when working with smaller font sizes. Figure 3 illustrates the result of applying different types of anti-aliasing to blocks of text.

Using font weights and the Faux Bold setting

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.

Updating legacy text with the new CS4 text rendering engine

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).

• Choose OK to open the file without modifying the legacy text in the document. You can then choose to modify specific text blocks only. Or if you do not wish to update the legacy text, you can choose not to edit any of the text content and maintain the original appearance.
• Choose Update to modify all the legacy text elements in the current document to use the new CS4 rendering. Note that this option can sometimes affect the alignment of your document, since line spacing and other text rendering operations may not fit your design exactly the same way the document rendered in Fireworks CS3. When this occurs, you may have to realign the objects on the canvas to match the original layout.
• Choose Cancel if you have changed your mind about opening the current legacy file and you wish to cancel your request to open it.

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.

Editing text attributes in Fireworks CS4 that are preserved from Illustrator and Photoshop

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.

Ligature support

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:

1. Quit Fireworks CS4 if it is currently open.
2. Navigate to the following folder on your system:

   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"]\

3. Locate and open the file named Fireworks CS4 Preferences.txt in a text-editing program.
4. Use the Find command to search for the following string: EnableLigatures.
5. Change the value from false to true (see Figure 8).

6. Close the Fireworks CS4 Preferences file. Launch Fireworks CS4.

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.

Using the Text in Path command to wrap type inside a vector object

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:

1. Place your images on the canvas. Lay out the page based on your project's requirements.
2. Create a vector path that will define the area where the text will flow. You can use any of the vector tools such as Pen tool, or any of the vector shape drawing tools. In Figure 9, text is constrained to a narrow area next to the bowl and then wraps to display along the entire width of the page below the image. You can either draw the vector path using the Pen tool or draw two squares using the Rectangle tool, select both squares, and then choose Modify > Combine Paths > Union to make them become a single vector shape.
3. Type or paste the text that you want to wrap—anywhere on the canvas.
4. Press the Shift key and use the pointer tool to select both the text object and the vector path that will define the text wrapping area.
5. While both items are selected, choose Text > Attach in Path. The Attach in Path command causes the selected text to flow inside the defined vector path. If desired, you can choose to add more text or edit the existing text that is attached inside the path. You can also use the Subselection tool to select specific points to change the shape of the vector path, which causes the text to update and flow inside the new path's shape (see Figure 10).

Analyzing the new Type preferences

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.

Displaying English names for non-Roman fonts 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:

1. In Windows: Select Edit > Preferences and choose the Type category.

   In Mac OS: Select Fireworks > Preferences and choose the Type category.

2. Under the Options, check the check box next to the following item: Show Font Names in English.
3. Click OK. Quit and then relaunch Fireworks CS4 to apply the setting changes to the Property inspector.

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.

Limiting the number of recent fonts listed in Fireworks CS4

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:

1. In Windows: Select Edit > Preferences and choose the Type category.

   In Mac OS: Select Fireworks > Preferences and choose the Type category.

2. Set the Number of Recent Fonts field to zero, or just uncheck the same option so that the limit field automatically resets to zero (see Figure 12).

3. Click OK. Quit and then relaunch Fireworks CS4 to apply the setting changes to the Property inspector.
4. In the Property inspector, open the font list by clicking it.
5. After setting this preference, you can now navigate to a particular font quickly by simply typing the first few characters of the font name. The selected item in the font list will jump directly to that particular font.

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.

Where to go from here

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:

• Fireworks Exchange
• Fireworks Zone

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.