Text Fields and Truly Centered Text

[cmhjon]

Hi everyone,

After adding a text field, entering some text, centering it, setting the text margins and field border width to zero, not only is the text not exactly centered but its also partially cut off:

Text.jpg (9.66 KiB) Viewed 6050 times

Why is this?

To me, if you center text in a text field, it should be CENTERED and if I set the margins to zero, the top of the text should align with the top of the field and not be cut off.

Thank you,
Jon

[dunbarx]

Hi.

Play with the margins in "text" pane in the inspector. The margins are ordered "left, top, right, bottom" and have values in pixels. Change the second item in the string to a higher number.

Craig

[dunbarx]

Also, I just remembered, there are relatively new properties, the "spaceAbove" and "spaceBelow", but these apply to paragraphs.

Craig

[dunbarx]

Also, I just remembered yet again, the margins work like the "tabStops", in that a new field defaults to "8". This means that all four are set to "8" as well. If you change these, you have to set each explicitly, in your case, perhaps "8,16,8,8"

Craig

[dunbarx]

Now I know how Richmond's mind works.

The margins property has a certain structure to it. In the current case, the idea is to set the second item to a higher value to bring the line of text lower. However, it is not possible to have the "top" item (number 2) overridden by the "bottom" item. Same with the right being subject to the left.

If one brings the text downward by increasing item 2, changing item 4 to a larger value does nothing. These opposing items do not fight each other.

It seems that the left and bottom values are ignored. I cannot remember this being true, but one only needs the first two items, essentially setting the "topLeft" of the field text, and nothing else has any effect. In fact this makes sense; how could they fight each other, since the text of a field is not an "object" with a rect?

Craig

[dunbarx]

AHA. The third and fourth items are "locked" only when the field is left justified. In center or right justification, there is interplay between left and right. Anyone remember what the properties are for up and down?

Craig

[richmond62]

Now I know how Richmond's mind works.

That's a relief, because I don't.

What is all the 'guff' about centered text?
-

-
Of course if one wants it "halfway down the stairs" on has to fiddle around a bit more:
-

-
142 = (half the height of the field) + (half the size of the text)= (256/2) + (28/2)

[dunbarx]

Richmond.

That's a relief, because I don't.

Obviously, great minds...

It may not be an issue of the textHeight, which to work requires that the "fixedLineHeight" be set to "true". Rather manipulation of the "margins" property allows one direct control, regardless of other settings.

Craig

[dunbarx]

Jon.

Have not forgotten you.

The only way I know of to see what you are seeing is to set the top margin to a negative number. This would pull it up through the roof. Is this possibly what you have?

Craig

[cmhjon]

Hi Craig,

Here's what I see:

Best regards,
Jon

[Klaus]

Hi Jon,

use this for your margins if you only want a margin at the top -> 0,4,0,0
Seems to be neccessary in any case and I found that 4 is the minimum to display the complete text.

Best

Klaus

[dunbarx]

Klaus,

Jon has a negative topMargin. Setting item 2 of the margins moves the text as needed, as was mentioned above, but what is with the location of that text from the very first post?

Craig

[stam]

To me, if you center text in a text field, it should be CENTERED and if I set the margins to zero, the top of the text should align with the top of the field and not be cut off.

LC is weird like that. It doesn’t behave like what you’d expect from other languages, where you would be right. Margins are used to position the text correctly.

LC only centers text horizontally in the property inspector. As others said above, you need to adjust item 2 of the margins to adjust vertical positioning - the topMargin is shorthand for this (while you’d normally see just one number, that’s just shorthand for saying that all 4 items of the margins are the same). You can do this manually, but if you want to do it automatically - eg when resizing the field or if it's resized automatically with the stack - it gets more difficult to get it right.

The best solution I've found is courtesy of Bernd - he very kindly added some code for my tristate script widget to do just this.
I've now abstracted it into a stack-wide command and I use it everywhere (including data grid fields - the text stays centered vertically if the row height changes for example).

This command can reside in the stack script or in a library and you just need to pass it the long id of the field you want centre-align vertically:

Code: Select all

command centerVertical pField // the long id of field
    local tFieldY, tFormatRect, tFormatheight, tFormatHalfHeight, tCurrFormatTop, tCenterField_To_TopTextDiff
    put item 2 of the loc of pField into tfieldY
    put the formattedRect of line 1 to - 1 of pField into tFormatRect
    put item 4 of tFormatRect - item 2 of tFormatRect into tFormatHeight
    put tFormatHeight div 2 into tFormatHalfHeight
    put item 2 of tFormatRect into tCurrFormatTop
    put tfieldY - tCurrFormatTop into tCenterField_To_TopTextDiff
    set the topMargin of pField to the topMargin of pField + tCenterField_To_TopTextDiff - tFormatHalfHeight
end centerVertical

You don't need to understand it
Just use this in a resizeControl or resizeStack handler:

Code: Select all

centerVertical the long id of field <my field> 

This is the best way I’ve found to center text vertically, without have to manually adjust the topMargin (this command does it for you).
All kudos to @bn (Bernd) with coming up with this.

HTH
S.

-- Edited to correct silly auto-correct errors and to clarify text

[Klaus]

Hi Craig,

... but what is with the location of that text from the very first post?

ah, I see (had to measure a bit ) what you mean. Seems to be a little cosmetic bug to me then.

Best

Klaus

[jacque]

Hi Craig,

Here's what I see:

Cap.jpg

Best regards,
Jon

Turn on fixedLineHeight and set the textHeight to 28. That should be all you need. If you change the text size, you'll need to also adjust the textHeight.