Button Names on top of their icon?

Brahmanathaswami brahma at hindu.org
Fri Aug 28 23:17:45 EDT 2015


@ Scott: iconGravity: wow... undocumented feature and this really should 
be exposed in the button inspector.. it works.

@ Paul: setting the pattern works.

So far so good, but but the issue is also the vertical alignment of the 
button name:

Solution: Set the pattern to the image... set the rect of the button to 
exactly the rect of the image and you will clean up any appearance of 
the image repeated along the edges (it's a pattern); then use the 
textProperty/margins of the button to position the name to center it on 
the button. hurray!

Long story:

In both cases.. the default vertical center line of the name of the 
button is shifted down from the actual vertical center of the button  
itself -- and, now,  the icon therein. The engine algorithm seems to be: 
hang the text from the top of the "m" height (top of the lower case 
letters)  on the center line of the button. this seems to be, from my 
tests "sticky" , ... as you change size of the type for the name... it 
consistently places the text with the top of the lower case letters 
aligned to the vertical center of the button

Now... we have this  in the dictionary as a possible way to "tweak" 
positioning in the iconGravity entry... but it does not help us if you 
use iconGravity...

Comments:
The margins and borderWidth are taken into account when rendering the 
icon - the rectangle the icon is placed in is taken to be the button 
rect after subtracting margins and borderWidth all the way round.

But it does not affect the text position.

but if you use the pattern then setting the button textProperty margin 
gives us what we want as documented under the dictionary entry for 
"margins" :

"Use the margins property to control how close text within a button or 
field can come to the object's edges, how close objects in a group can 
come to the group's edges, and how the label of a graphic is displayed."

I  wonder if it the button name position holds across platforms...

BR

Paul Hibbert wrote:
> If the image is the correct size for the button, you can assign it to the backgroundPattern (fill) instead of the icon.
>
> Paul
>
> - hide quoted text -- show quoted text -
>> >  On Aug 27, 2015, at 21:22, Brahmanathaswami<brahma at hindu.org>  wrote:
>> >  
>> >  Is there some way to get a button name to be centered on top of it's icon?
>> >  
>> >  
>> >  This is a context where the icon is designed to be a background for the button and the center area is clear, plain, flat colored and meant to take the button label. Of course can import the image and put a transparent button on top, but ideally we could center the button name on top of the icon itself... but I can't find a way to do that... is there a way?
>> >  
>> >  BR




More information about the use-livecode mailing list