Modifier la taille du texte sur une page

[Dudu]

Salut les Hubbers

Voilà, je cherche à savoir quel est selon vous le meilleur moyen pour permettre au visiteur de changer la taille du texte.

J'ai vu 2 types de système: PHP et Javascript.

Pour le Javascript çà peut se faire avec ou sans cookie apparemment..

Selon vous quel est le meilleur système ? D'un point de vue 'confort de l'internaute' mais aussi bien sûr d'un point de vue accessibilité ?

Connaissez-vous des scripts tout faits ? (moi et les cookies = )

Merci d'avance

[KaRaK]

La meilleur façon pour changer la taille du texte, c'est de maintenir la touche CTRL enfoncée et d'utiliser la molette vers le haut ou vers le bas pour augmenter ou diminuer non ?

[Dudu]

En partant du principe que les gens le savent: ce n'est clairement pas la majorité des cas (et surtout sous IE Windows ce n'est pas forcément possible, navigateur pourri oblige)

Je cherche plutôt à faire çà via des liens-boutons

Un truc beginner-proof en fait (que même un débutant total pourra appréhender)

[Sebastien]

Pourquoi ne pas les éduquer en utilisant un pop-up activé par un lien "changer la taille du texte" qui expliquerait l'usage de CTRL+molette ?

[xpatval]

Bonjour, matin de pluie !!,

Pourquoi ne pas définir une taille relative de la police, dans ta feuille css ?

Tu n'as ensuite qu'à proposer un choix "agrandir-réduire"

Un article qui en parle: ici.

xpatval

[enroc]

Salut Dudu,

je ne suis pas sûr d'avoir bien compris :

- en PHP tu établis un cookie et tu changes la taille de la police en "dur" dans la feuille / balise CSS ?

- en Javascript tu envoie un cookie avec la taille voulue et tu réajustes avec un script le CSS ?

Tu pourrais développer ?

Sinon moi ce qui m'énerve sur les sites c'est quand on change la taille de la police et que la page suivante le choix est perdu (ces sites utilisent du javascript, mais pas de cookie).

Pour un maximum d'accessibilité ça doit être le PHP non ? Comme ça si le javascript n'est pas dispo, ben ça marche quand même.

Sur ce, bonne journée (pas trop pluvieuse par ici)

[Dudu]

'soir, merci pour vos réponses

Pourquoi ne pas les éduquer en utilisant un pop-up activé par un lien "changer la taille du texte" qui expliquerait l'usage de CTRL+molette ?

Parce qu'en fait je ne veux pas éduquer les visiteurs de ce site en particulier. Sans vouloir être péjoratif à leur encontre, il s'agit principalement de personnes ayant un niveau quasi-nul en informatique: çà prendrait 200 ans

Je veux juste leur donner ce qu'ils attendent: une interface client toute bête avec des boutons à cliquer comme on voit sur beaucoup de sites => un grand A pour agrandir, un petit A pour rétrécir.

Bonjour, matin de pluie !!,

Pourquoi ne pas définir une taille relative de la police, dans ta feuille css ?

Tu n'as ensuite qu'à proposer un choix "agrandir-réduire"

Un article qui en parle: ici.

xpatval

Ce n'est pas exactement ce que je cherchais mais çà a l'air intéressant. Je connaissais cet article mais je n'étais jamais aller voir le lien d'alistapart sur les "alternate style sheets".

Çà pourra peut-être résoudre mon affaire, merci

A propos de matin de pluie j'en connais un qui est sorti vaillament en T-shirt ce matin, en toute confiance

<------

[edit] je viens de lire çà. Mais dans ce cas il me faudrait 3 CSS quasi-redondantes, car seule une ou deux lignes changeraient entre chaque

S'il n'y a rien de mieux ou de plus simple je me rabattrais là-dessus, merci :-)

[/edit]

Salut Dudu,

je ne suis pas sûr d'avoir bien compris :

- en PHP tu établis un cookie et tu changes la taille de la police en "dur" dans la feuille / balise CSS ?

- en Javascript tu envoie un cookie avec la taille voulue et tu réajustes avec un script le CSS ?

Tu pourrais développer ?

Sinon moi ce qui m'énerve sur les sites c'est quand on change la taille de la police et que la page suivante le choix est perdu (ces sites utilisent du javascript, mais pas de cookie).

Pour un maximum d'accessibilité ça doit être le PHP non ? Comme ça si le javascript n'est pas dispo, ben ça marche quand même.

Sur ce, bonne journée (pas trop pluvieuse par ici)

Donc la solution qui te semble la meilleure c'est celle du PHP si je comprends bien. Donc en gros il me faudrait 2 feuilles de styles:

* une avec "tout" sauf la taille de police du body

* une générée par PHP + cookies qui gérerait la taille de police principale (les autres tailles étant relatives, je n'ai besoin de générer que la taille générale)

Tu aurais un lien qui explique tout çà ? Un "tuto" comme disent les djeun'z

Parce que le PHP et moi on est déjà pas copains, mais alors si les cookies s'en mêlent c'est carrément le foutoir

En général mes pages PHP finissent toujours par donner une jolie page blanche avec unexpected error machin ...

[TheRec]

Bonsoir,

la solution du PHP est a retenir pour toute les raisons citées...

Les cookies sont une bonne idée, mais le niveau d'accessibilité n'est pas réellement très bon (on ne compte pas les gens qui désactivent volontairement/involontairement les cookies). Le choix, souvent fait par les webdesigner, est l'utilisation d'une variuable GET (par l'URL) supplémentaire décrivant le mode actuellement utilisé et lorsqu'elle n'est pas définie le mode par défaut est utilisé. En fonction de cette variable tu choisis la feuille de style à utiliser.

Le principe est donc le même et tes explications montrent que tu l'a compris, défini toutes les taille de polices avec un taille relative, et enuite dans une autre feuille de style (celle qui sera choisie en fonction de la variable GET) tu défi

Donc dans la page, tu inclus ta feuille de style de base comme tu le fais habituellement (bien entendu sans y avoir défini la taille de la police pour <body>). Ensuite tu procède ainsi :

$mode=(isset($_GET['mode'])?strtolower($_GET['mode']):"m");
if($mode == "xs") {
  // Lisaison de la feuille de style pour la taille extra-small
} elseif($mode == "s") {
  // Lisaison de la feuille de style pour la taille small
} elseif($mode == "l") {
  // Lisaison de la feuille de style pour la taille large
} elseif($mode == "xl") {
  // Lisaison de la feuille de style pour la taille extra-large
} elseif($mode == "c") {
  // Lisaison d'une feuille de style avec un contrast elevé (une option de plus que tu n'avais pas demandée..mais c'est très apprécié comme option)
} else {
  // Insertion de la feuille de style par défaut, j'entends par là celle qui contient la taille de <body> normale.
  // (par exemple m si $_GET['mode'] n'est pas déinif, ou tout autre valeur si l'utilisateur s'amuse avec les variables)
}

Je ne te ferais pas l'affront de t'expliquer comment lier une feuille avec la balise <link> ou un @import ...à toi de voir

La feuille de style qui est différente en fonction de la variable contiendra juste un ligne du type (imaginons que c'est pour le mode xl) :

body {font-size:150%}

nira la taille du <body>.

Modifié 6 Septembre 2005 par TheRec

[TheRec]

Je précise juste qu'un cookie peut aussi être utilisé en même temps que cette méthode. Cela ne nuit pas à l'accessibilité et cela simlifie la vie pour ceux qui les ont activés...je déconseillais juste l'utilisation uniquement d'un cookie qui n'aurait pas fonctionné pour tout le monde.

La gestion des cookies est très bien expliquée sur cette page du manuel PHP. A noter qu'il faut envoyer le cookie avant tout autre sortie vers le navigateur (à moins d'utiliser un buffer).

Dans ce cas, il faut vérifier si la valeur du cookie (par exemple $_COOKIE['mode']) a été définie (lors d'une visite préalable) si c'est le cas on défini que $mode = $_COOKIE['mode'] ... et on effectue toujours la vérification du contenu de mode pour définir la feuille de style à lier.

Si ce n'est pas le cas, on la défini en fonction du paramètre GET (dans les conditions pour selectionner la feuille de style a insérer) et pour les fois suivantes le cookie sera utilisé s'il a pu être défini...

[Country]

J'avais réalisé un petit script php/javascript (utilisant les cookies) pour donner la possibilité au visiteur de changer la taille du texte de la page.

Partie PHP :

<?php
// Au cas où le javascript serait désactivé
if(isset($_GET['size']) && $_GET['size']=='big') {
	$fontsize='1';
	setcookie('fontsize',1,time()+60*60*24*365*5,'/'); // Créer le cookie
	if(isset($_SERVER['HTTP_REFERER'])) header('location:'.$_SERVER['HTTP_REFERER']);
	else header('location:index.php');
} else if(isset($_GET['size'])) {
	$fontsize='0.75';
	setcookie('fontsize','',0,'/');	// Efface le cookie
	if(isset($_SERVER['HTTP_REFERER'])) header('location:'.$_SERVER['HTTP_REFERER']);
	else header('location:index.php');
}

// Lecture du cookie si il existe (qu'il ait été créé via JS ou via PHP)
if(isset($_COOKIE['fontsize'])) $fontsize='1';
else $fontsize='0.75';

if(count($_SERVER["argv"])!=0) $sep='&';
else $sep='?';
$lien_1=$_SERVER['REQUEST_URI'].$sep.'size=big';
$lien_2=$_SERVER['REQUEST_URI'].$sep.'size=small';
?>

CSS (partie affectée par le script) :

body { font-size:<?php echo $fontsize; ?>em; }

Partie Javascript :

function fontSize() {
	// Assigne l'action au lien pour agrandir le texte
	var lienbig=document.getElementById('big');
	lienbig.onclick=function() {
  var bodys=document.getElementsByTagName('body');
  bodys[0].style.fontSize='1em';
  // Créer le cookie
  var expires=new Date;
  expires.setFullYear(expires.getFullYear()+5);
  document.cookie='fontsize=1;expires='+expires.toGMTString()+';path=/;domain=';
  return false;
	};
	// Assigne l'action au lien pour réduire le texte
	var liensmall=document.getElementById('small');
	liensmall.onclick=function() {
  var bodys=document.getElementsByTagName('body');
  bodys[0].style.fontSize='0.75em';
  // Efface le cookie
  var expires=new Date;
  expires.setDate(expires.getDate()-1);
  document.cookie='fontsize=;expires='+expires.toGMTString()+';path=/;domain=';
  return false;
	};
}

window.onload=fontSize;

Partie HTML (liens pour le changement de la taille) :

<a id="big" href="<?php echo $lien_1; ?>">A</a><a id="small" href="<?php echo $lien_2; ?>">A</a>

Ce script fonctionne parfaitement Javascript activé ou pas.

2 petits défauts cependant :

- Il utilise les cookies, donc le visiteur se doit les avoir d'activés si il veut conserver la taille du texte.

- Le code PHP dans le CSS, dans le cas d'une feuille de style externe 2 solutions : ou exterioriser le CSS et laisser juste cette ligne dans la page. Ou placer une partie du script PHP dans le CSS, en modifiant le header.

Voila voila

[Dudu]

Wouhou.. ben si avec tout çà je n'arrive pas à mes fins c'est vraiment que je suis un neuneu J'y vois déjà beaucoup plus clair..

Un grand merci ..et au boulot le Dudu maintenant