1. #1
    Candidat au Club
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    juillet 2016
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Aube (Champagne Ardenne)

    Informations professionnelles :
    Activité : Responsable de service informatique

    Informations forums :
    Inscription : juillet 2016
    Messages : 2
    Points : 3
    Points
    3

    Par défaut 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.

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 611
    Points : 21 243
    Points
    21 243

    Par défaut

    Bonjour,

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

    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".
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Discussions similaires

  1. Aide automatique des champs texte
    Par stailer dans le forum JavaScript
    Réponses: 6
    Dernier message: 18/01/2007, 15h22
  2. Supprimer surbrillance automatique d'un texte
    Par lolo25 dans le forum Access
    Réponses: 1
    Dernier message: 05/09/2006, 22h54
  3. Rafraichissement automatique d'un texte
    Par TheoOrl45 dans le forum JavaScript
    Réponses: 2
    Dernier message: 20/03/2006, 14h30
  4. adaptation automatique aux résolutions
    Par Caritan dans le forum JavaScript
    Réponses: 5
    Dernier message: 18/05/2005, 09h53
  5. Adapter longueur d'un texte
    Par eidole62 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 11/05/2005, 15h49

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo