Perspective Text Shrinking

Hello all,

Is it possible to make the text of the labels shrink when the view is on a smaller screen?

When resize my views, the components shrink as expected, but the text does not and looks ugly! :frowning:

Thanks,
Mike

It might be important to say what view type you're using. Flex, coordinate, ...

Flex containers. Nested flex. Flex - Coord - Flex. Flex - Flex

couple of different options.

Text sizing in Perspective is a bit of a funny one. Best to create styles for different font sizes with these expressions and use the styles in your components.

What are these units and where do you find them:
vw, vh, vmin, vmax.

I recognize em from HTML coding.

Google :slight_smile: they're CSS units

2 Likes

It's not html but css.

You should indeed google it for more info, but to summarize:
vw: 1vw = 1% of viewport width
vh: 1vh = 1% of viewport height
vmin: if width > height, 1vmin = 1vh else 1vmin = 1vw
vmax: if width > height, 1vmax = 1vw else vmax = 1vh

Have you tried using params in the text size calculation? I have not yet been successful. I think I'll utilize project inheritance for creating styles with this.

I did find those descriptions on a Mozilla site too. https://developer.mozilla.org/en-US/docs/Web/CSS/length

I'm not sure what you mean.
What are you trying to do with parameters ?

Well I was attempting to set up a view with some labels and use custom props/params to pass values for the calculations:

clamp(6px, 1.25 * (0.25vmin + 1.0vmax), 20px)
calc(0.5vw + 0.5vh + 0.5vmin + 0.5em)

using custom props would make changing values easier than going to the label, expanding the text, changing it, saving it...

I don't think I can use props in this situation tho.