Perspective dynamic font sizing

I'm no expert on this, but...

I like to use this in one of the top level components in the view (e.g. root) and the use em units to inherit from that. Not suitable for all use cases, but it helps reduce engineering time for the trial-and-error stages of trying to get font sizing right for different scenarios.

To handle portrait/landscape variation I normally create a custom prop that acts as a vw scale factor dependant on orientation. Although, @victordcq's solution is a lot more elegant IMO :sweat_smile:

Another factor to bear in mind is the niche of ultra-widescreen displays. Sometimes vh is more appropriate.

I find trying to create a view that handles both desktop and mobile, whilst not impossible, takes a lot of trial-and-error to handle all the different scenarios. Sometimes it's just easier to create 2 seperate views, but that's probably more a factor of my inexperience :man_shrugging:

p.s. I honestly think that >90% of my time is spent fiddling with font sizes to get them right :laughing:

you can use vmin or vmax to get the min/max of vw/vh

1 Like

Probably not worth worrying about IE - Perspective doesn't support it anyway. Chrome, Firefox, Safari, Edge are the only browsers we test against.

5 Likes
  • In my experience something like 1.5vmin seems to handle most of my scenarios (also see @victordcq comments). Of course you can change the 1.5 factor to other values for different sizes. This assumes everything is set to percent mode.

Notes:

  • I have wanted to play around with a dynamic scale factor based on the aspect ratio, for example: calc( (100vmax / 100vmin) * 1.5vmin ) But I can’t seem to get it to work, not sure if a calc like this on font size is even possible or if I have the syntax wrong.

  • You could also couple this and some of the other listed ideas with Style Media-Queries to dynamically change your size or calculations based on the width of the screen. This will result in stepped changes.

You can not divide or multiply two units.
Also if you use vmin i advice you also set a minimum size with calc(max(1.5vmin , 12px)) incase someone on a small phone wants to read something xd

1 Like

I’m also interested about manage the fontsize, mostly with the app. I’ve red this and other topics but it looks like everyone has its own method and there isn’t a “must” method.

Actually I’m using vmin but not always it works properly, should be possible to point some method that actually works?

1 Like

@Aiasa21, yes it appears there isn’t really a standard method. Which makes it pretty difficult to know what to do. I’ve been trying to figure all of this out as well but everyone seems keen on their own methods (understandably) and they don’t seem to apply to what I’m trying to achieve.

I’ve been playing with things the last couple of days and the latest iteration has been something like the following:

calc(0.5 * (1.0vmin + 1.0vmax))

Where the 0.5 value is a factor for modifying your base text size.

Notes:

  • This method modifies the value based on both vmin and vmax which helps with different aspect ratios. However, I’m sure it’s not perfect :sweat_smile:
  • If you need to clamp to a minimum or maximum value use the min, max, or clamp functions like @victordcq has mentioned. These can be used in addition to the base function for something like this:

clamp(6px, 0.5 * (1.0vmin + 1.0vmax), 20px)

  • If it is useful I have found the following link to have some very interesting ideas on font scaling, but the methods are all based solely on width. Perhaps it is worth a read:

https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

3 Likes

I submitted a feature request that something be developed to simplify this:

https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/scalable-font

(Updated Name of posted idea to clarify feature is for Perspective)
https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/perspective-scalable-font

Please feel free to vote and or provide comments/suggestions to the item.

@j.israelsen , thanks for sharing your tests!

Now I’m working with vmin unit and it looks working good for what I need, but I’m curious about your calcolation, I cannot understand where you apply it.

calc(0.5(1.0vmin + 1.0vmax))

calc is css so you can put it directly as the font-size:calc(0.5(1.0vmin + 1.0vmax))

1 Like

@Aiasa21 see @victordcq response.

The only trouble with using vmin/max is they’re a PITA deving with them in the Designer since the viewport is the full width of the View panel. Most of the time my view panel is much larger than the width of the View I have open meaning the font size is massive…

In my short experience, vmin is the one to use to keep an aspect ratio relative to the SVGs that are resizing. When I’m not using coordinate container I’m able to use pixels directly.

I also can’t test them in the designer, all text in my P&ID looks weird in the designer, I have to test it in chrome using F12.

@nminchin, would using the vmin/vmax along with the clamp function help you out? For example:

clamp(6px, 0.5 * (1.0vmin + 1.0vmax), 20px)

At least that way you can limit the maximum text size.

4 Likes

Hmm, yep that actually might work well, Ill give it a go. I guess the art will be setting the values right so they don’t clamp too early for legitimate client sizes! :grin:

There really isnt much standard out there for font sizes… Just make your screen dynamic, the user can always zoom in, that increases font size and if dynamic enough doesntn change much else.

Are there properties that can calculate off of a dashboard widget's size?

I've been trying to mess with the coefficients in the calc equation, like so:
calc(0.5(1.0vmin + 1.0vmax))
calc(3.0(1.0vmin + 1.0vmax))

But I don't see any difference.

Where can I find more information on calc, vmin, and vmax?

You're missing the multiplication operator in the calc function. It should be this:
calc(0.5*(1.0vmin + 1.0vmax))
calc(3.0*(1.0vmin + 1.0vmax))

Here is some documentation

1 Like

Update:

I've actually converted back to rem units with orientation media queries for font sizes, as the calc with vmin/vmax fails with portrait displays like mobiles.

e.g.
image

4 Likes