Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Supported by

Text's anchor point

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)

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?



  • 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)


    There's much bigger issues in the world, I know. But I first have to take care of the world I know.

  • Dear Sebastiaan,

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

    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...


  • 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>'
    Thanked by 1S_H

    There's much bigger issues in the world, I know. But I first have to take care of the world I know.

  • This is just perfect. Thank you so much!

Sign In or Register to comment.