Jump to content


New Greeked Text extension

  • Please log in to reply
3 replies to this topic

#1 jdunning


    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 29 April 2009 - 07:32 AM

The extension can be downloaded here: http://johndunning.c...out/GreekedText

Posted Image


When creating rough mockups, it's often useful to suggest the presence of text without using actual words, which can distract the viewer from the overall layout. Even "lorem ipsum" dummy text requires the selection of a typeface and size, which may be too much detail for the mockup. In hand-drawn mockups (does anyone still draw by hand?) you could use a marker to draw lines of different lengths to suggest text, but this effect has always been a pain to create with software. The Greeked Text* auto shape makes it easy.

To create a Greeked Text shape, find it in the Shapes panel and drag it to the canvas. Horizontal rectangles of varying widths are displayed within the bounds of the shape to simulate a block of left-justified text. The auto shape has 8 yellow control points around its perimeter. Dragging one of these resizes the shape from that edge or corner. As you drag, rectangles are added or removed to fill the shape, and each rectangle's width is re-randomized. If you want a different rag on the text, just click a yellow control point without dragging to randomize the lines again.

There are also 3 blue control points in the upper-left and top edge of the shape (the blue diamonds, not the blue squares). The control point on the top-right adjusts how random the line lengths are. Drag it to the left to let the lengths vary widely and to the right to keep them more even. The top-left control point adjusts the line height and the one below that the line spacing. As you drag the height or spacing control point, the number of lines in the auto shape will adjust to accommodate the new values. These points move only half as fast as the speed at which you drag the mouse, making it easier to make precise adjustments.

To have the Greeked Text auto shape match a particular font size and line spacing, such as 11px Tahoma with 16px leading, set the value of its line height + line spacing equal to the text block's leading (16 in this case). Setting the shape's line height to the distance from the font's baseline to the top of the ascenders (9px for 11px Tahoma) usually gives a good approximation of that text size.

After creating several Greeked Text auto shapes, you may want to adjust, say, the line spacing on all of them. Select the shapes, then drag the line spacing control point on one of them. This will update the shape whose control point you dragged, as well as the control points on the other selected shapes. Unfortunately, due to a bug in Fireworks, the other selected shapes won't redraw to display the new line spacing. To redraw them, you can click a control point on each shape in turn. Or you can run Commands > Greeked Text > Redraw Selection, which updates all of the Greeked Text shapes in the selection. Or you can use Commands > Greeked Text > Set Line Height and Spacing to enter numeric values for the line and spacing values, which will also automatically redraw the selected shapes.

If you'd like to change the default line height, spacing or randomness, you can use the "Default - Set Line Height and Spacing" and "Default - Set Line Length Randomness" commands. After using these commands, any new Greeked Text shapes that you drag from the Shapes panel will adopt the new values. (Existing shapes will not be affected.) The defaults will persist across Fireworks sessions.

There are a few pre-defined Greeked Text auto shapes that come with the extension and can be inserted by running a command, such as "Insert - Grey - Height 9px - Spacing 7px". This inserts a 50% grey shape with the line height already set to 9px and the spacing to 7px. The "Insert - Hatched - Height 9px - Spacing 7px" command inserts a shape that has some textures and effects applied to it to make the bars look more like actual lines of text.

To create right-justified text blocks, simply draw out a Greeked Text auto shape and then use Modify > Transform > Flip Horizontal to flip it horizontally. The control points will still manipulate the right-justified lines. If you rotate the Greeked Text shape 90 degrees counter-clockwise, it can also make a quick-and-dirty mockup for a bar graph.

*Note that by "Greeked text" I'm referring to the representation of lines of text by plain bars, rather than actual typographical characters. This has commonly been done in word processors and desktop publishing programs when there is too much text to render quickly, as well as in hand-drawn mockups using markers. The "lorem ipsum" text that is often used as a placeholder is actually derived from a passage of Latin by Cicero, and is more properly called dummy text. More can be found at: http://www.creativeg...eeked-text.html

#2 spiral


    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 136 posts
  • Location:sweden
  • Interests:design, css, icon design

Posted 29 April 2009 - 11:13 PM

This will be VERY useful! no more clients asking what that "lorem" thing is all about!

Thank you!

#3 Alan



  • Root Admin
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 1,507 posts
  • Location:San Francisco, California USA
  • Interests:Longboarding, art and video games

Posted 30 April 2009 - 04:05 PM

John this is cool and glad you added some nice controls to access and tweak the greeked text as you wish. :) It took me a second (only a sec) to figure out you the two blue control nodes are for modifying the height and spacing of lines. Very nice man! :)

#4 abeall



  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 02 May 2009 - 09:38 PM

Yeah my clients ask me what lorem ipsum is all the time :) I even had one person enter it as a bug! I'll have to give this a shot, never thought about it but it makes a lot of sense. I can see this being good for wireframes where, as you say, character styles shouldn't be focused on.