Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

Typography Part 2

...keeping a firm hand on your text

A picture is worth a thousand words, but there's always some loudmouth who wants to add a thousand words to your picture. For that, you have to know a little more about FreeHand's text-handling methods.

We pretty much handled headline text in last month's article (Vol. 2, issue 9), so this month the emphasis will be on body text - or body copy as some of us old-timers call it. Your boss probably calls it the "small print."

I assume that you've read last month's article. In it, you'll learn about the construction and operation of text blocks and the basic job of entering text on a FreeHand page.

The "ABC" Tab
There's something about an "R-ball" - registered trademark symbol, "TM" symbol, and other legal marks that I don't like, so I make them smaller and use Baseline Shift to move the marks to align with the top of the text.

To stylize paragraphs, most of the work is done in the Object panel (see Figure 1). The Paragraph button has been selected, opening the options we can apply to paragraphs. The first of the five spaces is a text entry for the space above a paragraph. It's common for novices to place a double return between paragraphs, but if you really want control over your typography, enter a value here.

If you just enter numbers without checking the units of measure you have set for your document, you could be surprised to see your text disappear. For instance, if you want two points of space before a paragraph and enter "2" in the top field - but the document is set in inches - you'll get a two-inch gap between paragraphs.

Next in paragraph stylization is the space after a paragraph. If you also have space before measurements, the effect is cumulative. Entries can be made for left and right indents (shown in Figure 2), and at the bottom of the row is the spot to create a first-line indent. Beneath those text fields, you see the Hyphenate option. Place a check in it and your text will hyphenate automatically; delete the check and words won't break. The Edit button allows you to input how much of the last line must be filled with text before it justifies (the Flush Zone). Hanging punctuation and rules were covered last month.

Notice the size of the text block in Figure 2 and compare it to the size of the text block and indents in Figure 3. In Figure 2 the text has been selected with the Text tool, which brings up the Text section of the Object panel. The text is indented from the margin or boundary of the text block when using paragraph indents. In Figure 3 the top text block has been selected with the Pointer tool, bringing up the "Clip Text Block" entry in the Object panel. Here, the text block itself is indented when using indents based on the text block, as you can see in the bottom text block with the text itself selected. For the more curious among you, it's called a Clip Text Block because I used Paste Inside for the dashed lines, creating a clipping path in the process.

The point of the text block is that you can apply a color to a text block, then inset the text from the sides - similar to adding padding to a cell in Dreamweaver. In doing so, you can move the text block around the page, reshape it, edit the text, and still maintain a single object on the page. The Object panel displays the dimensions of the text block and its location on the page, and gives you fields to enter the inset on all four sides.

There are often times when you will have a paragraph of text and the last line doesn't seem to obey the leading settings you've applied. When you see this - it's usually too much space - just place the Text tool cursor at the end of the line and press Enter or Return. This gives you an extra blank line beneath the paragraph, but brings the last line of text into proper leading. If you need to get rid of that extra blank line, usually you can use the keyboard arrow key to drop down to the beginning of the next live line of text, then press Delete or Backspace to eliminate the blank line. This behavior is common to page layout programs as well.

Text on a Path
Sometimes it's not enough to get words on a page into nice straight lines, squared off paragraphs, and easy to read. No, sometimes you want to have text slither around the page or circle a logo. In FreeHand, it couldn't be easier. Start by creating your text; set the size fairly close to your desired result. Then draw your path. For an open path (top of Figure 4), all you have to do is Shift-select the text and the path and choose Attach to Path from the Text menu. As long as the text stays "live," you can edit it any way you want - size, font, style, spelling - it's all available for you.

The really scary part about placing text on a path is that it becomes ugly in a really bad way on a Mac! It's a problem between OS X and FreeHand, but evidently the text becomes aliased and doesn't happen on Windows machines. It's nothing to worry about, however, it prints fine. If it offends you - and you know you don't have to edit the text - you can convert the text to paths to get clean text. Figure 4 shows the aliased text, followed by the text converted to paths.

Just below the text on a path, you see a rather crude snake shape. It was converted to a brush and applied to a clone of the original path. The text was placed above the snake brush and a clone of the text was changed to white and offset.

Figure 5 shows what to do if you want your text to follow multiple paths. In this case, the snake path was cut in two and the text was applied to one of the paths. An overflow box appeared at the end of the text and was simply dragged (with the Pointer tool) onto the second path.

Text on an Ellipse
Applying text to an ellipse is a daunting task at first. But it's really not that much of a mystery. It comes down to a couple things: 1, you have a circle, and the circle has a top and a bottom; 2, you must place a Return between the text you want on top and the text that goes on the bottom. That's it. Whatever goes before the carriage return will appear upright on the top of the circle, and everything after the return will be upright on the bottom. If you want the text to completely encircle an object, just don't put a return in the text.

You'll notice that somewhere along the text on a path there's a little triangle. That triangle allows you to move the text along the path. Just click and hold it with the Pointer tool and drag until you like what you see.

In Figure 6, text has been applied to a circle, and as you can see in #2, the text became aliased, so was converted to paths in #3 for the purpose of the screenshots here. The red dart in #2 is pointing at the text's alignment triangle. Number 4 added two more circles, and the entire group was distorted using the 3D Rotation tool, applying a bit of perspective to the drawing. For the final drawing in #5, a clone of the ellipse was dragged down a bit, and a second clone of the top ellipse was punched out of it. A gradient fill here and there finished it off.

How Do I Get Text OFF a Path?
It's too easy. Select the text/path, and choose Text > Detach from Path. The original path and original text will both be intact.

Text Inside a Path
We have the same basic principles at work when we want to place body copy inside a path. Copy the text to the Clipboard and select the closed path you want to fill with text. Go to Text > Flow Inside Path and the text will appear. To make the text continue to another closed path, click and drag the text overflow icon into the new object, just as you would to continue to another path. This isn't to say that everything will work out fine - as you can see in Figure 7, the text fits pretty well, but no one is expected to attempt to read it! Leading and letterspacing must be adjusted to get a good fit, and adjustments were made to inset the text block. The large letter shapes were cloned for the extrusion, and the originals were used for the text flow. Text can flow into any closed path, I happened to choose letter forms for this example. To remove the text from the inside of the path, select the text with the Pointer tool and go to Text > Detach from Path. The text will appear in a block above the closed path.

Text Around an Object
Typesetting is all about readability. That said, ignore the example in Figure 7! Instead, let's look at running text around an object. The rules are pretty simple - you can't run text around a group or a blend. Figure 8 shows text running around the "MX" shape. In order to create this effect, place the object(s) above the text (use Modify > Arrange > Bring to Front). Then Shift-select the block of text and choose Text > Flow Around Selection. A dialog box opens and you can choose to flow text around an object by clicking the option shown in the figure, or flow over the object by clicking the button on the left. The Standoff area allows you to enter an amount you wish to have as "white space" around the object. The numbers certainly don't have to be symmetrical, and feel free to add as much as you need to keep text from flowing where you don't want it to flow. After you've entered your numbers (and you can leave them set to zero if you already have enough clearance on your shape), click the OK button and the text will reflow. If you move the object around, text will reflow again - nothing is cast in stone.

Groups and blends don't mean you can't cheat, though! Go ahead and make your group or blend, then create another shape directly above that object, and use that object for the runaround. If it's a complex shape, use the Pen tool to make the shape for your white space. When it's complete, give it a fill and stroke of none, and use it as the text runaround. At that time, you can group the ghost shape and your original object, and FreeHand doesn't seem to care. I have noticed, however, that moving that combination off the text leaves the text indented as if the objects were still there. A simple resize of the text block seems to fix the problem.

Run Me a Tab, Billy!
One of the greatest text attributes FreeHand has going for it is the way it handles tabs. For the most part, you can create some pretty decent tables, either by importing data from a spreadsheet or word processing program, or by entering information directly. Word processing files must be RTF (Rich Text Format) files, and you can save an Excel spreadsheet as Text (Tab Delimited). You can also copy a table from FreeHand and insert it directly into an Excel document.

Tabs are pretty straightforward, just remember to select all the text in the table with the text tool first. It's easiest to click anywhere in the table and then choose Edit > Select All. To be honest, you don't have to have all of the first or last lines of text selected - a portion will do - but it's good practice to select all the text. Then it's a matter of dragging a tab from the Text Ruler to its proper position in the table. You don't have to be precise when you're first setting the table up, and if you have a tough time getting the tab exactly where you want it, just double-click the tab and a small dialog box opens that allows you to enter an exact location, leader, and tab alignment, as seen in Figure 9.

Tabs are placed by dragging them to their position in the space directly above the ruler scale. To remove a tab, simply drag it out of that space and release the mouse. To apply a leader, click on the leader drop-down menu and choose from dot, dash, or underscore. The leader will go to the tab immediately to the left of the one you selected.

The best feature about FreeHand's tabs is the wrapping tab. Figure 10 has the cursor pointing to the wrapping tab - its icon is a two-headed, downward-pointing arrow. When you use this tab, text is always aligned to the left, and ragged right. Figure 9 has a wrapping tab in the first column, so there's only one wrapping tab marking the right limit of the text that wraps from one line to another. In Figure 10, the wrapping column is in the middle, so it requires a wrapping tab on either side of the column, plus a center tab for the header row. Normally, you don't mix tabs of differing types on separate lines like this, but with the wrapping tab it's okay. Both of the tables are set up with a text block indent and a border; the colored bars have been cut and pasted inside the text block.

Importing Text from Other Programs
If you need to import a file from Adobe Illustrator or Adobe Acrobat, I don't envy you. I don't get predictable results from the Windows or Mac side. The best I can do is copy the file to the Clipboard from its native program and paste it into FreeHand. But that's only half the battle. Figure 11 shows what happens to a single line of text copied and pasted from an Illustrator document.

Single words are broken into characters, seemingly without rhyme or reason. Your only recourse is to select each block of text and copy/paste it into a fresh text block. Tabs cease to exist completely. Frankly, it's much easier to paste the text into Microsoft Word and re-export it. If you're exporting a FreeHand file to Illustrator, be warned that the programs treat text differently, and line breaks will change. You may lose text in truncated text blocks, and life will be miserable to say the least. Whenever I'm called on to create an Illustrator version of a FreeHand document, I convert all the text to paths first. If the recipient needs to work in the text, then you're better off doing the job in that other program (ugh!) in the first place.

Vertical Text
When clients ask for vertical text, they usually get an earful from me about how difficult it is to read. I guess it's because not every letter is symmetrical, and the "color" of the text becomes spotty - even when the text is centered. But since they write the checks, I give them what they want. Figure 12 shows how to create vertical text without hitting a carriage return after each character.

Set the text you want in the normal fashion in a fixed-size text block with centered alignment. Then drag the right-bottom corner point/handle of the text block to a vertical position just a bit wider than the widest letter. Double-click the bottom-center control handle to make the text auto-expand vertically. If the letters are too close together or too far apart, double-click the bottom control handle again, and drag the text block from that point up or down to adjust leading.

Textual Issues
Apple's operating system improves every couple months or so, and when it does, sometimes it doesn't play nicely with FreeHand and other programs. It seems to be especially grouchy when it comes to fonts. It's a known issue that certain fonts - Helvetica Condensed for one - will appear fine on screen, but when the file is sent to the printer, some characters are replaced. The most notorious is the bullet character being replaced by the Yen symbol. What's most troubling about this is that it happens only sometimes. I've taken to converting my bulleted text to paths, or simply creating my own bullet shape and pasting the graphic into the text as an inline graphic.

The Odd Text Tip or Two

  • You can switch from auto-expanding to fixed-size text blocks in the Object panel when the text block is selected with the Pointer tool. Just toggle the buttons to the right of the numerical fields "w" and "h" shown in Figure 3.
  • You can place any graphic object in a line of text by simply copying it and placing the text cursor in the text. Choose Edit > Paste, and the graphic element will flow with the text. Use Baseline Shift and Kerning as necessary.
  • A text block can be duplicated by pressing the Option/Alt key while dragging the text block.
  • You can force text in one block of linked text to flow into the next block in the link by going to Text > Special Characters > End of Column.
  • The Preferences panel allows you to always use the Text Editor, have new text containers auto-expand by default, display a font preview in the fonts menu, and show a vertical line as you're dragging a tab.
  • FreeHand really hates less-than-perfect fonts and they will cause the program to crash. If you're experiencing crashes in certain documents, it's more than likely that you have a corrupt font in the document. With Apple's OS changes, some fonts were nixed, and older FreeHand documents could have the "bad" fonts in them, creating nasty crashes. The solution is to use a font utility to fix or find and delete the bad fonts.
  • Watch it when you add a stroke to text. Sometimes FreeHand will place a really squirrelly path around some letters or lines and apply a normal path around others. It looks as if you've added a stroke with a Sketch effect - definitely not anything you can use. This effect happens both with live text and text that has been converted to paths. When this happens, break the text down to its lowest components - individual characters if necessary - and reapply the stroke. Sometimes, choosing one line of text at a time is all that's necessary.

More Stories By Ron Rockwell

Illustrator, designer, author, and Team Macromedia member Ron Rockwell lives and works with his wife, Yvonne, in the Pocono Mountains of Pennsylvania. Ron is MXDJ's FreeHand editor and the author of FreeHand 10 f/x & Design, and he co-authored Studio MX Bible and the Digital Photography Bible. Ron has just introduced a "Casual FreeHand" course available at www.brainstormer.org.
He has Web sites at www.nidus-corp.com and www.brainstormer.org.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

IoT & Smart Cities Stories
Moroccanoil®, the global leader in oil-infused beauty, is thrilled to announce the NEW Moroccanoil Color Depositing Masks, a collection of dual-benefit hair masks that deposit pure pigments while providing the treatment benefits of a deep conditioning mask. The collection consists of seven curated shades for commitment-free, beautifully-colored hair that looks and feels healthy.
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
We all love the many benefits of natural plant oils, used as a deap treatment before shampooing, at home or at the beach, but is there an all-in-one solution for everyday intensive nutrition and modern styling?I am passionate about the benefits of natural extracts with tried-and-tested results, which I have used to develop my own brand (lemon for its acid ph, wheat germ for its fortifying action…). I wanted a product which combined caring and styling effects, and which could be used after shampo...
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected pat...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Druva is the global leader in Cloud Data Protection and Management, delivering the industry's first data management-as-a-service solution that aggregates data from endpoints, servers and cloud applications and leverages the public cloud to offer a single pane of glass to enable data protection, governance and intelligence-dramatically increasing the availability and visibility of business critical information, while reducing the risk, cost and complexity of managing and protecting it. Druva's...
BMC has unmatched experience in IT management, supporting 92 of the Forbes Global 100, and earning recognition as an ITSM Gartner Magic Quadrant Leader for five years running. Our solutions offer speed, agility, and efficiency to tackle business challenges in the areas of service management, automation, operations, and the mainframe.