Dynamically align text elements

Ask us anything
1

I have a site that I am dynamically serving text values from my backend based on their locale (location + language). Everything works perfectly. My issue now is with right-to-left languages.

Is there a way to bund the Allignment of a text element such that when it’s right-to-left the alignment is right, and if not it’s left.

image
image472×740 39.7 KB

2

You could create a state for this, as it is not currently bindable. In custom css set the property text-align: left; or text-align: right; and trigger id based on some condition you’d use.

Edit: I just tested it and it doesn’t seem to be that easy. Also I cannot set this via a state and align either, it seems like align isnt binding. @Joyce might know how to do this?

3

Edit: You can make this happen, but it’s a little complicated.
The formula from the video:

'<p style="text-align:'+([Your true false variable for direction] ? 'right' : 'left')+'">'+[Your text variable]+'</p>'

For the WeWeb team or whoever cares,

  1. You cannot set this as a align with state, because it seems like it doesnt get saved as a state property.
  2. You cannot set this as typography as it has not text alignment.
  3. You cannot set this with css, as I was trying in the video, before I got cut off, because there is a wrapper to which this css is applied to See the uppermost div, and the p tag itself has inline css of its own, so it doesnt work even with !important.
    Regarding this wrapping, I absolutely understand it, but also, it is not the first time that I’m hitting a wall slightly within the editor (you can set this up easily in custom code, but shows only on the published version) It also does it with paddings on the div elements, where you can’t work with position absolute.

Screenshot 2023-09-06 at 13.50.56
Screenshot 2023-09-06 at 13.50.56584×836 81.8 KB

4

Thank you very much, this works for me. I just wish there was a way to globally bind all my text elements with the same solution without having to do it one by one.

5

You could do this via a custom formula which would return all the code, and only take one line to copy and paste everywhere

1 Like