baseline property for field objects

[Ledigimate]

Dear RunRev,

It would be really handy to be able to retrieve the font baseline of a field object, relative to the top edge of the card. This would make it possible to position other objects in line with a field's baseline.

Perhaps one should also be able to change the vertical position of a field by setting its baseline property?

Thank you!

Gerrie

[Mark]

Hi Gerrie,

Create a new field in an otherwise empty stack and change it's textheight property. This is important, because textHeight properties of fields are empty when you create the fields.

Now you can add a button and run the following syntax:

Code: Select all

set the bottom of btn 1 to (the top of fld 1 + the margins of fld 1 + the textheight of fld 1)

The baseline of the button is now aligned with the baseline of the first line of the field. To align the button with line x of the field, use

Code: Select all

set the bottom of btn 1 to (the top of fld 1 + the margins of fld 1 + x * the textheight of fld 1)

If you want to correct for the vScroll of a scrolling field, use

Code: Select all

set the bottom of btn 1 to (the top of fld 1 + the margins of fld 1 + x * the textheight of fld 1 - the vScroll of fld 1)

For extra fun:

Code: Select all

getProp baseLine[theLineNr]
  return  (the top of the target + the margins of the target + theLineNr * the textheight of the target - the vScroll of the target)
end baseLine

Put this getProp handler in your stack script and it will work for all fields of your stack:

Code: Select all

set the bottom of btn "Foo" to the baseLine[2] of field "Bar"

This trick only works if the fixedLineHeight of a field is true.

Also check this out:

Code: Select all

on scrollbarDrag
   set the bottom of btn 1 to the baseLine[12] of me
   set the vis of btn 1 to  not (the top of btn 1 < the top of me or the bottom of btn 1 > the bottom of me)
end scrollbarDrag

This could be in a field script.

Kind regards,

Mark

[Ledigimate]

Dear Mark

Please see the attached stack. I entered your first line of code into the message box but it didn't work as described. Where am I going wrong?

Thanks

Gerrie

[Mark]

Gerrie,

What exactly does "not as described" mean? Can you be more specific? Please, follow my instructions to the letter. I tested them and they work.

Kind regards,

Mark

[Ledigimate]

Hi Mark

I'm sorry about not being more specific. Here's what happened:

In my sample stack, I:

• 1. created an empty stack and added a label field and a button to it
  2. put three lines of text in the field
  3. changed the font of the field to Times New Roman, size to 48, Italic, left aligned. This shouldn't be a problem, right?
  4. set the textHeight of the field to 64
  5. set the showLines property of the field to true so I can see its baselines
  6. ran the following syntax using the message box:

  Code: Select all

  set the bottom of btn 1 to (the top of fld 1 + the margins of fld 1 + the textheight of fld 1)

After the above steps I would have expected the bottom edge of the button to be aligned to the baseline of the field's first line of text, but unfortunately it doesn't work on my side.

If you tried it with my sample stack and it still works on your side, then LiveCode behaves differently on my system in that respect. I used LiveCode 6.6 RC 1 on Windows 8.1 at the time of my writing this post.

Thank you for bearing with me.

Gerrie

[Mark]

Hi Gerrie,

but unfortunately it doesn't work on my side.

Now, what does this mean? You can provide me with stacks, instructions and everything, but you also have to specify exactly what it does instead of the expected behaviour. If you don't tell me what you're seeing, then I can't tell if that's the same as what I am seeing. It is possible that you're seeing what I expect, while you expect something different.

Edit:

I played a little more with this. If you include the following in your stack script

Code: Select all

local lFieldTarget

getProp baseLine[theLineNr]
   put the long id of the target into lFieldTarget
  return  (the top of the target + the margins of the target + theLineNr * the textheight of the target - the vScroll of the target)
end baseLine

setProp baseLine theBaseLine
   if there is a lFieldTarget then
      set the height of the target to the textheight of lFieldTarget + the margins of btn 1
      set the bottom of the target to theBaseLine
   end if
end baseLine

then you can execute

Code: Select all

set the baseLine of btn 1 to the baseLine[3] of fld 1

and if all text properties of the button are the same as the text properties of the field, then the base lines will line up.

Don't forget to change the textHeight manually before running the script! Whenever you change the textSize, the textHeight is reset.

Kind regards,

Mark

[Ledigimate]

Mark

Sorry again for not being clear about that.

Here's what I see on my side:

a screenshot of what I'm seeing

Here'w what I'm trying to achieve:

what I'm trying to achieve

I actually need to know exactly where the baseline is in relation to the top edge of the card in order to be able to aling *any* object to the baseline of the field, not buttons only.
I hope that clears up any misunderstanding.

Regards,

Gerrie

[Mark]

Gerrie,

If all buttons are the same size, you can move them up by decreasing the value returned by the baseLine property:

Code: Select all

set the bottom of btn x to the baseLine[1] of fld y - z

where the value z is the number of pixels that you want to move your button up.

Kind regards,

Mark

[Ledigimate]

Sorry, Mark! I misunderstood.

Your suggestion works beautifully for alinging the baseline of a button's label with the baseline of a field, i.e. aligning baselines. However, it would be nice to have a baseline property that returns the exact vertical position of a field's baseline relative to the top edge of the card so that one could align the top, or bottom, or location, of any object (not buttons only) to that value. I hope that makes sense?
Say for instance that I have a horizontal line graphic, and I would like to align it to the field's baseline. This would be easy if only there was such a baseline property that returns the exact vertical position of the field's baseline.

I'm sorry for not having been clear about this from the beginning.

Regards,

Gerrie

Edit: I can imagine that whatever LiveCode uses internally to make it possible for the field's baselines to be shown (showLines), could be harnessed to implement the baseline property I described.

[Mark]

Gerrie,

What about this?

Code: Select all

getProp baseLine[theLineNr]
   put the long id of the target into lFieldTarget
  return  (the top of the target + the margins of the target + theLineNr * the textheight of the target - \
    the vScroll of the target - 0.20*the textheight of the target - 1)
end baseLine

Honestly, I'm not entirely sure about 0.20 (it could be any value between 2 and 2.5, it seems), but it seems to work for the values of the textSize and lineHeight that I tried, although at small values the value returned by the property could be one pixel off.

There is another thread somewhere on this forum about vertically centering text. This thread might shed some light on the actual value of that 0.20. I don't have the time to check it out right now. Maybe later. I'm sure that making an adjustment of a few pixels like in my previous post is easier.

Kind regards,

Mark

[Ledigimate]

Thank you, Mark!

I just hope the constant doesn't vary among platforms, or else we'll need to find a consistent way to to derive that constant on each platform. I'll post my findings as soon as I've been able to test it on other platforms.

Thanks again for bearing with me.

Regards,

Gerrie

Edit:
After playing with that a little, I've found that the same constant doesn't work consistently for different font faces of the same size.
It would seem like the only reliable solution would have to be based on the same formula LiveCode uses internally for positioning the baselines that are displayed when the field's showLines property is set to true.

[jacque]

You can get the location of any dimension of any line without doing any math by using the formattedTop or the formattedRect of a line reference. For example:

Code: Select all

put item 4 of the formattedRect of line 2 of fld 1 into tBottom

Set the bottom of the object to that integer. You may have to tweak the number a bit depending on whether you want the bottom to exactly line up or whether you want the object vertically centered in the line.

[Mark]

Right, Jacque, I forgot about that one because I was really focusing on the baseLine. The problem still is that you have to find out which part of the textHeight is above and which part below the baseLine for each textSize, so that doesn't really solve it unless you know this ratio.

Kind regards,

Mark

[jacque]

Mark, right, that was the tweaking I mentioned. If I remember right, the ratio is generally 1/3 below and 2/3 above. So the baseline should be around 1/3 of the way up from the bottom of the line. I was working with this last night and got pretty close by adding (0.6 * the textheight) to the formattedTop of the line.

[Mark]

Jacque,

I started with 0.33 and that was also pretty close, until I started changing the textSize (and textHeight). Then I tried 0.2 and thought it might as well be 0.256. If we want to know the exact value, we should probably have a look in the engine source.

Kind regards,

Mark