Discussion :

[kurkaine]

Bonjour,

Je me documente sur la création des templates avec le CMS Joomla et je suis tombé sur un article concernant les "Text Resizers", et voici un extrait de cet article :

Many size are becoming more accessible and are incorperating text resizers into the design. As a general rule for best cross-browser consistancy, you need to do a few of things for text resizer buttons to work well:

1. in the body tag, define a font size of 76%
body { font-size:76%; }

2. Define all font sizes in "em". This is a relative unit, for example:
p { font-size:1em; }

3. Make all text containers dynamic. An example of this not working is www.joomla.org. If you make bigger, the container for the horizontal menu does not get bigger, if you use FF to go past the size that you can acheive with the buttons (ctrl+ in FF), the layout breaks. You get round it by not putting any fixed heights on containers, you can see this working at www.joomlashack.com.

4. Download joomla.org's font style switcher file
(http://forum.joomla.org/Themes/jooml...tylechanger.js)

5. Put that file somewhere in the folder of the template you are using

6. Put A+, A-, and Reset images in your template's image folder

7. Paste the following code snippet somewhere in your template's index.php file
<script type="text/javascript" language="javascript" xsrc="<?php echo $mosConfig_live_site;?> /templates/<?php echo $mainframe->getTemplate(); ?>/____1____">
</script>
<a xhref="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
<img xsrc="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____2____" alt="" border="0" />
</a>
<a xhref="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
<img xsrc="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____3____" alt="" border="0" />
</a>
<a xhref="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
<img xsrc="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____4____" alt="" border="0" />
</a>

8. Do all of the following:

* Replace ____1____ with the location in your template folder where you saved the .js file
* Replace ____2____ with the name of your A+ image
* Replace ____3____ with the name of your A- image
* Replace ____4____ with the name of your Reset image

J'ai cherché d'autre site à ce sujet car je n'ai vraiment pas compris ce qu'est les font resizers et les A-, A+, reset image. Mon anglais technique me permet de comprendre certaines choses mais là j'ai du mal. J'ai trouvé un autre article plus complet sur A list appart.

Quelqu'un pourrait m'expliquer de quoi il s'agit ? Je m'intéresse beaucoup à l'accessibilité des sites mais je débute en CSS.

Merci d'avance

[MasterOfChakhaL]

En gros, cet article te propose un moyen de mettre en évidence une fonctionnalité qui est normalement offerte par les navigateurs.

L'unité em est proportionnelle. Elle correspond en gros à la taille d'un M majuscule.
Si tu utilises cette unité alors, il suffira a l'utilisateur de redimensionner la taille initiale de la police pour que toutes les tailles définies s'adapte.

Avec opéra, il suffit d'utiliser + ou - (* pour reset), avec firefox, c'est ctrl + et ctrl - (ctrl + pour reset), avec IE, tu peux le faire dans le menu "taille du texte".

Cette fonctionnalité n'étant pas forcément connue de tous les internautes, l'article que tu cites proposes de créer un raccourci "plus parlant" a cette fonctionnalité.

[kurkaine]

Mais pourquoi on a besoin d'image :

* Replace ____1____ with the location in your template folder where you saved the .js file
* Replace ____2____ with the name of your A+ image
* Replace ____3____ with the name of your A- image
* Replace ____4____ with the name of your Reset image

?

[MasterOfChakhaL]

Il s'agit de ré-implémenter une fonctionnalité déjà existante.
Les images te servent à définir des éléments qui te donnent accès aux fonctions.
Tu pourrais tout a fait faire cela avec des liens...

[kurkaine]

ok, donc ça ne sert à rien d'utiliser ces fonts resizers puisqu'ils sont déjà implantés dans les navigateurs IE et FF ?

[MasterOfChakhaL]

Le seul point fondamental est de définir la taille du texte en utilisant l'unité em (avec des px, il est impossible de redimensionner le texte sous ie)

Tout va dépendre de ta cible, si tu t'adresses à des gens qui selon, n'ont que peu de chances de connaitre la fonctionnalité ca peut quand même valoir le coup.
Cela dit, je trouve qu'une image A+ ou A- n'est pas forcément plus parlant (il faut être habitué au traitement de texte pour que ca nous parle). Si ma mère voit un bouton A+, elle pensera que c'est pour dire aur revoir...

Tu as le choix de ne rien faire, de prévoir une petite page d'aide expliquant qu'il est possible de redimensionner le texte (tu indiques la manip pour les navigateurs les plus courants) ou alors faire comme te l'indique l'article. Personnellement, je trouve beaucoup plus parlant un lien "agrandir/réduire la taille du texte" qu'une icone...

[kurkaine]

Merci, j'ai bien compris le truc. C'est vrai que ça peut-être pratique pour les sites accessibles.

Merci beaucoup de tes explications, très complètes.

Aurevoir.