setting vertical alignment in text fields and buttons

LiveCode is the premier environment for creating multi-platform solutions for all major operating systems - Windows, Mac OS X, Linux, the Web, Server environments and Mobile platforms. Brand new to LiveCode? Welcome!

Moderators: Klaus, FourthWorld, heatherlaine, robinmiller, kevinmiller

Post Reply
derek
Posts: 17
Joined: Tue Oct 17, 2006 9:39 pm
Location: New Mexico

setting vertical alignment in text fields and buttons

Post by derek » Fri Jan 19, 2007 9:10 pm

Is there an easy way to adjust the vertical alignment of text in a text field or button? I frequently want the text to be centered vertically as well as horizontally, within the text field. I would like to be able to choose "center vertically," as I can in Excel, and as I can for horizontal centering in Revolution. I know that I can manually adjust the Text height value in the Object Inspector, but this has to be redone each time the font size or field size is changed.

I would also like to be able to vertically center a button label. In this case, I don't have the Text height value in the Object Inspector. Capital letters are well centered vertically, but lower case letters, and some symbols, such as plus and minus, appear below the button's center line. If no capital letters are present, the text looks awkward. I'd like to be able to nudge the text up or down, when needed.

Better still would be for the automatic centering to work properly in the absence of capital letters. Is there a way to coax Revolution into displaying button labels that contain only lower case letters and/or symbols with proper vertical centering?

Any ideas?

Derek
Derek Roff
Language Learning Center
University of New Mexico

marielle
Livecode Opensource Backer
Livecode Opensource Backer

Re: setting vertical alignment in text fields and buttons

Post by marielle » Sat Jan 20, 2007 2:45 pm

derek wrote:I would like to be able to choose "center vertically," as I can in Excel, and as I can for horizontal centering in Revolution.
Are you talking about controls or field content? If field content, then that's only a matter of selecting the field and select "text align-> center" either via the menu or the tool palette (go to the text formatting section).

If controls, then pop the properties palette, go to align, select all the controls you want to align, and choose the little icons on the right with two boxes and a line in the middle (horizontal or vertical alignment on the box center).
derek wrote:If no capital letters are present, the text looks awkward. I'd like to be able to nudge the text up or down, when needed.
Not sure I understand what you mean... a picture would help.

Marielle

marielle
Livecode Opensource Backer
Livecode Opensource Backer

Re: setting vertical alignment in text fields and buttons

Post by marielle » Sat Jan 20, 2007 5:45 pm

Ok, re-reading this, I understand better. You want to align the text within a field. And you want to align it vertically. No, you can't do that directly. What you can do, however, is manipulate the "margin" information.

Margin is either a single value or a sequence of 4. If 4, then it corresponds to left, top, right, bottom. With 8,20,8,8, you will cause the text to get down a bit.

You can use formattedHeight to get to know the height of the text part in the text field. The code below illustrates this, with a field on the card and a button with the following script:

Code: Select all

on mouseUp

  --- storing the value of the margins variable
  put the margins of field 1 into tMargins
  if the number of items of tMargins is 1 then
    put tMargins,tMargins,tMargins,tMargins into tMargins
  end if

  --- setting the top and bottom margins to 0 
  --- to ensure accurate measurement 
  put 0 into item 2 of tMargins
  put 0 into item 4 of tMargins
  set the margins of field 1 to tMargins
   
  --- Getting height values for field and text content 
  put the height of field 1 into tHeight
  put the formattedheight of field 1 into tTextHeight
  
  --- Computing the margin to add on top of the field 
  put round((tHeight-tTextHeight)/2) into tTopMargin
  put tTopMargin into item 2 of tMargins
  set the margins of field 1 to tMargins
  
end mouseUp

Post Reply

Return to “Getting Started with LiveCode - Experienced Developers”