Text on Perspective elements doesn't shrink

Ignition
1

Greetings,

i have a project with views with all the elements inside without other containers (Only Root);
! [Project | 273x383] (upload: //bh7FLzFcCGoU2HTcfg7jMZWqML8.png)

i tried to make this view in “Percent” mode, to make it flexible between screens. The components shrink perfectly from img 1 to img 2 as you can see, but the text stays on the same size.
How can i make the text larger or smaller based on page’s size?
I have to put the text in another container? There’s a global option that i’m missing? Is it possible to resize live the text format?

Thanks a lot for your replies!

Img2
Img2744×391 17.5 KB
Project
Img1
Img11541×822 24.9 KB

2

I think you will be much happier if you learn the fundamentals of the Flex Container. This is a great place for one, it’s built for exactly what you’re looking for (and will do it better and easier than coordinate percent too)

In regards to the sizing, I think you’re looking for a style class with a media query.

Or you could try setting your font size in ‘em’ instead of ‘px’, that way it’s relative to its parent containers size.

2 Likes
3

Thank for your response kgamble!

I have tried all of yours advice:

i can’t switch to Flex because my pages layout use different shapes, and i cannot configurate them on a flex container.

The Style class with media query is not working because i need to change live the value of the font, and not to change it at prefixed values.

I tried to change the font size value to em, but that is not resizing. It stays exactly like is it.

My goal is to maintain the label/component proportion: with this logic i expected that the text highlighted in yellow won’t exceed it’s space, and the text inside the orange label would shrink to stay inside the label without disappear, but it’s not working.
Is there a built in feature?

img4
img4866×604 28.7 KB

4

The solution here is to use nested flex containers, if you take a look at the Adhoc trends page on the Ignition Exchange, it is a really good example of how to do what you’re looking for.

Are you describing making the font smaller when it exceeds the bounds of the box?

2 Likes
5

Yes, i need to make the font smaller so it can stay inside the box (smaller, but with its right proportions)

I have created an example, i need to see the top text (e.g. font size 4) when my screen is smaller, and my bottom text (e.g. font size 8) when is bigger.

img6
img6726×104 2.65 KB

6

Resizing text to fit a bounding container is simply not something CSS (and therefore styles in Perspective) can do. The closest option you have is the viewport related units - vw and vh: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Relative_length_units

4 Likes
7

Have you tried SVG text?

Create a file on your computer called text.svg and edit with notepad. Add the follwing text to the file…

<svg height="20" width="80" viewBox="0 0 80 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="0" y="15" fill="blue">SVG Text</text>
</svg>

Assuming your view is a coordinate container, drag the file from your computer and drop it on a view in ignition perspective designer. When the ‘Link Image’ windows pops up select the ‘Embed Image’ option. Now you have some svg text in your view. Change the views root property mode to percent.

Now if you embed that view somewhere else the svg text will scale.

I’m not 100% on the svg code but it’s pretty straightforward to manipulate.

New View (coordinate container, mode:percent)
image

Embedded New View within another
image

2 Likes
8

Thanks PGriffith, that worked!
I used vmin to keep the format :slight_smile:

1 Like
9

How did you apply it in perspective. “fontsize: vmin”?

10

I applied it in a Style Class, but i guess you can apply it in the component style property:
image

6 Likes
11

Great, Thank you for that. I’ll try it to see if it works.

12

Definitely something for flex containers. As Keith suggested, you should familiarise yourself with the different container types, as how you would do something in Vision is almost guaranteed not how you would do it in Perspective. I use coord containers sparingly, only when absolutely necessary (p&id mimic layouts and device symbol templates). I use mostly flex and column containers for my content and breakpoint containers as the base of my main pages so that I can control how they display in mobile and desktop.

Edit: additionally, I would suggest learning some basic CSS as well. Understanding margins and padding would be my first suggestion

3 Likes
13

Setting the fontsize to use a derivative of “vmin” (e.g. 5vmin, 1vmin, etc.) works really well. Thanks for this post.

1 Like
14

Just fyi

Screenshot_20210306-135552_Chrome
Screenshot_20210306-135552_Chrome1439×634 144 KB

From here

Note vmin included in the rarely used section.

Best imo to use rem as it relates directly to the root font size

Edit 2yrs later:
I never use rem anymore :grimacing:, I use clamp(4pt, calc(0.8*(1.0vmin + 1.0vmax)), 100pt)

Adjust the values 4px, 0.8, and 100px to suit.

Edit3: 4 more months later...
Note that you should combine this with an 'orientation' media query to handle portrait orientations as well for mobile phone use

14 Likes