Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular: font-size and accessibility
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header-accessibility',
templateUrl: './header-accessibility.component.html',
styleUrls: ['./header-accessibility.component.scss']
})
export class HeaderAccessibilityComponent implements OnInit {
//Default and reset font size
font_size = 16;
//Increase, decrease and set default font size
setFontSize(idd: string) {
//calc font size
if(idd === 'a+'){
this.font_size += 1;
} else if(idd === 'a-') {
this.font_size -= 1;
} else {
this.font_size = 16;
}
//set font size
let htmlRoot:HTMLElement = <HTMLElement> document.getElementsByTagName("html")[0];
if (htmlRoot != null) {
htmlRoot.style.fontSize = `${this.font_size}px`;
}
}
constructor() { }
ngOnInit(): void { }
}
<span style="font-size: 0.5rem">Tamanho equivalente a 7.5px</span>
<h1 style="font-size: 2rem">Tamanho equivalente a 32px</h1>
<p style="font-size: 1rem">Tamanho equivalente a 16px</p>
html {
font-size: 16px;
}
<li>
<button (click)="setFontSize('a-')">A-</button>
<button (click)="setFontSize('a')">A</button>
<button (click)="setFontSize('a+')">A+</button>
</li>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment