Position element based on width of another element

Is it possible to position the y axis of an element based on the width of another element?

I have a text element which displays the weather condition, so it could be “Rainy” or “Thunderstorm” I want a comma after the condition, but the comma needs to be a different colour.
So I have created a second text element which is just a comma. However the spacing differs when the condition reads “Thunderstorm”. If I position the comma after the word thunderstorm it then is massively off when the weather changes to “Rainy”.

I also can’t right align the weather condition as there is another text element before the weather condition

So it looks like this:

“cond”: “Thunderstorm”,
but obviously when the condition changes it then looks like this
“cond”: “Rainy” ,

The only other thing I can think is if I can have two different colours in a single line of text, but I don’t think that is possible either

You can do this a number of ways.

  1. Create images of the text strings where the opacity makes the image visible based on the weather icon tag #WCCI#. This option would require most effort to make.
  2. A simplier method, place 2 text fields on top of each other. The bottom element would have the extra comma and be set at the different color setting. You would offset the X value by a small amount so that the two text fields overlay each other exactly. See example below.
    JC73UK - Test 2 text fields overlaid - watch face for Apple Watch, Samsung Gear S3, Huawei Watch, and more - Facer
1 Like

Thanks for this. I should have thought about the duplicate element - I’ve done that before :slight_smile:

Many thanks