Récupérer la taille de la police

Bonjour à toutes et à tous,

Je cherche à récupérer la taille de la police d'un texte placé dans un DIV de ma page.

J'essaye de procéder ainsi :

Code:

---

1 2 3 4

const conteneur = document.querySelector(`.classeDuConteneur`);   const taillePolice = const.style.fontSize;

---

Mais lorsque je console.log la variable "conteneur", je ne vois rien. Pas d'erreur, pas d'undefined, juste rien.

Si je répète le procédé sur 10 éléments de ma page (qui ont tous la même taille) et que j'affiche la taille de la police récupérée :

Code:

---

1 2	console.log('taille : ', taillePolice);

---

j'obtiens :

Pièce jointe 612294

Donc j'obtiens 10 fois le même "rien".

Pourriez-vous m'aider ? Comment faire pour obtenir la taille de la police dans un format utilisable ? Idéalement j'aimerai récupérer "3em" ou "20px".

D'avance merci pour votre temps et pour votre aide.

Thufir Hawat

Salut

Tout dépend d’où sont déclarées const conteneur = document.querySelector(`.classeDuConteneur`); et const taillePolice = const.style.fontSize; il faut que cette déclaration soit global pour être utilisé dans la fonction ou tu as mis console.log('taille : ', taillePolice);, ou faire la déclaration de ces variables dans la fonction console.log ....

J'utilise tout ce code au sein d'une fonction.

En gros j'affiche des titres de films dans des DIVs dans ma page, j'affiche 10 titres. Mais certains titres sont trop longs et s'affichent donc sur plusieurs lignes, ce que je veux éviter.
Donc je veux créer une fonction pour vérifier si le titre est trop long (j'utilise "clientWidth", "scrollWidth", "clientHeight" et "scrollHeight" pour déterminer cela), et si c'est le cas, réduire la taille de la police.

Au sein de cette fonction :

Code:

---

1 2 3 4 5 6 7 8

function taillePolice(classCont) { const cont = document.querySelector(`.${classCont}`);   const taillePolice = cont.style.fontSize;   ... }

---

Ensuite je vérifie si le titre est trop long, si c'est le cas, je diminue la taille de la police. Et je relance la fonction autant de fois qu'il faut jusqu'à ce que le titre ne "dépasse" plus.

Mais pour le moment je ne parviens pas à récupérer la taille de la police.

Merci pour ton aide ProgElecT et merci à toutes les autres et tous les autres.

Thufir Hawat

Bonjour,
pour récupérer à coup sûr il te faut utiliser la méthode window.getComputedStyle().

Code:

---

1 2 3 4

const elemCible = document......; const styleElemCible = window.getComputedStyle(elemCible); // ensuite pour utilisation : console.log(styleElemCible.fontSize);

---

Citation:

---

Ensuite je vérifie si le titre est trop long, si c'est le cas, je diminue la taille de la police. Et je relance la fonction autant de fois qu'il faut jusqu'à ce que le titre ne "dépasse" plus.

---

Ainsi au final tu peux obtenir un déséquilibre visuel entre tes différents titres.

Pourquoi ne pas regarder du côte de text-overflow:ellipsis ?

Merci beaucoup, je vais essayé cette méthode.

La plupart des titres entrent sans problèmes dans le conteneur et ne devront pas être redimensionnés. Ce ne sont que de rares cas qui nécessitent le changement de taille de police. Cela provoque en effet un certain déséquilibre visuel, mais je veux que le titre figure en entier.

J'ai effectivement testé avec text-overflow: ellipsis; ça permet de garder la taille de police identique pour tous les titres, mais les titres trop longs ne s'affichent pas en entier.
Je vais tester ce que cela donne avec le changement de taille, et si ce n'est pas satisfaisant je tenterai autre chose.

Merci beaucoup pour votre aide en tout cas.

Thufir Hawat

Voilà à quoi ressemble finalement ma fonction :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

function taillePolice(classCont) { const cont = document.querySelector(`.${classCont}`); if (cont.clientWidth - cont.scrollWidth < 0 || cont.clientHeight - cont.scrollHeight < 0) { const styleElemCible = window.getComputedStyle(cont); const tailleTitre = parseFloat(styleElemCible.fontSize.slice(0, -2)); cont.style.fontSize = `${tailleTitre - 0.1}px`;   taillePolice(classCont); } }

---

Pour chaque titre de la page on lance la fonction "taillePolice()". Celle-ci vérifie si le titre "déborde", si c'est le cas, elle réduit la taille de la police de 0.1px. La fonction est récursive et continue donc à réduire la taille de la police jusqu'à ce que le titre ne déborde plus.

Merci pour votre aide.

Thufir Hawat

Je veux bien mais comment fais-tu au « resize » de la page dans un sens comme dans l'autre.

Bonjour,

J'ai peu ou prou rencontré le même problème et sans trouver de solution existante, j'ai pondu cela.

Mon objectif : maximiser la taille du texte dans un DIV tous supports confondus (du moniteur xx" à l'écran d'un téléphone).

Principe :

appliquer une font size au contenu de la div
vérifier s'il y a des scroll bars
si oui => je diminue la taille de fonte et fixe le maximum à la size testée
si non => j'augmente la taille de fonte et fixe le minimum à la size testée

Pour des raisons de performance, c'est une approche dichotomique. Je démarre en testant à 500px puis 250 puis 125...

C'est très bourrin (et j'ai presque honte) mais ça fonctionne étonnamment bien.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

function optSize(element) { if (element.innerText!="" || element.value!="") { if (element.offsetParent!=null) // If element is visible { // Dichotomous approach let min=0; let max=999; let test=500; do { element.style.fontSize=test+"px"; element.style.lineHeight=test+"px"; if (hasScrollBar(element.parentNode)) { max=test; test=max-Math.trunc((max-min)/2); element.style.fontSize="1px"; // Reset scroll bars } else { min=test; test=Math.trunc((max-min)/2)+min; } } while(max-min>1); element.style.lineHeight=min+"px"; element.style.fontSize=min+"px"; } } }   function hasScrollBar(container) { return(container.scrollHeight>container.offsetHeight) || (container.scrollHeight>container.clientHeight) || (container.scrollWidth>container.offsetWidth) || (container.scrollWidth>container.clientWidth) || (document.body.scrollHeight>document.body.clientHeight) || (document.body.scrollWidth>document.body.clientWidth); }

---

Pour les éléments qui doivent avoir une unicité de taille de police, je les incorpore dans un div container et lance sur ce dernier une boucle qui détermine la taille de fonte la plus petite et l'applique à tous les autres éléments.