Dr. Baranyai László, fénykép

Dr. Baranyai László

 

Betűméret változtatás JavaScript segítségével

nov 15, 19:10, |

 

A honlapok többsége semmilyen figyelmet nem fordít az átlagostól eltérő felhasználók támogatására. Ez ma már nem divat, csak idő kérdése, hogy a publikus szolgáltatások egyenjogú hozzáférését kötelezően biztosítani kell mindenki számára. A böngészők és az operációs rendszerek beépített eszközein kívül egyszerűen megoldható például a betűméret változtatása. Ráadásul ekkor mi tartjuk kézben az opciókat.

Betűméret váltás

A HTML oldal teljes betűméretének változtatása helyett szelektíven, csak a tartalmi részt is módosíthatjuk. A következő minta kód JavaScript függvény segítségével végzi el a beállítást.

function SetSize(NewValue) {
 p = document.getElementById('page');
 p.style.fontSize = NewValue+'pt';
}

Használatához a HTML kódba illesszük be a #page ID-t. Ha a teljes dokumentumra ki akarjuk terjeszteni a hatást, akkor a body elemet válasszuk. Az is ötletes megoldás, ha a honlap tartalmi részére korlátozzuk a betűméret váltást. Például a befoglaló div elemet használjuk fel. A funkciót érdemes a honlap navigációs részébe építeni. Legegyszerűbb esetben a button elem kitűnő választás. Egyértelműen jelzi a funkcionalitást és a gomb a böngésző szokásos stílusával - vagy a felhasználó által módosított látvánnyal - jelenik meg.

<nav>
 <button onclick="javascript:SetSize(14);">A+</button>
 <button onclick="javascript:SetSize(12);">A</button>
 <button onclick="javascript:SetSize(10);">a</button>
 <button onclick="javascript:SetSize(8);">a-</button>
</nav>

Mindenképpen előnyös link vagy gomb alkalmazása. Ezzel csökkentjük a letöltött oldal méretét, ami különösen a mobil eszközöknek (táblagép, mobiltelefon) kedvez. Bármelyik megoldást is választjuk, a title paraméterrel további magyarázó szöveget is adhatunk hozzá. Ez az apró figyelmesség feleslegesnek tűnhet, de nem csak hasznos, hanem jó pont is az oldal minősítése során.

Fontos, hogy a betűméret változtatása széttörheti a honlap jól komponált megjelenését. Ezt korlátozhatjuk az előre definiált betűméret választékkal. Ugyanakkor érdemes minden további méretet relatív meghatározni: % vagy em mértékegységben. A relatív méretek segítségével minden #page elemen belüli szöveg automatikusan örökli az új paramétert. Feleslegessé válik a JavaScript kódon belüli feltérképező ciklus, nem kell minden gyermek DOM elemen nekünk elvégezni az átállítást.

Demo megtekintése: example-javascript-fontsize.html