# \[Feature-12695\] Perspective - Scaling Font Sizes Based on Object/Window Size **URL:** \ **Category:** Ignition\ **Created:** [May 1, 2019, 7:41pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566 "2019-05-01T19:41:22Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![brandon.hughes](https://avatars.discourse-cdn.com/v4/letter/b/3e96dc/32.png) [@brandon.hughes](https://forum.inductiveautomation.com/u/brandon.hughes)\ **Post date:** [May 1, 2019, 7:41pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/1 "2019-05-01T19:41:22Z")
I have a coordinate view set up within perspective in percent mode, and I am using multiple instances of a flex view “template” within the coordinate view. This template consists of a few dynamic text boxes, and an LED display. The templates shrink/grow as desired to fit the entire browser window when the coordinate view is resized, but when the view is sized too small or opened from a mobile device the text wraps and expands beyond the extents of its text box (except for the LED display, which scales with the object size). With this being said, my questions are: 1.) Is it possible to detect the wrapping of text within a text box/object? 2.) Is it possible to detect the OS/browser combination of the device launching a perspective session from the session? If so, is there a system.tag or equivalent where this information would be held? My only solution for this problem so far has been to add a button to the screen to toggle a boolean value that would reduce the text size of each text object that a user could toggle as needed. Any ideas/suggestions on how to accomplish this would be much appreciated. Thanks in advance. ---
**Author:** ![liuwf2139](https://avatars.discourse-cdn.com/v4/letter/l/48db29/32.png) [@liuwf2139](https://forum.inductiveautomation.com/u/liuwf2139)\ **Post date:** [July 2, 2019, 11:50am UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/2 "2019-07-02T11:50:55Z")
I have also encounter the problem, I want to know will it be fixed? ---
**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 2, 2019, 2:38pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/3 "2019-07-02T14:38:30Z")
I’m not sure how this original post went so long without a response, but I’ll try to answer everything all at once… It’s not possible within Perspective to detect whether a component is wrapping content, although it IS possible to declare/dictate the desired behavior for when content WOULD be wrapped. (Labels, for example have “normal” and “break-word” as wordWrap options, while Flex Containers and Flex Repeaters have their own settings to determine spacing and wrapping). While there is no exposed property available to determine the browser platform in Perspective, you can determine if a user is using the native mobile application with the following code: ```auto if session.props.device.type in ['ios', 'android'] ``` A common request is for an exposed property which defines the current viewport dimensions of the page. This is something we SHOULD provide, and we have an open ticket to implement the feature. Once these properties are exposed, you could implement whatever logic you’d prefer to determine the size of text, most likely by providing an expression binding on `Component.props.style.fontSize` which would perform some mathematical calculation and then apply the fontSize value as a percent of original size, instead of a calculated pixel height. (something like 50% for smaller Views). ---
**Author:** ![brandon.hughes](https://avatars.discourse-cdn.com/v4/letter/b/3e96dc/32.png) [@brandon.hughes](https://forum.inductiveautomation.com/u/brandon.hughes)\ **Post date:** [July 2, 2019, 3:47pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/4 "2019-07-02T15:47:34Z")
Thanks for the response. Any idea of when we could expect the feature of exposed viewport dimensions to be added? ---
**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 2, 2019, 3:50pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/5 "2019-07-02T15:50:29Z")
I haven’t heard any word on it being planned for 8.0.3, so most likely 8.0.4 (August) at the earliest. Features advance further when more users request them, but oddly enough no one has made this request in the ideas forum, so the only visible request is the Feature ticket. posting in the [ideas forum](https://ideas.inductiveautomation.com/) would potentially help by increasing visibility of the need for this feature. ---
**Author:** ![brandon.hughes](https://avatars.discourse-cdn.com/v4/letter/b/3e96dc/32.png) [@brandon.hughes](https://forum.inductiveautomation.com/u/brandon.hughes)\ **Post date:** [July 2, 2019, 3:55pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/6 "2019-07-02T15:55:18Z")
When you say ideas forum, what are you referring to? Could you provide me with a link? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [July 2, 2019, 3:59pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/7 "2019-07-02T15:59:31Z")
> **[Inductive Automation Feedback](https://ideas.inductiveautomation.com)** > > Give feedback to the Inductive Automation team so we can make more informed product decisions. Powered by Canny. ---
**Author:** ![brandon.hughes](https://avatars.discourse-cdn.com/v4/letter/b/3e96dc/32.png) [@brandon.hughes](https://forum.inductiveautomation.com/u/brandon.hughes)\ **Post date:** [July 2, 2019, 4:01pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/8 "2019-07-02T16:01:04Z")
Thanks! ---
**Author:** ![j.israelsen](https://avatars.discourse-cdn.com/v4/letter/j/ad7895/32.png) [@j.israelsen](https://forum.inductiveautomation.com/u/j.israelsen)\ **Post date:** [July 4, 2019, 6:00am UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/9 "2019-07-04T06:00:55Z")
I think this feature is absolutely necessary. That is, to be able to scale font based on the screen/container size. Right now it is common for scroll bars to pop up on my templates based on differing screen size. This is because the text can’t scale. Note: I would be fine if the text scaled by “percent” as another solution. Is there somewhere in the “Inductive Automation Feedback” that I can request this feature as well? I didn’t see anything listed. ---
**Author:** ![brandon.hughes](https://avatars.discourse-cdn.com/v4/letter/b/3e96dc/32.png) [@brandon.hughes](https://forum.inductiveautomation.com/u/brandon.hughes)\ **Post date:** [July 8, 2019, 2:04pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/10 "2019-07-08T14:04:15Z")
I created a post for it on the ideas forum that you can upvote. Here’s the link: [https://inductiveautomation.canny.io/ignition-features-and-ideas/p/expose-viewport-dimensions-in-perspective](https://inductiveautomation.canny.io/ignition-features-and-ideas/p/expose-viewport-dimensions-in-perspective) ---
**Author:** ![j.israelsen](https://avatars.discourse-cdn.com/v4/letter/j/ad7895/32.png) [@j.israelsen](https://forum.inductiveautomation.com/u/j.israelsen)\ **Post date:** [July 8, 2019, 7:58pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/11 "2019-07-08T19:58:57Z")
How hard would it be to expose the breakpoint the container is currently using with a variable (e.g. for a tab container a variable to indicate whether it is using the small, medium, or large configuration)? I ask because I think I could get the text scaling to work well with a variable like that. ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [July 8, 2019, 8:35pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/12 "2019-07-08T20:35:18Z")
> [@j.israelsen](#): > > I think I could get the text scaling to work well with a variable like that. Don't! Not text scaling or any sizing, at least. If you change any element's bounding box in response to a change to the breakpoint, you will cause the breakpoint to re-evaluate. Which can change your element again, which will re-evaluate the breakpoint, ad infinitum. Instead, try using a view property that is bound to a different constant in each break. (And no new feature required.) ---
**Author:** ![j.israelsen](https://avatars.discourse-cdn.com/v4/letter/j/ad7895/32.png) [@j.israelsen](https://forum.inductiveautomation.com/u/j.israelsen)\ **Post date:** [July 8, 2019, 8:55pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/13 "2019-07-08T20:55:46Z")
Okay, I see your point. I was referring to changing only the text font size (not the bounding box). I believe this is a different scenario as the bounding box should not change based on the font size. Perhaps I am mistaked? The issue is when you have an embedded view (percent based) there is not a way to determine how to change text size ---
**Author:** ![j.israelsen](https://avatars.discourse-cdn.com/v4/letter/j/ad7895/32.png) [@j.israelsen](https://forum.inductiveautomation.com/u/j.israelsen)\ **Post date:** [July 12, 2019, 9:15pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/14 "2019-07-12T21:15:56Z")
It looks like there is a pretty good solution using media queries. The following is from tech support: What you can do is create a style with a media query in it. This will allow you to set your font size based on resolution. By default it does it by 300px but of course this is fully configurable and you have the ability to create multiple styles as well. I hope this answers that question. Here is some documentation on media queries and styles [https://docs.inductiveautomation.com/display/DOC80/Style+Classes#StyleClasses-MediaQuerySettings](https://docs.inductiveautomation.com/display/DOC80/Style+Classes#StyleClasses-MediaQuerySettings) ---
**Author:** ![jburt](https://avatars.discourse-cdn.com/v4/letter/j/7bcc69/32.png) [@jburt](https://forum.inductiveautomation.com/u/jburt)\ **Post date:** [August 28, 2019, 3:33pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/15 "2019-08-28T15:33:05Z")
I would not call that a pretty good solution. You would need to create a style for each original font size and screen size combination, with intermediate scaling values for when that screen size is adjusted. For any new original font or screen size, you would need to create a new style, with different font adjustment setpoints. ---
**Author:** ![tyrel.parker](https://avatars.discourse-cdn.com/v4/letter/t/47e85d/32.png) [@tyrel.parker](https://forum.inductiveautomation.com/u/tyrel.parker)\ **Post date:** [February 13, 2020, 4:17pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/16 "2020-02-13T16:17:15Z")
Any progress on this? Is there not an equation that you could apply to determine the appropriate size of the font? Like: fontSize = objectPixelWidth/(len(string) \* baseCharPixelSize) I just can’t figure out what that base pixel size is or any of that. ---
**Author:** ![j.israelsen](https://avatars.discourse-cdn.com/v4/letter/j/ad7895/32.png) [@j.israelsen](https://forum.inductiveautomation.com/u/j.israelsen)\ **Post date:** [February 20, 2020, 11:29pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/17 "2020-02-20T23:29:08Z")
Not sure if it helps, but we got the media queries (mentioned above) to work pretty well for us. We have a Style for each font size (e.g. Large, Medium, Small, etc.). We made our text with a template. We then placed the template with embedded views and passed the Style as a parameter. If we needed a new size we added a new style to our template. The initial setup was the worst of it but if you are using templates everywhere it cascades pretty quick. ---
**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\ **Post date:** [February 20, 2020, 11:41pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/18 "2020-02-20T23:41:36Z")
For window/browser size, you can also try looking at viewport units (vw, vh). > **[Viewport Sized Typography](https://css-tricks.com/viewport-sized-typography/)** > > There are values in CSS that are for sizing things in relation to the viewport (the size of the browser window). They are called viewport units, and there ---
**Author:** ![Felipe\_Deolindo](https://avatars.discourse-cdn.com/v4/letter/f/6a8cbe/32.png) [@Felipe\_Deolindo](https://forum.inductiveautomation.com/u/Felipe_Deolindo)\ **Post date:** [September 13, 2022, 7:28pm UTC](https://forum.inductiveautomation.com/t/feature-12695-perspective-scaling-font-sizes-based-on-object-window-size/24566/19 "2022-09-13T19:28:06Z")
I know its old, but I use this ` clamp(2px, 0.55 * (1.0vmin + 1.0vmax), 100px)`