Détecter une modification de la taille des caractères

Invité · 24/10/2009, 12h14

Bonjour à tous !

Cherchant à rendre un site le plus fluide possible, j'essaye d'adapter la présentation en fonction de la taille des caractères.
L'idée est de faciliter la lecture des utilisateurs dont l'espace d'affichage de la page est large de moins de 30 caractères (par exemple).
Pour l'instant, j'obtient le rapport taille d'un caractère/taille de l'espace d'affichage de la manière suivante :

1) calcul de la largeur de l'espace d'affichage avec "document.body.offsetWidth" juste avant la balise de fermeture </body>

2) calcul de la largeur d'un caractère avec un M majuscule en l'entourant d'un span et d'un identifiant ("m"), puis avec "document.getElementById("m").offsetWidth"

3) diviser la taille d'un caractère par la taille de l'espace d'affichage pour connaitre le nombre de caractères qu'il est possible d'afficher sans retour à la ligne.

Bien sur, il s'agit d'une approximation, puisque le M majuscule est beaucoup plus large que le i minuscule par exemple.
Si le visiteur redimensionne sa fenêtre, on peut refaire le calcul grâce à <body onresize="calcul()">.
Par contre, il y a plusieurs problèmes que je n'arrive pas à résoudre :

1) Par défaut, dans firefox, CTRL MAJ + augmente de façon bizarre la taille du texte. En effet, le nombre de pixels donnés par offsetWidth ne change pas. C'est affiché sur le même nombre de pixels mais les pixels sont plus gros. Donc il faudrait arriver à avoir la taille en centimètres ou en millimètres. Ce problème est secondaire car il y a un moyen de n'augmenter que la taille du texte et dans ce cas là, offsetWidth renvoie le vrai nombre de pixels.

2) Si l'utilisateur augmente la taille de la police (sans zoomer) après le chargement de la page, je n'ai aucun moyen de le détecter pour ajuster la présentation. Il n'y a pas d'attribut du style <body onfontresize=""> ... donc je suis coincé. A part mettre une minuterie qui vérifie toute les secondes mais c'est vraiment sale, je ne le ferait pas. Ca c'est un gros problème pour moi.

Quelqu'un aurait une piste ?

**SpaceFrog** · 24/10/2009, 15h14

Une piste alors :
http://javascript.developpez.com/faq...pt#tailleTexte

Invité · 25/10/2009, 09h36

Merci d'avoir répondu !

La propriété innerHTML pourra être utile quand je me préoccuperait de masquer le texte d'essai (un M dans mon cas). Dans ton lien, un bouton est utilisé pour déclencher le calcul, le calcul n'est pas lancé automatiquement lorsque la taille des caractères est modifiée. Est-ce que tu me suggère implicitement que surveiller la modification de la taille de la police est impossible et qu'il faut donc que je me rabatte sur un bouton ou un équivalent afin que ce soit l'utilisateur qui déclenche l'action du calcul et/ou l'action de modification de la présentation ?

**Bovino** · 25/10/2009, 10h12

Un peu d'imagination !
L'exemple utilise un bouton pour lancer le test, mais la fonction n'a rien à voir avec le bouton, tu peux la lancer quand et comme tu veux !

**SpaceFrog** · 25/10/2009, 10h22

L'imagination a subi de plein fouet la crise ?

il doit y avoir ailleurs sur le forum un autre script de ce type, j'ai en fait amélioré celui-là en creat le div par le DOM en lui attribuant en innerHTML le texte, en recupérant son width puis en effaça,t le div après.
Rien ne t'empéche de faire une focntion sur cette base pour recupérer la largeur du texte sur l'evènement qui te chante ...

Invité · 25/10/2009, 14h36

Arf ... je croit que je me suis mal exprimé.

Je n'ai pas de problème pour obtenir la taille d'un objet, le créer puis l'effacer.

L'évènement qui me chante c'est lorsque l'utilisateur va dans le menu "Affichage" >> "Zoom" et qu'il clique sur "Agrandir". Et je ne sait pas comment surveiller cet évènement. Je pense que ça n'as pas été prévu dans Javascript et donc que ce n'est pas possible.
Donc la seule solution que je puisse imaginer est que ce soit l'utilisateur qui déclenche le calcul à partir d'une zone de la page (un bouton, un lien, un "span" , peut importe ...) grâce à un surveilleur d'évement comme onclick.

Le cas idéal serait que je puisse créer mon propre surveilleur d'évènement, comme onclick, sauf qu'il surveille la valeur de la propriété CSS "font-size" de l'élément body (mais je ne connait pas assez Javascript pour cela).

En fait tout est dans le titre, je cherche un moyen de détecter l'évenement "modification de la taille du texte" . Je ne charche pas à simplement calculer la taille du texte au chargement de la page.

**SpaceFrog** · 26/10/2009, 08h26

a mon avis si tu ne veux pas avoir a surveiller le onkeydown ou up du body, regarde plutot du coté de onresize sur un objet ?

Invité · 26/10/2009, 20h02

Pas bête ça !

Voici le meilleur résultat que j'ai pu obtenir :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html><head><title>test</title>
<style>
html {background-color:orange;}
body {background-color:yellow;}
</style>
</head>
 
<body onresize="alert('plop');">
 
<p>abc</p>
 
</body>
 
</html>

D'après ce que j'ai testé, onresize ne fonctionne que sur <body>, ce qui est un peu dommage. C'est peut-être une question d'efficacité. De plus ça ne détecte que le "zoom" sur l'ensemble de la page, et pas l'agrandissement du texte uniquement. Il faudrait que body soit ma zone de test qui contienne un M majuscule, et placer tout mon document dans des div positionnées en absolute hors du flux ... ce qui est un peu fastidieux.

Je vais arrêter la recherche là, j'ai eu les yeux plus gros que la tête je croit

Merci Spacefrog et Bovino pour votre aide.

Si d'autres lisent ça, la bonne manière de gérer les évènements c'est avec addEventListener

-----------------------------
Note : j'ai essayé de mettre [Abandon] dans le titre de ce fil de discussion mais ça ne fonctionne pas sur ce forum, et le tag "résolu" n'est pas approprié.

Détecter une modification de la taille des caractères

JavaScript

Discussions similaires

Partager

Partager