It would be great if we could have a font size based percentage of a parent that would be great, this will allow us to have more control over the size of multiple platforms
Can you provide a use-case demonstrating what you want? There are several potential ways that relative font sizes could be provided and I want to make sure I understand what mode you want.
Sure so let’s say I have a rectangle with a width of 50% and a height of 50% that means I’ll have a square that’s 50% of the screen.
It would be great if I could do fontsize=“50%” so that the font will be 50% of the screen and then there would be no resizing issues with different devices
Wouldn’t FontSize be 50% of the parent element, not the screen?
I won’t comment on the feasibility of this feature, but I’ll add that in my role as an interactive designer I have never ever felt the need for this feature. 
Also: percentage of what? A percentage only makes sense if you first define a scale (like, what 100% or 1% is). See the releated discussion on font percentages in CSS on StackOverflow. Not trying to rain on the suggestion, it’s just that I think that what you’re trying to achieve can be achieved already with the existing panel-in-panel architecture, and it’ll be more performant as well. Or put differently: my scary edge-case spider-sense is tingling.
Since I’m assuming this is primarily used for visual impact, like headers, or short labels, you can also stretch text to another element (even it’s parent element).
<Panel Width="50%" Height="50%" Alignment="Center" ux:Name="target">
<Text Layer="Overlay" Alignment="Center" FontSize="128" Value="Big Label">
<Scaling RelativeTo="SizeFactor" RelativeNode="target"/>
</Text>
</Panel>
Thank you all for responding,
EDA unfortuatently that doesn’t accomplish what I am trying to do, here is a video of what I am talking about.
<Rectangle Alignment="Center" Width="30%" Height="15%">
<Stroke Color="Black" Width="2" />
<DropShadow />
<Text Color="Black" Alignment="Center" FontSize="15">Not Scaling </Text>
</Rectangle>
I am trying to make it so that the font stays the same size in relation to parent, and that scaling idea unforunately doesn’t work for me, here’s a video of the “feature” i wish would fix
Sounds to me like what you really need is a way to specify size breakpoints in relation to the available space on the screen. You’ll probably never need a 1:1 scaling of the text in relation to the container around it since there are a few common screen resolutions that’ll give you most of the appropriate market share.
So any idea on what I should do? Because this issue occurs also for text input boxes and so forth
Hey!
You might be able to achieve your desired result using the ViewBox:
<App>
<Panel>
<Viewbox Width="30%" Height="15%">
<Rectangle Alignment="Center">
<Stroke Color="Black" Width="2" />
<DropShadow />
<Text Color="Black" Alignment="Center" FontSize="25">Not Scaling </Text>
</Rectangle>
</Viewbox>
</Panel>
</App>
It automatically scales its content to fit its size.
The source is losing quality. Any solution ?
Your post doesn’t really go into enough detail. What type of source? What type of quality loss? Do you have an image to show as an example, or some code that reproduces the issue?
This problem can’t really be “fixed” using the ViewBox component, but since the past 7 months we have gotten a couple new features that might be of interest to you; in particular the ux expression system:
https://www.fusetools.com/docs/ux-markup/expressions
You could try making your FontSize a function of the available space, like:
<Panel ux:Name="parentElement">
<Text FontSize="width(parentElement) * 0.1" />
</Panel>
Of course you’ll have to tweak this expression to fit your case, this was just an example.
I hope this works out for you.