Text's anchor point

S_H

Dear OS community,

I'm working on a task in which the sizes of two characters are changing.

I'm presenting two letters in different sizes side-by-side, and I would like to keep the distance between their centers as constant as possible but it seems like that's not working. for example with this code:

my_canvas = Canvas()
my_canvas['LeftText'] = Text(str(var.Left), x= -100, y=0, center=True,font_size=var.SizeLeft)
my_canvas['RightText'] = Text(str(var.Right), x= 100, y=0, center=True, font_size=var.SizeRight)
my_canvas.show()

It seems that some size changes make the digit to be presented "lower" in the screen.
I think that the problem is the anchor point of the characters, which is not centered per characters (Top left maybe?).

Is there anything I can do?

Thanks,
SH

sebastiaan

Hi SH,

Indeed, the text is rendered as a bitmap that just fits around the text, and then the center of this bitmap is used as an anchor point. This can cause offsets, which is a known issue.

For now, a workaround would be to embed both strings in a template that contains letters that use the full vertical range (like 'y' and 'X' in most fonts). To avoid these letters from being visible, you can use a <span>. Like so:

var.SizeLeft = 32
var.SizeRight = 32
var.Left = 'la'
var.Right = 'phrase'

template = '<span style="color:black;">yX</span>%s<span style="color:black;">yX</span>'

my_canvas = Canvas()
my_canvas['LeftText'] = Text(template % var.Left, x= -100, y=0, center=True,font_size=var.SizeLeft)
my_canvas['RightText'] = Text(template % var.Right, x= 100, y=0, center=True, font_size=var.SizeRight)
my_canvas.show()

Cheers!
Sebastiaan

S_H

Dear Sebastiaan,

Thanks you very much for your answer (and for OpenSesame)!

Yet, I'm not sure it's fully answering my problem because now the stimuli are overlapping (see pic as an example) .

Is there anything I missed? Unfortunately, I can't really change the sizes i'm using...

Best,
SH

sebastiaan

One way I can see around that is to make the text almost transparent, using the rbga() color definition. If you make the text completely transparent (rgba(0,0,0,0)) the bounding-box issue will re-emerge. But if you use an alpha of 0.01 it should look good.

template = '<span style="color:rgba(0,0,0,0.01);">yX</span>%s<span style="color:rgba(0,0,0,0.01);">yX</span>'

S_H

This is just perfect. Thank you so much!

S_H

Hello! It's been a few years since this discussion, and I've encountered this issue again.

I'm using the most up-to-date version of OpenSesame, but for some reason, the solution doesn't seem to work as it did back in 2018. I've noticed that this problem has been marked as resolved on GitHub. However, when creating two text objects with different sizes, they still appear to have an offset from the center.

Has there been any change in how this should be implemented, or are there any new recommendations for addressing this issue?

Any help or insights would be greatly appreciated.

Thank you!