# \<html\> formatting of string in Expression Binding Perspective Label

**URL:** <https://forum.inductiveautomation.com/t/html-formatting-of-string-in-expression-binding-perspective-label/62039>\
**Category:** Ignition\
**Tags:** ignition81, perspective, vision\
**Created:** [July 18, 2022, 11:06pm UTC](https://forum.inductiveautomation.com/t/html-formatting-of-string-in-expression-binding-perspective-label/62039 "2022-07-18T23:06:44Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michael\_McCabe](https://avatars.discourse-cdn.com/v4/letter/m/b5a626/32.png) [@Michael\_McCabe](https://forum.inductiveautomation.com/u/Michael_McCabe)\
**Post date:** [July 18, 2022, 11:06pm UTC](https://forum.inductiveautomation.com/t/html-formatting-of-string-in-expression-binding-perspective-label/62039/1 "2022-07-18T23:06:44Z")

</div>

Hi Folks,  
So have an indirect tag taking a timestamp into “text” property of a label.  
I am then doing a transform to put some string before/after etc, along with doing a calculation secondBetween({value},now()).  
I am trying to underline some of the result using \>html\<\>u\< xxxx \>/u\<\>/html\<. (signs wrong for purpose of post, typing this in correct format is html formatting this message.  
The expression sample at the bottom of the binding winding showing some underlining happen, but when i go to view on the perspective view, it shows the string complete with \>html\<\>u\< \>/u\<\>/html\< in the text.  
This is something I would have used quite a but in vision on version 7.9.  
However not a transform expression, just normal text bindings.

Glad for any help on how to partial format a string in an expression.

---

<div class="post-metadata">

**Author:** ![swolnisty](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@swolnisty](https://forum.inductiveautomation.com/u/swolnisty)\
**Post date:** [July 18, 2022, 11:25pm UTC](https://forum.inductiveautomation.com/t/html-formatting-of-string-in-expression-binding-perspective-label/62039/2 "2022-07-18T23:25:23Z")

</div>

Most Perspective components do not accept HTML formatting. Depending on what exactly you are trying to do, you might be able to use the [Markdown component](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Markdown).

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [July 19, 2022, 2:13am UTC](https://forum.inductiveautomation.com/t/html-formatting-of-string-in-expression-binding-perspective-label/62039/3 "2022-07-19T02:13:20Z")

</div>

The Label component only displays values as strings, so it is taking the value output by the binding preview and wrapping it as a string.  
So your binding is returning something like  
`2`  
Then your transform or formatting is outputting something like this,

```auto
<html><u> 2 </u></html>

```

but the preview panel is getting fooled into rendering that as if your html were being rendered by the DOM because the preview panel has no idea where that content is going; you’re still outputting the value with all of the HTML, and then the Label is doing this:

```auto
# sort of
str(<html><u> 2 </u></html>)

```

Which results in the Label just displaying HTML as a string.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 19, 2022, 2:41am UTC](https://forum.inductiveautomation.com/t/html-formatting-of-string-in-expression-binding-perspective-label/62039/4 "2022-07-19T02:41:31Z")

</div>

> [@Michael\_McCabe](#):
>
> > html\<\>u\< xxxx \>/u\<\>/html\<

You mean like this?  
`<html><u> xxxx </u></html>`  
The preformatted/code decorator is your friend 🙂  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/b/3b8ef5478cbc9b3ae15f9ada807c81008cd1d671.png)

---

<div class="post-metadata">

**Author:** ![Michael\_McCabe](https://avatars.discourse-cdn.com/v4/letter/m/b5a626/32.png) [@Michael\_McCabe](https://forum.inductiveautomation.com/u/Michael_McCabe)\
**Post date:** [July 19, 2022, 7:48am UTC](https://forum.inductiveautomation.com/t/html-formatting-of-string-in-expression-binding-perspective-label/62039/5 "2022-07-19T07:48:32Z")

</div>

Ah ok gotcha.

```auto
<html><u>Thanks</u></html>

```

---

<div class="post-metadata">

**Author:** ![Michael\_McCabe](https://avatars.discourse-cdn.com/v4/letter/m/b5a626/32.png) [@Michael\_McCabe](https://forum.inductiveautomation.com/u/Michael_McCabe)\
**Post date:** [July 19, 2022, 7:52am UTC](https://forum.inductiveautomation.com/t/html-formatting-of-string-in-expression-binding-perspective-label/62039/6 "2022-07-19T07:52:23Z")

</div>

Ok, thanks for the feedback on this @cmallonee .  
Reason I am trying to do something like this is because i want to partially format a string to be bold lets say.  
so something like this.  
Today is the **Tuesday 19th** of **July**.  
Can’t see an easy way to do this in perspective.

---

<div class="post-metadata">

**Author:** ![Michael\_McCabe](https://avatars.discourse-cdn.com/v4/letter/m/b5a626/32.png) [@Michael\_McCabe](https://forum.inductiveautomation.com/u/Michael_McCabe)\
**Post date:** [July 19, 2022, 7:53am UTC](https://forum.inductiveautomation.com/t/html-formatting-of-string-in-expression-binding-perspective-label/62039/7 "2022-07-19T07:53:19Z")

</div>

I don’t think i can use the markdown component as I only want to partially format the string?  
So 1 word in a sentence underlined and bold lets say.

---

<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:** [July 19, 2022, 8:24am UTC](https://forum.inductiveautomation.com/t/html-formatting-of-string-in-expression-binding-perspective-label/62039/8 "2022-07-19T08:24:27Z")

</div>

> [@Michael\_McCabe](#):
>
> I don’t think i can use the markdown component ...

Markdown is probably the _only_ way to do it.  
`Today is the **Tuesday 19th** of **July**.`  
It's similar to the markdown used in this forum's editor.

Tip: underline is not used in professionally produced documents. Have a look at any quality newspaper, magazine or website. You won't see underline except for hyperlinks or identifying hotkeys on window GUIs. (I can't give an example because Markdown doesn't support it for the reasons outlined!) Only use underline if you want the GUI to appear as though it was designed by an amateur. Note that a bottom border is different. If set up correctly it will not cut through the letter descenders and is typically the full width of the container.

---

<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:** [July 19, 2022, 8:59am UTC](https://forum.inductiveautomation.com/t/html-formatting-of-string-in-expression-binding-perspective-label/62039/9 "2022-07-19T08:59:03Z")

</div>

css has a solution but you should use markdown if you can 😛 or idk multiple labels xd

Because the css is kina hacky for this case

> [@Perspective tool tip text markup](https://forum.inductiveautomation.com/t/perspective-tool-tip-text-markup/60719/6):
>
> its a “transparent gradient” with text-shadow combo… you gotta make the gradient target the correct text, which is really messy and not dynamic at all xd
> 
> ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/9/d950aa4fe1195f0307a442b3307f51e755d1ed66.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 19, 2022, 9:32am UTC](https://forum.inductiveautomation.com/t/html-formatting-of-string-in-expression-binding-perspective-label/62039/10 "2022-07-19T09:32:18Z")

</div>

> [@Transistor](#):
>
> Only use underline if you want the GUI to appear as though it was designed by an amateu

I've found underlining works well for text that either are links as in standard hyperlink practice, or I've also used it for underlining values that are setpoints which conveys very clearly to the operator that the value is clickable. A blanket "don't use this" statement is a bit over the top in my opinion. However I certainly understand where you're coming from. We're working with a 3rd party contractor who is doing plc changes for our customer and all of his emails and his original scada screens had underlined text for absolutely everything... It is so damn hard to read. He also writes a lot of things on paper and all his text on paper is underlined with a ruler as well
