How to add font increase button to every page in blazor-CodePudding

I would like to have a font increase/decrease button in blazor available everywhere (on every page). Something like the accessibility buttons on websites. Is there any way the @Body element can be used.

CodePudding user response：

There are two ways that I know of. Either create a service and inject them in all your pages/components. You can change the state of your text from parent pages.

Another way (the easier one) is to use Javascript interop as Blazor C# doesn't manipulate the DOM. You can add a <script> to your <body> and call it throug the JS interop like so:

@inject IJSRuntime JsRuntime

@code {
    protected override async void OnAfterRender(bool firstRender)
    {
        await JsRuntime.InvokeVoidAsync("updateFont");
    }
}

And add your javascript to the end of your html body in the index page.

<script>
        function updateFont() {
           // add your javascript font updating here
        }
</script>

CodePudding user response：

All modern browsers have the capability to zoom, controlled by the end user. Not only does this handle increasing the font, but it also increases the rest of your design proportionally so that you don't have to handle padding, margin, and offset issues from changing the font size globally.

Why not use JavaScript interop to call setZoom after a button click? Most users already know how to zoom the page in and out whenever they want. Unless you are disabling viewport scaling, you shouldn't even need to implement a button to take advantage of zooming in/out.

If you specifically want to change font and not increase your page's scale, then you'll probably want to use a solution like klekmek has posted (use JavaScript to modify the style / class tag on the body element, for example).