Cannot left-align text in Javascript

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();
  }
1 Like

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.

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.

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.

1 Like

Hi there,

I’m having a similar issue, as I am trying to run a self-pace reading experiment, for which I need the beginning of all my sentences to be at the exact same point on the screen (on the left).

I have used :
MySentence.setAlignHoriz(‘left’);

and set the same wrapwidth, but in Java Script, this does not work. It works in Python though.

Anybody found a solution?

Pascal

Just in case, I have found a way to deal with this issue:

I noticed that the text boundaries (and subsequent aligning) is dependent of the length of the sentence. So I artificially create a dummy line below my text stimuli, dummy line composed of non-breakable spaces. The dummy line needs to be a little longer than my longest experimental sentence. All stimuli boundaries are then set according to this dummy line, and if you align left the text stimuli, all sentences start at the same point (i.e., at the beginning of my dummy line). So:

In the text box calling the stimuli, I write:

$Mysentence + ‘\n’ + " "

##between the quotes are my unbreakable spaces written with option+space in mac

and in a code component for Javascript:

stimuli.setAlignHoriz(‘left’);

I hope this helps.

Pascal

From version 2020.1 onwards (we’re changing the version system from 3.3.0 to 2020.1.0) we’ll be using left-align by default although, yes, the decision of left-aligning to what is a valid question. Does setting the wrap-width in Builder not achieve essentially the result you were getting with your space-padded line?

Hi Jon,

No, somehow, setting wrap-width in Builder did not work. Not sure why though.

Well, the experiment is now running well. the “dummy line” trick seems to work, anyway.

Pascal

Hi Jon,

Is this issue of multiple textStim’s alignVert not fixed? If there were any solution found, can you please direct me to it since I wasn’t able to find one either in the discourse and JS cribsheet?

Thanks so much!

I believe the recent versions are left-aligning text in JS. Could you point me to your study (or preferably a minimal example of where this is not the case) so we can investigate?

Hi @jon, seems that default is still center on version 2020.2.4.

On pavlovia, I was able to left align using X.setAlignHoriz(‘left’) but X.alignText = ‘left’ does not work online.