psychopy.org | Reference | Downloads | Github

Cannot left-align text in Javascript


#1

URL of gitlab repo: https://gitlab.pavlovia.org/djangraw/losasurveytask/
URL of experiment: https://pavlovia.org/run/djangraw/losasurveytask/html/

Description of the problem: The questions in my survey task (implemented with text objects named text1,…text6) are center-aligned by default, but I would like to left-align them. I added a block of code to accomplish this, but it seems to have no effect (with or without the _updateIfNeeded() call). This realignment works in Python, but not in Javascript.

  allTexts = [text1,text2,text3,text4,text5,text6];
  for (i = 0; i < allTexts.length; i++) { 
      allTexts[i].setAlignHoriz('left');
      allTexts[i]._updateIfNeeded();
  }

#3

I think the problem is not with aligning the actual text. This seems to work ok, at least it does when I try it. Text with multiple lines wiill align left, center or right when using setAlignHoriz() method, even on its own without the calls to update methods. I think the problem you are having is with sizing and wrap widths. The lines will be written and their text can be aligned correctly, but they are always positioned so that the center of the text box is at your desired location. Alignment does not change this, it changes the alignment within the text box. If the wrap width is not stated, it will look center aligned regardless of your text alignment in the box, because the text box is made to fit the text.

Try changing your wrap width of your text objects so they are all the same. So, I think you are using height units. Try .3 as a wrap width. Then, try moving your text closer to the scales on the x-position axis, and aligning your text left.


#4

Ah, I think I see how it works. But this is different from how it works in Python (where the left side of every line lines up), which is the way I’m shooting for. And I’m really having trouble making it work that way in javascript.

Javascript (current) way:

Python (desired) way:

I tried setting them all to a constant default string, updating them to set the bounding boxes, then setting each box’s text to the real text, but that doesn’t work… and there has to be a simpler way.


#5

It would be good to get some consistency between the implementations: on the Python side, there is a lot of confusion, as the alignment parameter doesn’t really control text alignment in the expected way, but effectively moves the anchor point of the stimulus instead:

I would think that the text alignment parameter should do what people expect from a word processor (i.e. control the alignment of text within the bounds of the stimulus), while the anchor point should really just be controlled by the pos parameter.