Blackotine

Modifier la taille du texte avec CSS, Javascript et les cookies

Préambule

Un bouton permettant de modifier la taille du texte d’une page semble à première vue sans intérêt car il s’agit d’une fonctionnalité classique de tous les navigateurs

De plus, comment une personne ayant un handicap visuel, et qui pourrait donc trouver ce bouton utile, peut elle localiser facilement celui-ci ? Sans compter, que ces personnes naviguent tout le temps avec un affichage adapté à leur handicap et qu’il n’attendent pas que les sites proposent de tels gadgets mais que , par exemple, toutes les tailles de polices soient exprimées de façon relative, en « em ».

Voilà mon avis, mais toujours est-il que des clients peuvent (malgré nos recommandations) trouver cette fonction « intéressante » et demande à ce qu’elle soit intégré au site.

Choix de la technique

Deux solutions à ma connaissance :

• Créer des feuilles de styles avec différentes tailles de polices (feuilles de style alternatives)
• Spécifier des tailles de polices relatives et modifier uniquement celle du conteneur

Ces deux solutions utilisent Javascript et CSS et on peut envisager d’ajouter la « sauvegarde » du choix de la taille avec les Cookies.

J’ai choisi la deuxième solution qui me semble plus souple car aucune feuille de style supplémentaire ne sera créée.

Par contre si Javascript n’est pas activé, il ne se passe rien. SI les cookies sont désactivés on perd la taille choisie. Ces deux points ne me semble pas bloquants, ces deux boutons n’étant que des doublons des fonctionnalité du navigateur.

Les unités relatives

Si toutes vos unités sont fixes et que vous débutez avec les unités relatives en « em », je vous conseille cet aticle : Définir des tailles de police dynamiques cohérentes avec CSS.

Le code

Code javascript :

function fontSize(action) {
  var nb = .1;
  var conteneur = 'article';
  if (action=='+') {
	if (eval(document.getElementById(conteneur).style.fontSize.substring(0,document.getElementById(conteneur).style.fontSize.lastIndexOf('em')))<2) {
    document.getElementById(conteneur).style.fontSize = eval(document.getElementById(conteneur).style.fontSize.substring(0,document.getElementById(conteneur).style.fontSize.lastIndexOf('em'))) + nb + 'em';
    }
  } else if (eval(document.getElementById(conteneur).style.fontSize.substring(0,document.getElementById(conteneur).style.fontSize.lastIndexOf('em')))>1) {
    document.getElementById(conteneur).style.fontSize = eval(document.getElementById(conteneur).style.fontSize.substring(0,document.getElementById(conteneur).style.fontSize.lastIndexOf('em'))) - nb + 'em';
  }
  EcrireCookie("fontsize",eval(document.getElementById(conteneur).style.fontSize.substring(0,document.getElementById(conteneur).style.fontSize.lastIndexOf('em'))));
}
function EcrireCookie(nom, valeur) {
  var argv=EcrireCookie.arguments;
  var argc=EcrireCookie.arguments.length;
  var expires=(argc > 2) ? argv[2] : null;
  var path=(argc > 3) ? argv[3] : null;
  var domain=(argc > 4) ? argv[4] : null;
  var secure=(argc > 5) ? argv[5] : false;
  document.cookie=nom+"="+escape(valeur)+
  ((expires==null) ? "" : ("; expires="+expires.toGMTString()))+
  ((path==null) ? "" : ("; path="+path))+
  ((domain==null) ? "" : ("; domain="+domain))+
  ((secure==true) ? "; secure" : "");
}

Il y a deux variables modifiables dans cette fonction :
- L’identifiant du conteneur : conteneur
c’est la taille de police de cet élément qui va être modifié, ces éléments enfants étant exprimé en « em », ils le seront aussi.
- le nombre nb de « em » à ajouter ou diminuer à chaque clic.

Code html :

<a title="Augmenter la taille du texte" onclick="fontSize('+');return false;" href="#">Abc +</a>
<a title="Diminuer la taille du texte" onclick="fontSize('-');return false;" href="#">abc -</a>

J’ai limité la taille maximum à 2em et la taille minimum à 1em.

• Publié le 14 mai 2008 dans : CSS, Javascript
• 1 commentaire »