# Vertical label on the edge of a vision-window

**URL:** <https://forum.inductiveautomation.com/t/vertical-label-on-the-edge-of-a-vision-window/79784>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [September 28, 2023, 1:24pm UTC](https://forum.inductiveautomation.com/t/vertical-label-on-the-edge-of-a-vision-window/79784 "2023-09-28T13:24:21Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Remco\_Geervliet](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Remco\_Geervliet](https://forum.inductiveautomation.com/u/Remco_Geervliet)\
**Post date:** [September 28, 2023, 1:24pm UTC](https://forum.inductiveautomation.com/t/vertical-label-on-the-edge-of-a-vision-window/79784/1 "2023-09-28T13:24:21Z")

</div>

Hi,

When using the 'Rotate' property on a label and setting it to 270 degrees, the text will still wrap based on the width of the label-element. In my case, this means a label of 40x300 will have plenty of space to write vertically, but will wrap based on the 40px width.

I've tried a few work-arounds but none of them seem to have a different result. Possible solutions either behave the same, don't have a 'Rotate' property, or don't have a 'Text' property. After looking through the forum, most posts on this topic are based around working in perspective.

Is it simply not possible in a vision, or am I overlooking something?

---

<div class="post-metadata">

**Author:** ![Mason\_Stevens](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@Mason\_Stevens](https://forum.inductiveautomation.com/u/Mason_Stevens)\
**Post date:** [September 28, 2023, 3:27pm UTC](https://forum.inductiveautomation.com/t/vertical-label-on-the-edge-of-a-vision-window/79784/2 "2023-09-28T15:27:34Z")

</div>

I'm also looking for a fix for this. I have a couple spots in my current project I use the rotation, but thankfully the labels are short and text-wrapped, so it's not a monstrously sized label. This is something I think would normally be done with CSS, though, and vision has effectively no CSS support iirc. It might require a third party module of some kind?

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [September 28, 2023, 3:28pm UTC](https://forum.inductiveautomation.com/t/vertical-label-on-the-edge-of-a-vision-window/79784/3 "2023-09-28T15:28:36Z")

</div>

I see what you mean:  
**Parameters:**  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/e/ee8a3fb1c3afb37c4c0410fd2885acc95011b601.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/2/a27d4e49b42b8a3619e9b0096148092f8e6a9c63.png)  
**Result:**  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/8/d885da182fcfc5f015c629f9f2875093a202b907.png)

This is not the behavior I would have expected. It seems silly to have to do this, but as a work around, you could make the label 300 x 300, and use the following parameters to manipulate where the text renderers, so it ends up working the way you want it to in your project:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/6/0681a81d2ffce39dc520b3e3d940dcb144248aed.png)

If you are near the edge of your container, you can manually set the position, so it overflows the edge using the size and position dialog box [Ctrl-P].

**Result:**  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/d/fd08efed024135806c983fbddee8e58a5b5a4f47.png)

This is an interesting problem, so I will mess around with this more when I get time, and if I come up with something better, I will let you know.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 28, 2023, 3:52pm UTC](https://forum.inductiveautomation.com/t/vertical-label-on-the-edge-of-a-vision-window/79784/4 "2023-09-28T15:52:56Z")

</div>

You've tagged the question as both Vision and Perspective. Can you remove the irrelevant tag?

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [September 28, 2023, 4:41pm UTC](https://forum.inductiveautomation.com/t/vertical-label-on-the-edge-of-a-vision-window/79784/5 "2023-09-28T16:41:28Z")

</div>

I've created a template with an embedded paintable canvas that simply draws the text rotated 270 degrees.

**Result:** (with size at 40x300)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/f/5f982998baf079aaf224214e0a9a6f5f2db4a1f8.png)

I've added thee intuitive properties to the template for controlling the text:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/4/d4a94f0a16485d8766656cfaa8f76009ae88668f.png)

If anything else is needed, simply add it to the template as a custom property and incorporate it into the repaint event handler of the embedded paintable canvas.

[VerticalLabel.zip](https://forum.inductiveautomation.com/uploads/short-url/ut12KbZcZphuCYlHXZbGWNmoMyc.zip) (8.5 KB)

**Note:** The text won't display in the designer if it is not in preview mode

---

<div class="post-metadata">

**Author:** ![Remco\_Geervliet](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Remco\_Geervliet](https://forum.inductiveautomation.com/u/Remco_Geervliet)\
**Post date:** [September 29, 2023, 9:55am UTC](https://forum.inductiveautomation.com/t/vertical-label-on-the-edge-of-a-vision-window/79784/6 "2023-09-29T09:55:34Z")

</div>

I have not tagged it as perspective, although I've used the word in the post. The only tags I've added are Ignition and Vision.

---

<div class="post-metadata">

**Author:** ![Remco\_Geervliet](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Remco\_Geervliet](https://forum.inductiveautomation.com/u/Remco_Geervliet)\
**Post date:** [September 29, 2023, 9:57am UTC](https://forum.inductiveautomation.com/t/vertical-label-on-the-edge-of-a-vision-window/79784/7 "2023-09-29T09:57:32Z")

</div>

That's probably a more user-friendly way than what I ended up using, found under a different post;

[These are the steps I followed.](https://forum.inductiveautomation.com/t/label-text-horizontal-direction-alignment-bug/12734/2)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 29, 2023, 10:01am UTC](https://forum.inductiveautomation.com/t/vertical-label-on-the-edge-of-a-vision-window/79784/8 "2023-09-29T10:01:29Z")

</div>

> [@Remco\_Geervliet](#):
>
> I have not tagged it as perspective ...

It's in the revision history on the original post. Justin removed it for you.

---

<div class="post-metadata">

**Author:** ![bschroeder](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bschroeder/32/13260_2.png) [@bschroeder](https://forum.inductiveautomation.com/u/bschroeder)\
**Post date:** [September 29, 2023, 10:06am UTC](https://forum.inductiveautomation.com/t/vertical-label-on-the-edge-of-a-vision-window/79784/9 "2023-09-29T10:06:33Z")

</div>

Yep. This is the way.

---

<div class="post-metadata">

**Author:** ![Remco\_Geervliet](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Remco\_Geervliet](https://forum.inductiveautomation.com/u/Remco_Geervliet)\
**Post date:** [September 29, 2023, 10:12am UTC](https://forum.inductiveautomation.com/t/vertical-label-on-the-edge-of-a-vision-window/79784/10 "2023-09-29T10:12:52Z")

</div>

Alright, I double checked when I saw your comment and it wasn't there, my mistake. Must've happened by accident, the issue is specific to Vision.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [September 29, 2023, 6:21pm UTC](https://forum.inductiveautomation.com/t/vertical-label-on-the-edge-of-a-vision-window/79784/11 "2023-09-29T18:21:53Z")

</div>

> [@Remco\_Geervliet](#):
>
> it wasn't there,

No worries. I probably should have mentioned that I had removed the tag for you

> [@Remco\_Geervliet](#):
>
> found under a different post;
> 
> [These are the steps I followed.](https://forum.inductiveautomation.com/t/label-text-horizontal-direction-alignment-bug/12734/2)

The six year old post you found is amazing in that it's almost an exact parallel of this one. The only advise that's missing from this thread is locking the position of the overlapping label, and the funny thing is that it had occurred to me to mention that, but after developing the canvas template, I didn't bother with editing the previous post.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [November 13, 2023, 9:35am UTC](https://forum.inductiveautomation.com/t/vertical-label-on-the-edge-of-a-vision-window/79784/12 "2023-11-13T09:35:54Z")

</div>

I just found a much simpler solution to this problem. Using a regular label with the text rotated 90 degrees, simply preface the text with `<html><nobr>`, and it will override the ellipsis behavior and prevent the text from wrapping.

**Result:**  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/3/8371467f2f88cc419032a97e78584e0882d413ac.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/7/073c4e376cdac89f26168018aab35c4f58821e58.png)
