Text vertical alignment

[Mark]

I didn't mean to make him feel bad, Jacque. I believe that one line of script would cause others some confusion, though. With your excellent explanation, however, all should be fine now.

Kind regards,

Mark

[endernafi]

Jacque and Mark, thanks for your kind comments and constructive criticism.
And about the assumption of the formatted height's necessity to be smaller than the height of field,
a little script can deal with that problem.
As I've said earlier, that snippet of code is rather simple and can be developed and complicated in many ways.
For example:

Code: Select all

# let's be sure that the field includes all of the text
put the rect of field theField into theFieldRect
put the formattedHeight of field theField + \
      the bottomMargin of field theField + \
      item 2 of theFieldRect into item 4 of theFieldRect


# now, let's align the text vertically
set the topMargin of field theField to \
                  (round(((the height of field theField - the formattedHeight of field theField)/2)) + the topMargin of field theField)

Best,

Ender Nafi Elekçioğlu

[Mark]

Hi Ender,

I tried your script. If the field is too small to display the entire text and I click a button with your script repeatedly, then the text disappears towards the top. If a field is very large, then the text may move to the bottom of the field. The reason is that the topMargin depends on itself.

The following script seems to work correctly:

Code: Select all

on mouseUp
     put the long id of fld 1 into myFld
     set the fixedLineHeight of myFld to false
     put the formattedheight of line 1 of myFld into myLineHeight
     put (the height of myFld - myLineHeight) / 2 into myVerticalMargins
     set the margins of myFld to 8,myVerticalMargins,8,myVerticalMargins
end mouseUp

(You might need to change the first line of the script for testing). Actually, the text is a few pixels off if both the text and the field are small, but for larger font sizes it seems quite acceptable.

Kind regards,

Mark

[endernafi]

yep, it's excellent
quite simple, yet effective.
thanks Mark, I needed this...


Best,

Ender Nafi Elekçioğlu

[snm]

None of both codes are perfect. Problem not solved
Which one is better depends from dimensions of text field and font size.
It depends also from number of text lines.

Marek

[Mark]

Hi Marek,

I assume you have tried my code. Which problem did you encounter?

Kind regards,

Mark

[snm]

Hi Mark,

I checked both codes. As you mentioned "it seems quite acceptable" but not perfect yet.
It is accepted if there is 1 line of text, but not accepted if 2 or more. With your script is stable at wrong position. With Ender's script when you run it once is OK, but if you "refresh" by executing the script more times - each time the lines go step by step to the top of the field.

Marek

[Mark]

Hi Marek,

Yes, as I wrote before, my script causes the text to be a few pixels off. This is particularly a problem for small texts and small fields. I reckon you could add half of the textheight to the topmargin if the textsize is small.

It is easy to make my script work for multiple lines. Just use the formattedHeight of char 1 to -1 of myFld.

Kind regards,

Mark

[snm]

Hi Mark and Ender,

I'm sorry for criticism, I appreciate you try to help me. Thanks a lot for that.
But my question was how to declare vertical justify for the field, so text should be always justified independent of how many lines it has - always with equal margins (top and bottom) - like in excel for example.

Marek

[snm]

Hi Mark,

Yes, changing "line 1" to "char 1 to -1" makes correction for displaying multiline text. It's now acceptable as before for 1-line text was. Even more - It looks OK for bigger sizes of text. But If you check 8 pt size text in 60 px height of fld you can see the line is not in the middle. It looks better then without your script, but it's not perfect yet (as I mentioned before). But I hope "everything is possible in LiveCode".

Looking for Winner

Marek

[bn]

Hi Marek,

try this on text with a fixed lineHeight (i.e. the normal text, not text that changes its textSize from line to line), no leading return, no trailing return. I tried on a field 60 px high and 120 high, textsize from 8 to 14 with 3 lines of text.

Code: Select all

on mouseUp
   put the long id of fld 1 into myFld
   put the effective textSize of myFld into tTextSize
   put round (((tTextSize - 22) * 1/3)) into tKorr
   put the formattedheight of char 1 to - 1 of myFld into myFormattedHeight
   put (the height of myFld - myFormattedHeight) / 2 into myVerticalMargins
   put myVerticalMargins - tKorr into tTopMargin
   put myVerticalMargins + tKorr into tBotMargin
   set the margins of myFld to 8,tTopMargin,8,tBotMargin
end mouseUp

tell us if this works for you.

Kind regards
Bernd

Edit: removed one line from the code that was useless

[snm]

Hi Bernd,

Working perfect, you are great. It's really what I expected. Thanks a lot.

Marek

[bn]

Hi Marek,

thanks.

And glad you asked why it works
It turns out that Livecode treats the height of the first line a little different than the rest of the lines. The first line is not the full textHeight as the rest of the lines are. It is a little smaller. This depends on the textSize and by experimenting I found that

Code: Select all

put round (((tTextSize - 22) * 1/3)) into tKorr

seems to represent the amount of pixels taken off the textHeight for the first line. This works also if you set the textHeight to a value larger than the automatic textHeight.
It took me 2 days to figure that one out.
Well, since I don't have anything else to do... Shure beats playing chess...

Kind regards
Bernd

[snm]

Hi Bernd,

It should be to much to ask you how it works, until I understand it (it's only difficult to find the way). I don't want to waste your time, it's better for me if you find some time for me next time I have real problem. But as I understood I made fault and should you ask about how it works. Sorry for that, next time I'll remember to ask to make you pleasure like you made me.

But if you have really nothing to do, I have second question - how to implement it in DataGrid headers with behavior:
- if the label of header is 1 line - adjust it vertically center
- if it doesn't fit in the header's weight, divide the line into 2 or 3 lines and adjust it vertically center

Of course we have ready DG header tall enough to fit all 3 lines of the text.

Thanks a lot once more, best regards,
Marek

[Mark]

Nice, Bernd. Very clever.

Mark