# Vision - HTML tag causing multi-line text 'movement'

**URL:** <https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [March 6, 2024, 1:44pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894 "2024-03-06T13:44:05Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![kcui](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kcui/32/51446_2.png) [@kcui](https://forum.inductiveautomation.com/u/kcui)\
**Post date:** [March 6, 2024, 1:44pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/1 "2024-03-06T13:44:06Z")

</div>

I'm using `<html><center>` on several components in my Vision project to let text center and wrap where they would otherwise run off the component. I've noticed that on these components, when a screen is loading, the text label will _briefly_ load not vertically centered and then finally will center itself. Essentially, the text on the components "jump" to center on a component loading. It doesn't matter if this is a template parameter or done directly with a non-templated component. For cached screens/windows, this only happens on the initial load.

This does seem to be more noticeable on less capable systems running clients (ie. take longer to load components, thus making the effect more noticeable). This "jump" in the text position still exists on more powerful systems but happens so fast it is not noticeable.

Is there a way to center text without this effect, or mitigate it on 'low end' clients? I realize I am asking two different things here (prevent the behavior vs. improving client performance).

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 6, 2024, 2:09pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/2 "2024-03-06T14:09:14Z")

</div>

I'm pretty sure the HTML support is simply a hand-off to Java Swing. Which means it is unlikely to be fixable by IA. Or have any specific work-around. There's a slight chance that it is a "Look-and-Feel" UI effect, for which IA might have some leverage. You'd have to open a support ticket to find out for sure.

---

<div class="post-metadata">

**Author:** ![kcui](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kcui/32/51446_2.png) [@kcui](https://forum.inductiveautomation.com/u/kcui)\
**Post date:** [March 6, 2024, 2:15pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/3 "2024-03-06T14:15:20Z")

</div>

Thanks. The best thing I can do in the short term is probably use a faster system (currently running on a machine with an Atom processor which is a bit sluggish). I'll think about a ticket if it end up being an issue.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 6, 2024, 2:17pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/4 "2024-03-06T14:17:07Z")

</div>

> [@kcui](#):
>
> `<html><center>`

i dont use vision much, but can you use this system to write in your own css? or is only this thing possible? is definitly not standard html/css so maybe if its possible to use that it might improve performace.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/3/6365af0ec830b1ded0f525aab2fce6c0bf471c0c.png)  
oh nvm its just to old for me xd

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 6, 2024, 2:18pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/5 "2024-03-06T14:18:27Z")

</div>

It's an ancient version of HTML. 3.2, I think. There's no way to set separate CSS, but you can included some styles in-line.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 6, 2024, 2:21pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/6 "2024-03-06T14:21:05Z")

</div>

if so then this should do the same, if its supported in that version

```auto
<p style="text-align:center">

```

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 6, 2024, 2:21pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/7 "2024-03-06T14:21:22Z")

</div>

Your best bet might be to sit back and see if it nerd-snipes a certain IA ~~employee~~ _über-geek_ (_cough_ PGriffith _cough_).

---

<div class="post-metadata">

**Author:** ![kcui](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kcui/32/51446_2.png) [@kcui](https://forum.inductiveautomation.com/u/kcui)\
**Post date:** [March 6, 2024, 2:31pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/8 "2024-03-06T14:31:00Z")

</div>

😂  
This is a OEM application (plan to productize the system) so there is some sensitivity to look and feel / UX. Generally this has not been an issue with other HMI / SCADA platforms I've used, which puts in in an odd position needing to defend the platform choice over small things when all others see is some odd UI behavior that "doesn't behave like this in [insert HMI platform I've used for 20 years here]!".

I've been encouraged by others to use Perspective but the ship has sailed on that choice for the moment (plus in general I don't think I have the time to commit to the learning curve).

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 6, 2024, 2:33pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/9 "2024-03-06T14:33:25Z")

</div>

> [@kcui](#):
>
> encouraged by others to use Perspective

If this is an on-machine HMI for control purposes, they are simply wrong.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 6, 2024, 2:37pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/10 "2024-03-06T14:37:03Z")

</div>

`<html><div style="text-align:center">`  
this appears to be the same as `<html><center>` idk if its more perfomant tho

(left just html, middle is html\<center right is \<div style="text-align:center")

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/9/c93e141737f5051678167af98a9286871ba79f5f.png)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 6, 2024, 2:41pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/11 "2024-03-06T14:41:11Z")

</div>

You're correct, it's Swing builtin behavior and I'm pretty sure doesn't fire a property change or any other event that's useful.

Your options are limited in terms of workarounds. Maybe an invoke later setting the labels visible would do it? Kinda hacky. Or a template canvas to do the centering, but that's _way_ heavier in terms of resource usage.

A Jide StyledLabel is supposed to be more performant, but we don't have any direct way to instantiate one as a regular component, so you'll have to use some hacky-ish scripting or create a custom module (cough Phil cough 🙂).

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 6, 2024, 2:42pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/12 "2024-03-06T14:42:47Z")

</div>

> [@paul-griffith](#):
>
> a custom module

The odds that an OEM HMI **isn't** Edge is low, and I can't deploy my modules in Edge. Probably worth doing, though. (Darn you! You aren't supposed to be sniping back!)

---

<div class="post-metadata">

**Author:** ![kcui](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kcui/32/51446_2.png) [@kcui](https://forum.inductiveautomation.com/u/kcui)\
**Post date:** [March 6, 2024, 2:49pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/13 "2024-03-06T14:49:07Z")

</div>

> [@pturmel](#):
>
> If this is an on-machine HMI for control purposes, they are simply wrong.

Correct that it is a "panel style" on-machine HMI. That was my gut reaction too much didn't want to be the guy who refuses to change because that's what I'm used to using 😅

> [@paul-griffith](#):
>
> Your options are limited in terms of workarounds.

Thanks, I kind of figured that may be the case. This is more of an annoyance than an actual problem. I can mitigate this in the future by specifying a better PC where this is not really noticeable.

---

<div class="post-metadata">

**Author:** ![kcui](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kcui/32/51446_2.png) [@kcui](https://forum.inductiveautomation.com/u/kcui)\
**Post date:** [March 6, 2024, 2:49pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/14 "2024-03-06T14:49:42Z")

</div>

> [@pturmel](#):
>
> The odds that an OEM HMI **isn't** Edge is low

Yes, this is Edge : )

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 6, 2024, 2:56pm UTC](https://forum.inductiveautomation.com/t/vision-html-tag-causing-multi-line-text-movement/86894/15 "2024-03-06T14:56:18Z")

</div>

odds are the styled div is more performant, (as im assuming center became deprecated for a reason)
