Angular: Change Font Size options for users in IE11 (CSS-Variables)

Question

I am developing an Angular application. From the webpage, the user can select a small, medium or large fonts (medium is the default) and based on that we have to change the font size all over the page. Now for other browsers, I can use var() but it is not compatible with IE. So one way of doing it is manually applying font-size in every single HTML tags either using ngStyle or ngClass. But I find this method really bad. Is there another way of doing it? I don't want to write this piece of code in every single component.

<div class="hm-header-title" [ngStyle]="fontSize()"></div>

fontSize(){
    return this.ieStyleService.fontSize() // ex return {'font-size': '11px'}
}

Try this: https://stackoverflow.com/questions/46429937/ie11-does-a-polyfill-script-exist-for-css-variables — A. Meshu, Nov 08 '20 at 13:15
I understand that for other browsers you are using the CSS-variables that is not supported in IE 11. I try to search about it and found this [answer](https://stackoverflow.com/a/57000620/10309381). In which a [pollyfill](https://github.com/nuxodin/ie11CustomProperties) is suggested for CSS Variables. I suggest you try to check it and see whether you can implement it in your project. It may help to fix the issue. — Deepak-MSFT, Nov 09 '20 at 06:05

score 1 · Answer 1 · answered Nov 08 '20 at 13:00

You can use the cascading feature of the CSS or/and em/rem.

The idea is quite simple in theory (but might need some rework in practice)

Define font-size for the body:

body{font-size: 16px;}

Define font-size for elements you want to have dynamic fonts like:

.lbl{font-size: 1rem}

Now, when you want to change the font-size of the label, you need just to change the font-size property of the body. Everything else will be done automatically.

Take a note that you can use float values as well to get better results:

.lbl {font-size: 1.33rem}

About rem/em:

rem and em units are computed into pixel values by the browser, based on font sizes in your design. em units are based on the font size of the element they're used on. rem units are based on the font size of the HTML element. em units can be influenced by font size inheritance from any parent element

const $btn = document.getElementById("tgl");
$btn.addEventListener("click", () => {
  document.body.classList.toggle("large");
});

body {
  font-size: 16px;
}

body.large {
  font-size: 32px;
}

label {
  font-size: 1em;
}

<body>
    <label>I have dynamic font size</label>
    <button id="tgl">Toggle font size</button>
</body>

score 1 · Answer 2 · answered Nov 08 '20 at 13:00

I have not tried the following because I regard IE11 as "almost dead" and I am nowadays ignoring it because my target audience is fairly controlled and I can divert them away from it.

In your situation where you do need to support it, I would try setting the font size at the very top of the application:

:host {
  font-size: 16px;
}

Then have all your CSS throughout the entire application use rem (root em units) so that they refer back to the root font size:

h1 {
  font-size: 1.2rem;
}

IE11 does support rem: https://caniuse.com/rem

Then you need to change the root's font-size and everything else will inherit from that. Something like:

this.elementRef.nativeElement.style.setProperty('font-size', '12px');

or even directly on the DOM:

document.style.setProperty('font-size', '12px');

These are just ideas and I am sorry I don't have time to investigate this further, but I hope it moves you on.

score 1 · Accepted Answer · answered Nov 10 '20 at 10:19

Try applying it manually for IE alone.

changeFontSize(fontSize){
    ieFontSizeClass=[
        '.someClass1 *',
        '.someClass2 *',
        ...
        ...
        ...
    ]

    if(this.isIE()){
        ieFontSizeClass.forEach((className: string) => {
                let elements = document.querySelectorAll(className) as NodeListOf<HTMLElement>;

                let i = 0;
                for (i = 0; i < elements.length; i++) {
                    elements[i].style.fontSize = fontSize;
                }
            });
    }
}

NOTE that adding * is important because it will be applied to all the child elements.

Angular: Change Font Size options for users in IE11 (CSS-Variables)

3 Answers3