Label text horizontal direction alignment bug

Ignition
1

Hi,

Hopefully I'm just doing something wrong...

I'm trying to create a left-aligned, horizontal-up direction, static text using a Label component.
I've set the Rotation property to 270° and set the horizontal alignment to Left. The text is horizontal, however the text is a huge distance away from the bottom of the label bounding box. When I say huge distance, I'm talking close to an inch! (for my resolution and height of text box) Visually, it looks like it's in the centre of the top and bottom, not the left at all.

Changing the horizontal alignment from to centre or right doesn't move the text much at all (a few pixels up/down); they all look like they're placed in the top/bottom centre..

Is this a bug or am I doing something wrong.. I've also tried adding HTML formatting to the Text with also no luck.

Cheers,
Nick

Ps. see attached image. Notice that, despite the height of the label and being set to left aligned, the text is still in the middle and is even being word wrapped.

2

It’s easiest to see what’s going on if you turn on the background of the label and change its background colour to something different than the window.

When you change the rotation of the text to 270°, the text will only be where you think it should be when the bounding box of the label is square. Knowing this, it is possible to get this to work if you’re careful:

  1. Temporarily increase the width of your template.
  2. Create a square label big enough to hold the longest string. Position it with the mouse at the correct height and against the left-hand edge of the template.
  3. Change the position of the left-hand of the label using P to a negative value until it is where you want it.
  4. Reduce the width of the template.

Once you’ve done this you mustn’t move the label with your mouse or it will move until its left-hand edge is at the left-hand of the template. It would probably be best to lock it in position.

Hopefully this workaround will help you get the layout you want.

3

Thanks Al, it sounds like this will work and I can use this; however it’s very much a workaround though to the underlying issue!

I will raise a bug with support for this.

Cheers!

4

The rotation property on the label component is, well, not great. We know this. :blush:

The underlying label component from swing that our label is based on was not meant to rotate, and the way we coax into rotating makes the alignment weird. We should probably add some sort of alternate, “rotateable label” component to get around this.

In the meantime, (and I know this isn’t ideal either), but you could get more predictable sizing by using a paintable canvas to make a vertical label. Just add a custom property called “text” onto a paintable canvas and use this script:

[code]from java.lang import Math

text = event.source.text
g = event.graphics
fm = g.getFontMetrics()
len = fm.stringWidth(text)

g.rotate(-Math.PI/2)
g.drawString(text, -len, fm.getAscent())[/code]

The primary downside here (besides having to do this in the first place) is that you’ll only see the text in preview mode & the client.

1 Like
5

Just ran into this and Carl’s code was quite helpful. The following is a small change that centers the text horizontally and vertically:

from java.lang import Math
text = event.source.text
g = event.graphics
fm = g.getFontMetrics()
x = (event.height + fm.stringWidth(text)) / 2
y = (event.width + fm.getAscent()) / 2
g.rotate(-Math.PI / 2)
g.drawString(text, -x, y)
1 Like
6

Thanks for the replies. Hopefully this will be fixed properly in a later release, but for now I’ll try to avoid vertical text altogether, or if unavoidable, use the canvas method albeit reluctantly.

7

Thanks for responses!

8

For anybody else that stumbles onto this old topic, a simpler solution has been discovered and posted here:

1 Like