Multiple Font Sizes in One Label

Ignition
,
1

I have a label that has a text binding on it to give me a read out of various power information from a device I'm monitoring. I want the numbers and the units to have different sizes, but be in the same label, as the session view is responsive and I want the text to scale together. When I have the numbers and units as two different text components, the scale ends up being odd and the labels overlap each other.

Eg. 80.5 kWh
I want the 80.5 to be size 45 font, and the kWh to be size 20 font. I'm sure this can be done in an expression binding on either the text or font size properties, but so far have only come back with error codes when I try.

2

I'm guessing this is because you have them in a Coordinate container, not a Flex. You could go a couple different routes:

  • Wrap the multiple labels inside a Flex container.
  • Use a Markdown component, applying styles to the different parts of the label.

I avoid Coordinate containers as much as I can. I only use them when I want to overlay components on top of one another.

3

Yes, I have them in a coordinate container set to percent mode that is inside a flex container. I went that route because I was struggling with the way the flex containers auto place the components in either a column or a row. I couldn't get all my various components to lay out the way I needed them to, and the coordinate container let me place each element exactly where I wanted it, but is still causing issues anyways. So maybe I need to revisit the way I have the page set up in general.

4

You can put a Flex row of labels into the Coordinate container, to function like a single label. Set the labels to basis: auto and as their size changes, the labels to their right will adjust accordingly.

3 Likes
5

Try using a Markdown component instead of a label.
You can use an expression to place HTML markups in the text using string functions like concat

1 Like
6

As a general tip: You will have a much better time in Perspective if you learn to embrace flex containers. I'm a big fan of the Flexbox Froggy game, silly as it is, to learn the basics of the flexbox layout.

Coordinate containers in Perspective should mostly be used in two scenarios:

  1. A P&ID style process view screen
  2. If you need components to overlap each other

In basically all other scenarios, especially if you care at all about responding to different screen sizes, learn to embrace nested flex containers. It will break your brain at first, but the other side of the learning curve is worth it.

7 Likes