Umožněte uživateli zvětšit písmo na vaší stránce

19. února 2002

•

Není tak složité umožnit uživateli pouhým stisknutím tlačítka změnit velikost písma na vaší stránce. Stačí využít CSS a okořenit je JavaScriptem.

Internet využívá i nemalá část uživatelů s různými vadami zraku (tato část je navíc vyšší mezi lidmi často pracujícími s počítačem). Pro takové uživatele je často velmi obtížné číst běžné písmo na webových stránkách, které je webdesignerem většinou navrženo tak, aby co nejlépe vypadalo – používá se font Helvetica nebo Verdana a velikost kolem 12 pixelů.

Takoví uživatelé proto mají v prohlížeči nastavenou velikost písma, která jim nejlépe vyhovuje, nebo používají vlastní tabulky CSS. CSS ve spojení s JavaScriptem ale umožňuje těmto uživatelům práci s webem usnadnit tím, že jim dovolíte pouhým klepnutím na tlačítko změnit velikost a řez písma. Tuto možnost bezesporu ocení i ostatní uživatelé, protože i ti mají často unavené oči a menší písmo se jim špatně čte.

Základem jsou dvě tabulky stylů (mezi dvěma tagy STYLE), z nichž jednu budete vypínat/zapínat podle akcí uživatele. Pokud prohlížeč uživatele nepodporuje JavaScript, bude se text formátovat běžným způsobem a ani se nezobrazí tlačítko pro jeho přepínání. Při opuštění stránky uložíte preferovaný font do cookies, aby ho uživatel nemusel při další návštěvě stránky přepínat. Tuto cookies bude moct používat každá stránka webu. Podívejte se na příklad.

Nejdříve k samotnému textu stránky: Každý citát je uzavřen v jednom tagu DIV, kterému je přiřazena CSS třída (class) text. Využíváte zde i tagy BLOCKQUOTE a CITE, které jsou ve specifikaci HTML definovány pro citace, to ale není pro dnešní článek důležité.

Tabulky stylů

Co naopak pro dnešní článek důležité je, jsou tabulky stylů (nacházejí se v sekci HEAD, ještě před samotným textem stránky). Nejdříve se podívejte na jejich zdrojový kód:

Podle pravidel kaskádováni v CSS se text uvnitř tagu DIV s třídou text vykreslí v písmu Helvetica a velikosti 12 pixelů. Je to proto, že jste v druhé tabulce stylů přepsali hodnotu vlastnosti font u třídy text. Díky tomu každý prohlížeč, podporující správně CSS, zobrazí písmo tak, jak jste původně chtěli. Všimněte si také toho, že jste v druhé tabulce stylů nepřepisovali vlastnost text-align – díky tomu bude použita její hodnota z první tabulky.

Prohlížeče, které podporují JavaScript tak, jak potřebujete, umožní svému uživateli písmo na stránce změnit. Dosáhnete toho tím, že druhou tabulku stylů „vypnete“. Potom bude text uvnitř tagu DIV s třídou text vykreslen pomocí písma Times a ve velikosti small – pomocí tohoto slova se velikost písma nastaví na hodnotu odvozenou od té, kterou má uživatel nastavenou v prohlížeči – díky tomu je míra zvětšení písma jen na něm.

Přepnutí fontu pomocí JavaScriptu

U druhé tabulky stylů jseme uvedl atribut TITLE. Ten použijeme k přístupu k elementu pomocí JavaScriptu. Možná si říkáte, že logičtější by bylo využití atributu ID. Ten ale specifikace HTML nedovoluje použít u tagu STYLE, a proto budete muset použít delší postup.

Než s čímkoli začnete, je třeba inicializovat několik proměnných pro určení prohlížeče uživatele (celý JavaScriptový kód se nachází opět v sekci HEAD, hned za definicí CSS):

Pro běh dnešní funkce bude důležitá proměnná switcher. Pokud má hodnotu true, bude funkce probíhat. V opačném případě se nezobrazí ani tlačítko pro změnu fontu. Aby tato proměnná byla true, musí prohlížeč uživatele respektovat standardní způsob přístupu k elementům pomocí metody getElementsByTagName(‚jméno tagu‚). Ta vytvoří pole, které obsahuje všechny tagy se stejným jménem, a je podporována všemi moderními prohlížeči, jako jsou Internet Explorer 5+, Netscape 6, Mozilla a Opera. Pokud je prohlížeč uživatele Opera, musíte proměnné switcher také přiřadit hodnotu false, protože tento prohlížeč nepodporuje žádný způsob, jakým lze druhou tabulku stylů „vypnout“.

Kromě prohlížečů, které znají standardní způsob přístupu k elementům, povolíte používání funkce i Internet Exploreru 4, pokud použijete pole document.all, které obsahuje všechny tagy na stránce.

V dalším kroku si do proměnné style uložíte odkaz na vaší druhou tabulku stylů:

var i, index, secondStyle = true, style, cookies, date; // deklarace proměnných
if (switcher)
{
  var tagList = !ie4 ? document.getElementsByTagName(‚style‘) : document.all;
  for (i = 0; i < tagList.length; i++)
  {
    if ((!ie4 || tagList[i].tagName.toLowerCase() == ‚style‘) && tagList[i].getAttribute(‚title‘) == ‚css2‘)
    {
      style = tagList[i];
      break;
    }
  }
  cookies = document.cookie.split(‚;‘);
  for (i = 0; i < cookies.length; i++)
  {
    index = cookies[i].substring(0,12).indexOf(‚secondStyle‘);
    if (index != -1)
    {
      if (cookies[i].substring(index + 12) == ‚false‘)
      {
        secondStyle = false;
        style.disabled = true;
      }
      break;
    }
  }
}

Přiřazování odkazu na druhou tabulku stylů do proměnné style se týká jen první část kódu, druhá již čte preferovaný font z cookies. Uvedl jsem ji proto, aby bylo vidět, že běh celého kódu je podmíněn hodnotou true proměnné switcher.

Celé přiřazení fuguje na jednoduchém principu. Do proměnné tagList si uložíte pole obsahující tagy. Ty poté procházíte, dokud nenajdete takový tag STYLE, který obsahuje atribut TITLE nastavený na hodnotu css2. Využíváte zde metodu getAttribute(‚název parametru‚), která vrací hodnotu atributu u daného tagu. U IE4 musíte testovat, zda název tagu je STYLE, protože v jeho případě obsahuje proměnná tagList pole všech tagů webové stránky. Po nalezení potřebného tagu přiřadíte odkaz na něj do proměnné style a cyklus ukončíte.

Druhá část kódu, která čte preferovaný font z cookies, se snaží najít cookie se jménem secondStyle. Pokud ji najde a bude mít hodnotu false, přiřadí tuto hodnotu do proměnné secondStyle ve skriptu. To musíte udělat „ručně“, protože hodnota z cookies je typu string, zatímco vy potřebujete hodnotu typu boolean. Proměnná secondStyle obsahuje informaci, zda je druhá tabulka stylů vypnuta (hodnota false) nebo zapnuta (true). Pokud má uživatel v cookies uloženou hodnotu false u této proměnné, pak skript druhou tabulku stylů vypne (toho dosáhnete pomocí vlastnosti disabled). Pokud je na naší stránce uživatel poprvé, a nemá tím pádem v cookies žádnou proměnnou secondStyle náležející našemu serveru, bude hodnota této proměnné true, protože jste ji nastavili na tuto hodnotu již v počátku .

Samotnou změnu písma bude uživatel vyvolávat pomocí tlačítka. To můžete umístit kamkoli na stránku:

Jak vidíte, vytvoření tlačítka je opět podmíněno hodnotou proměnné switcher. Po klepnutí na tlačítko se vyvolá funkce swichFont(), které předáváte jako parametr odkaz na tlačítko. Tohoto odkazu využíváte ke změně textu na tlačítku. Nyní se již podívejte na funkci swichFont() (nachází se stále v sekci HEAD):

function switchFont(myButton)
{
  style.disabled = secondStyle ? true : false;
  secondStyle = secondStyle ? false : true;
  myButton.value = secondStyle ? ‚Velký Times‘ : ‚Malý Arial‘;
}

Nakonec je třeba uložit preferovaný font při opuštění stránky do cookies. Pro tento účel použijete událost onunload tagu BODY:

Funkce saveFont() potom vypadá takhle:

function saveFont()
{
  date = new Date();
  date.setTime(date.getTime() + 31536000000); //platnost cookie nastavujeme na jeden rok
  document.cookie = ‚secondStyle=‘ + secondStyle + ‚; expires=‘ + date.toGMTString() + ‚; path=/‘;
}
</script>

Uvedený příklad se dá velmi snadno upravit pro použití i v jiných situacích. Můžete také využít například direktivu @import nebo tag LINK a manipulovat tak i s importovanými tabulkami stylů. U tagu LINK již specifikace HTML dovoluje použít atribut ID, a tak můžete efektivně zkrátit tu část kódu, kde se přiřazuje odkaz na tabulku stylů do proměnné style.