Adaptation automatique d'un texte (fontSize & découpage) à la taille du container parent

Niveau : Avancé
Techniques : HTML, CSS, JS

Bonsoir,

Poser un problème est déjà concourir à le résoudre.

1. Le principe

Une interface plein écran présente des blocs (DIV) de tailles différentes. Chacun contient un texte dont la fontSize est maximisée (en fonction de la taille du bloc et du texte) afin de faciliter la lecture.

Ca fonctionne super-bien quand le texte à afficher tient sur 1 seule ligne. Je peux même définir une classe qui contiendra plusieurs blocs qui s'aligneront sur le plus exigeant (le texte le plus long détermine la fontSize qui sera aussi appliquée aux autres éléments membre de la même classe afin de conserver une homogénéité de fontSize). Si j'affiche un clavier numérique, le "8" devra avoir la même fontSize que le "1". Vous me suivez toujours ?

2. Comment cela fonctionne-t-il ?

J'ai la taille du parent. J'ai la taille du texte dans une fontSize disons de 20px. Je fais une règle de 3 (moins un chouia pour la TVA). En règle générale, le texte est plus large que haut (comme ma copine) mais je gère aussi le contraire (Si vous avez une copine plus haute que large, je suis preneur).

3. Où ça coince

Dans le cas d'un contenu qui est affiché en plusieurs lignes (je ne formate pas le contenu avec des <br>, je suis du type Fire and forget, c'est d'ailleurs ce que m'a dit ma copine avant de se barrer :-), je :

1. connais et maîtrise la taille du container parent (dans une certaine mesure, la certitude n'étant pas règle maîtresse en matière de rendu graphique)
2. ne sais pas comment le navigateur (ou webview) va découper le texte

Avez-vous une idée pour l'affichage (et éventuellemnt pour le retour de ma copine)) ?

Merci d'être arrivé jusqu'à la fin de ce post.

Bonjour,

Trop de blabla. J'ai décroché après "Bonsoir,".... :aie:

Mets-nous :

• un exemple de code (HTML + CSS), simple, qu'on peut tester
• éventuellement une copie d'écran de ce que tu obtiens, et un dessin (ou autre) de ce que tu veux obtenir
• et rédige une question claire et concise.

Cela dit, voici un 1er élément de réponse :
Comme tu l'as dit, ça se passe au niveau du navigateur, donc chez le "client".
Je doute que le CSS seul suffise. Il faudra du JavaScript.

J'avais fait ce bout de code autrefois : https://codepen.io/jreaux62/pen/trzEC
Si ça peut te donner des idées...



Et oublie ta copine : c'est mort...
Comme on dit chez nous : "Grand diseux, p'tit faiseux".

JS était mentionné 1 ligne avant Bonsoir :D

Je n'ai rien trouvé de fonctionnel sur le net, je suis donc en train d'écrire le code et c'est assez bluffant, aussi bien sur un écran 22" que 6".

Merci de ta contribution.