Vertically centering text

August 14, 2000
by Pat McClellan

Dear Multimedia Handyman,

I read your excellent article on dynamic width adjustment of Text members. This showed that it is possible to get some info about the text width. A project I am working on at the moment requires me to center text vertically within a box. Do you have any ideas how to do this?

Brad Eustace

Dear Brad,

Actually, it's a lot easier to deal with the vertical properties of Text members than the horizontal ones. You have two choices: you can insert a blank line above the text and then change the fontSize of that blank line to space the text block down; or you can adjust the topSpacing of the Text member. Let's look at topSpacing first. The topSpacing property of a text member refers to the number of pixels between the paragraphs in that Text member. That means that if you change the topSpacing value from the default of zero, then that number of pixels will be inserted before each paragraph. So, topSpacing will only work for your purposes if you can be assured that there are no RETURN characters in the text.

On your Text member, get info, then click options and select fixed for the framing. Put your Text member on stage and manually set the sprite so that it exactly fills the space you need to center within.

Each time you change the text in the text member, you'll need to reset the topSpacing. Calculating the amount is fairly easy. Calculate the difference between the height of the text and the height of the sprite. For example, assume you're using member 1 where you have text that is 158 pixels high, and sprite 1 which you've fixed to fill a space of 288 pixels.

sprite(1).height - member(1).height

That result is 130. That means that if you don't do anything, then you'll have 130 pixels of empty space below your text. What you want to do is divide that space in half and put 65 pixels above the text, leaving the other 65 below.

member(1).topSpacing = (sprite(1).height - member(1).height)/2

That's it. You probably want to make sure that the text is actually smaller than the sprite first.

if member(1).height > sprite(1).height then
  member(1).topSpacing = (sprite(1).height - member(1).height)/2
else
  -- alert "text is too long to center"
  -- do whatever is needed to assure that the text fits in the given space
end if

If you think there's the possibility that a RETURN character will be included in the text, then you'll want to avoid the topSpacing approach and go with the first alternative I mentioned above. First, do the same kind of calculation you did above to find the difference between the height of the text and the fixed height of the sprite. But this time, instead of setting the topSpacing, insert a line before the text (actually a space and a RETURN character) and then set the fontSize of that (apparently) blank line so that the text bumps down the right amount. Try it out in this demo:

Director 7 download for Mac or Windows.

It's not really likely that you'll have a "Center Vertically" button in your application. Therefore, don't expect to simply drag and drop the behaviors I used in the demo. You're actually going to have to understand what I'm doing here (but luckily, it's really not too complex.)

In the following script, thepWhichMem property refers to the Text member and the pFontSize property is the default fontSize for the text that you enter. There is the possibility that the text you need to center has already been centered once when it could have contained different text. So, you need to start out by resetting the fontSize of the entire text member to the default, pFontSize. Next, if it was centered before, then line 1 of the text will be a space character, which you need to delete.

Now we get down to the actual calculations. Start by assuring that the text height is shorter than the space you have on Stage. If so, then you'll add the blank line at the top. Finally, subtract the text height from the sprite height, divide it by two and set the fontSize to the result. Actually, there's one more thing to note. If you have a fontSize of 12, the actual height of the text is 16, to allow some spacing between the lines. Therefore, I've multiplied the result by .75 to allow for this difference.

on centerViaFontSize me

-- reset fontSize
pWhichMem.fontSize = pFontSize

  -- delete blank line if one exists
  if pWhichMem.line[1] = space then
    delete pWhichMem.line[1]
  end if

  -- check to assure text is shorter than the sprite
  if pWhichMem.height < sprite(pWhichSprite).height then
    -- set local variables just for clarity
    myTextHeight = pWhichMem.height
    mySpriteHeight = sprite(pWhichSprite).height

    -- add a blank line
    pWhichMem.text = space & RETURN & pWhichMem.text

    -- set the fontSize of the blank line
    pWhichMem.line[1].fontSize = ((mySpriteHeight - myTextHeight)/2) * .75

  else

    -- alert "text is too long to center"
    -- do whatever is needed to assure that the text fits the given space

  end if

end

Overall, this fontSize approach is the safest way to center your text vertically. Test it out in the demo above and be sure to include some RETURN characters. Good luck with your project.

Patrick McClellan is Director Online's co-founder. Pat is Vice President, Managing Director for Jack Morton Worldwide, a global experiential marketing company. He is responsible for the San Francisco office, which helps major technology clients to develop marketing communications programs to reach enterprise and consumer audiences.