Share:

" /> Visio Guy » Text on a Circle Visio Shape
Home » Add-ins & Tools, Shapes

Text on a Circle Visio Shape

Submitted by on May 9, 2014 – 4:25 pm | | 8716 views 13 Comments

text-on-a-circle-shape-thumbMany Visio users would like to create graphics with text running around a circle. I’ve come up with a third iteration to solving this problem.

This time, you get a single shape, with no need for VBA macro code!

While Visio has no built-in way to put text on a circle, visguy.com has offered two work-arounds in the past. Maybe you’ve seen them: Circular Text Generator (version 1), Circular Text Generator (version 2).

Those solutions required the use of VBA macro code, which confused a lot of users, produced a disjoint set of shapes that needed to be used–and kept–together (further confusing users), and produced a static result. If you wanted new text-on-a-circle, you had to regenerate a new set of characters.

This latest version is now a single shape. You can edit the text on the shape to your heart’s consent. The only drawbacks to this version are that the number of characters are limited, resizing of the higher-character versions of the shape can be slow, and I’m only offering a four-character trial version for free (I have mouths to feed!)

Editing

Using the shape is quite simple. You just mix and match these actions:

  • Select and type, or double-click and edit existing text
  • Fine-tune settings by editing Shape Data fields or by right-clicking
  • Position text and background circles using control handles
  • Right-click and choose Update if anything goes wonky (this happens for larger amounts of text, jump to the Refresh section near the end of the article if you want more information)

The editing uses a trick I’ve used several times with other visguy.com offerings. The text you edit is actually invisible. You only see it while typing. Thereafter, subshapes within the group pick out individual characters, and rotate them properly:

editing

This adds the advantage that you don’t have to twist your neck oddly in order to read the text as you type.

Here’s an animated GIF I whipped up to give a feel of how it flows. Features will be explained in detail in the sections after.

text-on-a-circle-gif

Features

The easiest way to see all of the shape’s features is to look at the Shape Data panel. Here we can see six fields, with the possible values shown at right:

shape-dataLet’s go through each setting one by one, to get a better picture of how each field affects the look of your text on a circle shape.

Show Guides

The shape has guide-styled geometry that appears as blue dashed lines. These serve as visual references to help you configure the shape.

There are three guide elements:

  • Circle that the text rests upon
  • Crosshairs at the center of the circle
  • Clock-hand that shows the left/center/right side of the text, depending on the Text Alignment setting

The guides don’t show up when you print, or when you export the shapes to an image format or PDF. Nevertheless, you can turn them on or off with the Show Guides setting:

show-guides

One scenario where this is particularly useful is if you make presentations directly from within Visio. In that case, the guides might be a distraction. So you can simply select all the text-on-a-circle shapes, then use Shape Data to set Show Guides to False.

Text Orientation

Depending on where you place the text, and which direction your language goes, there are four logical orientations.

The setting makes more sense once you see an example of what can go “wrong”. Here we have the typical, default “Left-to-right Top” text. As we rotate the text around to the bottom of the shape, it becomes upside down and harder to read:

left-to-right-examples

If you have lots of text that goes all the way around the circle, you can’t avoid this situation entirely, unless you stack two different shapes on top of each other, with two different settings. In that case, you would set the top text to “Left-to-right Top”, and the text at the bottom to “Left-to right Bottom” as shown in the left column below:

text-orientationThe shapes in the right column say “Happy New Year” in Arabic (according to Google). Arabic uses a right-to-left writing system, so this is simply the mirror case of the shapes on the left.

Text Alignment

You position the text by adjusting a control handle that is always in the middle of the little blue guide-circle that lies along the radial clock-hand line. Using the Text Alignment setting, you can choose to have the text aligned by the left/start, center or right/end. As usual, the image makes a lot more sense than the text:

text-alignment

Text Baseline

The “baseline” of a font or line of text is the conceptual bottom, along which the characters are positioned. For typography types, it’s probably a super-important characteristic, worthy of a much more accurate definition. As applied to this shape, it’s another parameter that you can set, which moves the text up or down, in relation to the baseline.

Here we can see that negative values push the text up above the baseline, while positive numbers push it down. 0% is the default setting. Since you can change the radii of the inner and outer circles, the baseline setting isn’t super-important:

baselines

Horizontal Spacing

Sometimes you want your text to fill up a larger amount of space than the number of characters naturally wants to do. The Horizontal Spacing setting allows you to stretch out the space between characters, without resorting to cheap tricks like adding spaces between characters:

horizontal-spacing

Adding spaces between characters is a bad idea for a couple of reasons. First, it uses up valuable characters in a shape that only handles a limited amount of text. Second, the width of a space probably changes between characters due to kerning, although I don’t really know how much kerning Visio actually does with its text.

Background

You can choose to have no circles, a single circle, or a ring as a background for your circular text. Just set the Background setting in the Shape Data panel:

backgrounds

Context Menu

Almost all of the settings in the Shape Data panel are available by right-clicking the shape, plus a few extra items. Baseline is missing, Text Orientation only has two values to choose from, and Horizontal Alignment only has four.

Keep in mind that when you right-click a shape, only the primary selection (first selected shape) will be affected when you choose the custom actions at the top of the menu. If you need to change multiple shapes at once, use the Shape Data panel.

context-menu

You’ll notice a few items in the menu that aren’t in the Shape Data panel. Let’s go over those:

Refresh

The purchasable shapes come in 25-, 50- and 100-character versions. For some reason, on the higher-character version, changing certain settings can cause the text to get out-of-whack. I’ve worked and worked on this problem, but I was not able to keep it from happening. I think the chains of cell references inside the ShapeSheet for this beast-of-a-shape are quite long, and at some point, Visio gets overloaded.

I was, however, able to come up with a workaround. Just right-click and choose “Refresh”. This forces the shape to do a lot of recalculation, and your characters should magically jump into their proper positions.

In this example, a change to the Text Orientation causes the characters to get jumbled near the end of the phrase:

refresh

Right-clicking Refresh clears it right up in a jiffy!

I know it seems a bit 1990’s, but I just couldn’t find any other solution. Remember, we are pushing Visio into areas where it wasn’t originally conceived to go!

Live Dynamics

Visio shapes support “live dynamics”, which lets you see how the shape will react as you resize it, and as you move control handles. Since this shape has a large amount of ShapeSheet references, it can get pretty slow, especially in the versions that have more than 25 characters.

For this reason, Live Dynamics is off by default. And if you are doing lots of resizing, you should leave it off. But once you’ve got the shape to the size you want it, live dynamics performs just fine when you are rotating the text around the circle with the control handle. Even for large numbers of characters. So try turning it on, it’s pretty fluid, and cool to watch!

Show Warning Text

For performance and economic reasons, there are different versions of the shape, that support different numbers of characters. If you exceed this number, a red warning appears. Here we have a “25-banger” shape that has run out of space and only shows the “ch” in “characters”:

 

overflow-warning

If you plan on shortening the text later, you might want to suppress the warning. Just right-click the shape and uncheck “Show Warning Text”. If, in the future, you reduce the text to below the maximum characters, and then exceed it again, the warning will reappear, so you don’t have to worry about it being permanently asleep.

Angle Presets

Sometimes it is hard to position a control handle exactly as you want it. For this reason, there are four presets available for quickly snapping your text clock-hand to the 12, 3, 6 and 9 O’Clock positions.

Open Group Window…

When editing the shape normally, you can’t give individual characters or runs of characters different styling. This is because the text you normally edit is actually mirrored by subshapes within the group.

Once you’ve set your text, you can can go into the group and style individual characters. Just right-click, select Open Group Window, then manipuplate individual character subshapes.

In fact, I did just that when making the presidential seal graphic that serves as the thumbnail for this article.  The “OF THE” bits needed to have a smaller font size, so I went inside the group, selected the shapes, then reduced their font size:

group-windowIf you edit the outer text later, keep in mind that you might end up with the wrong formatting for the wrong characters within your new text.

The almost-finished presidential seal:

text-on-a-circle-shape

The shape contains two text-on-a-circle shapes. The main text, and the white-on-blue that has a bunch of asterisks. Getting the spacing on the asterisks just right involved tweaking the font size, then tweaking the Horizontal Spacing setting. Since these are the 100-character versions, changing the settings took a few seconds to complete. It’s a busy shape! You can also see a small gap at the bottom of the stars. The shape has no automatic way to distribute characters evenly around the entire shape. Maybe in the next version!

Get the Text on a Circle Visio Shape

Free Version

The free version has all of the features described above, but only supports four characters of text. Get a feel for how the shape works, then buy the full version:

Text on a Circle FREE (21.62 kB) - 336

Full Version

Buy the full product: Text on a Circle Visio SmartShape on Gumroad

 

13 Comments »

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

*