Does anyone know if there is a way to change the style of a label’s text in the middle of the label? For example, in Vision you could use HTML on a label to change font size, weight, etc at any point. Does anything similar exist for Perspective’s labels? Thanks!
1 Like
Hi @swolnisty,
There should be a style property in the property editor when you select the label. The style property has a small paint bucket icon that opens a style editor. CSS properties and values are used to style the component. Here’s an image for reference.
Thanks for the reply Ayu. I am aware of how to change the style of a label using the style editor and style classes. I am trying to find out if it’s possible to change styles on a label in the middle of the label’s text. For example, is it possible to have the first three letters be a different color or font size than the rest of the label?
Thanks!
Hi @swolnisty,
Gotcha. I don’t believe you can do this with the label component, but there’s the markdown component that allows you to use html if you have escapeHtml set to false. Be aware going this route may cause security issues, so use this at your own risk. Perspective - Markdown - Ignition User Manual 8.0 - Ignition Documentation
1 Like
Right - to go into a little bit more detail, the reason you can’t use arbitrary HTML to style a label component is because it would be a huge security risk. HTML (and JS) are risky, hence nothing in Perspective lets you actually write your own HTML or JS. The “safe” option would be to compose a “meta” view, consisting of a label corresponding to however many individual styles you have, then putting that all into a flex container or similar to “stitch” them together. There isn’t nearly as much of performance impact per “container” as there is in Vision, so nesting views together like that is absolutely normal practice.
1 Like
Thanks Ayu and Paul! That makes sense.
The reason I was trying to avoid using two labels in a flex container is that I’m trying to essentially create a Perspective version of the Numeric Label component from Vision. I want to be able to display a tag’s value and engineering unit next to each other, but make the engineering unit a smaller font than the value. Using two labels in a flex container works great when you want the text to appear centered in the container (by right-aligning the value label and left-aligning the engineering unit label), but I would like to have all text in the container appear to be left-aligned without the engineering unit looking like it’s detached from the value.
The only way I can think to do this would be to put the value and engineering unit labels into a flex container with its direction set to “row” and justify set to “flex-start”, left-align both labels’ text, and bind the basis of the value label to some calculation based on the length of the value label’s text property (which is a lot more trouble than I had hoped for). Unless anyone has any better ideas? Hopefully what I described makes sense.
It does - and, if you’re able to wait, we actually have a ticket to allow adding a custom “suffix” property to the numeric label, since you’re not the first person to notice its absence. One benefit to the composable nature of views is that if you did go through the effort to create such a view once, you could probably reuse it everywhere - just have to make sure you expose enough of the properties as view parameters.
1 Like
That’s exactly what I’ve been doing; I have one numeric label view I’ve been using as a “template” to embed throughout the project. It was working great until the design decision to left-align most text was made, haha.
Any idea on the ETA for that numeric label component, is it likely to make it into 8.0.4 or 8.0.5?
8.0.4 no, RC should be up within the next few days. 8.0.5, maybe, but as far as I’m aware no one’s picked up the ticket to actually work on it yet, so I wouldn’t rely on it happening within the next month or so if it’s critical to what you’re currently working on.
In other words - I would say, proceed with workarounds - knowing that at some point you should be able to simplify things; but for now, waiting probably isn’t the best move if this is important to a client/customer.
This is an old thread, but i only want to mention to those who are new that this solution won't work at least for the latest version today (8.1.25).
In Markdown, if you put your html code at the beginning, it will work. But if you try to put it in the middle, it won't work. Let's say you have ABC... if you want to display the B with red background, it won't happen!
So to my eyes, it's not about "risks of html injection"... it's just a bug, otherwise it wouldn't be allowed at all.
Thanks for pointing this out, let me reach out and get this issue filed. Thanks!
1 Like