accessibility feature: Font-size modifier service

[techscx]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

I'm looking for the ability to allow the user to choose a zoom-level within the App e.g.

• Zoom level standard
• increase font by one level
• increase font by two levels

Some different ways in my opinion would be to
a) manipulate the dom via jsinterop during runtime after the page is rendered
b) having completely different scss (bright-std, bright-zoom1, bright-zoom2, dark-std, dark-zoom1, dark-zoom2) and load activate these via the thememanager

With both options I'm faced with the situation that the font-size is often set on page level by custom styles, which would needed be overriden.
Do you have plans to implement changing the zoom level or do you have any instruction/recommendation about this?

Thank you

Describe the solution you'd like

The most preferred solution would be to have component doing the dom manipulation.

Additional context

No response

[msynk]

@techscx Thanks for contacting us.
I don't quite get what is your exact requirement. could you please provide a real-world sample (an application that has this feature) so that we can investigate the requirement?
although, we tried our best in our product to use the relative unit (rem) so you should be able to change the root element font size to scale everything as you want.

[techscx]

Hello,
my feature request is related to accessibility. Some Text may appeary too small for a portion of users. So I want to add the feature to allow increasing the font size by 2 or more levels. One example would be the page https://en.wikipedia.org/wiki/Blazor

Here is a screenshot:

[msynk]

Thanks for the clarification.
For this, as I've already explained, you don't need our help. you just need to change the root font size of your application using any method that you see fit.

[techscx]

Thank you! I did not know that the framework is already deriving from a root font size. I will check this out.

[techscx]

Could you point me to the method allowing me to change the root font size during runtime? Is the target variable the "$html-font-size" from functions.scss?

Thanks for the clarification. For this, as I've already explained, you don't need our help. you just need to change the root font size of your application using any method that you see fit.

[msynk]

you can simply change the font-size property of the root element (the html tag).
you could do it as simple as this: document.documentElement.style.fontSize = '20px' using javascript or any other way that can achieve a similar result.

[techscx]

Thank you for that recommendation.

you can simply change the font-size property of the root element (the html tag). you could do it as simple as this: document.documentElement.style.fontSize = '20px' using javascript or any other way that can achieve a similar result.