Taille automatique du texte dynamique pour remplir un conteneur de taille fixe

Question

Taille automatique du texte dynamique pour remplir un conteneur de taille fixe

Demandé el 27 de Mars, 2009: Quand la question a-t-elle été
135789 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai besoin d'afficher le texte saisi par l'utilisateur dans un div de taille fixe. Ce que je veux, c'est que la taille de la police soit automatiquement ajustée pour que le texte remplisse la boîte autant que possible.

Ainsi, si le div fait 400px x 300px. Si quelqu'un entre ABC, la police sera très grande. S'il entre un paragraphe, la police sera minuscule.

Il faudrait probablement commencer par une taille de police maximale - peut-être 32px, et tant que le texte est trop grand pour entrer dans le conteneur, réduire la taille de la police jusqu'à ce qu'il rentre.

Demandé el 27 de Mars, 2009 par GeekyMonkey

130 votes

C'est probablement la fonction la plus étonnante qui aurait dû être ajoutée à HTML5/CSS3 sans avoir besoin de JS.

Commenté el 5 de Septembre, 2012 par John Magnolia

0 votes

J'ai effectué quelques mesures en modifiant la longueur d'un texte dynamique et la taille du conteneur pour déterminer la taille de la police qui permettra au texte de s'adapter parfaitement. Et après avoir effectué une analyse de régression, j'ai mis au point une fonction mathématique simple qui génère automatiquement la meilleure taille de police.

Commenté el 2 de Juin, 2013 par Friend of Kim

2 votes

Il s'avère en fait que le graphique qui vous donne la meilleure taille de police est donné par f(x) = g(lettres) * (x / 1000)^n, où g(x) est une fonction simple, n varie en fonction de la police que vous utilisez. (Bien qu'elle puisse avoir une valeur standard pour toutes les polices, si vous ne voulez pas la modifier pour qu'elle soit absolument parfaite...). x est la taille en pixels carrés du conteneur.

Commenté el 2 de Juin, 2013 par Friend of Kim

Afficher 9 autres commentaires

Answer 1

5 Réponses

Answer 2

171voto

GeekyMonkey Points 5036

Merci Attaque . Je voulais utiliser jQuery.

Vous m'avez orienté dans la bonne direction, et c'est ce que j'ai obtenu :

Voici un lien vers le plugin : https://plugins.jquery.com/textfill/
Et un lien vers la source : http://jquery-textfill.github.io/

;(function($) {
    $.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
        var ourText = $('span:visible:first', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
        return this;
    }
})(jQuery);

$(document).ready(function() {
    $('.jtextfill').textfill({ maxFontPixels: 36 });
});

et mon html est comme ceci

<div class='jtextfill' style='width:100px;height:50px;'>
    <span>My Text Here</span>
</div>

C'est mon premier plugin jquery, donc il n'est probablement pas aussi bon qu'il devrait l'être. Les conseils sont les bienvenus.

Répondu el 27 de Mars, 2009 par GeekyMonkey (5036 Points )

8 votes

En fait, je viens juste de le nettoyer et de le packager en tant que plugin disponible sur jquery.com à l'adresse suivante plugins.jquery.com/projet/TextFill

Commenté el 27 de Mars, 2009 par GeekyMonkey

3 votes

@GeekyMonkey, avez-vous retiré le plugin ? Je viens de suivre un lien vers cette page et j'ai pensé jeter un coup d'oeil, mais les liens de jQuery.com vers votre site reviennent. 404 .

Commenté el 6 de Décembre, 2010 par David Thomas

0 votes

Note : J'ai constaté que pour une raison quelconque, ce plugin ne fonctionne que lorsque le div ($('.jtextfill') dans l'exemple ci-dessus) fait partie du document Root. Il semble que .width() renvoie zéro lorsque la div est intégrée dans d'autres divs.

Commenté el 11 de Février, 2011 par Jayesh

Afficher 11 autres commentaires

Answer 3

53voto

Marcus Ekwall Points 14489

Je n'ai pas trouvé les solutions précédentes suffisamment adéquates en raison de leurs mauvaises performances, alors j'ai créé la mienne qui utilise de simples mathématiques au lieu de boucles. Elle devrait également fonctionner correctement dans tous les navigateurs.

Selon ce test de performance il est beaucoup plus rapide que les autres solutions trouvées ici.

(function($) {
    $.fn.textfill = function(maxFontSize) {
        maxFontSize = parseInt(maxFontSize, 10);
        return this.each(function(){
            var ourText = $("span", this),
                parent = ourText.parent(),
                maxHeight = parent.height(),
                maxWidth = parent.width(),
                fontSize = parseInt(ourText.css("fontSize"), 10),
                multiplier = maxWidth/ourText.width(),
                newSize = (fontSize*(multiplier-0.1));
            ourText.css(
                "fontSize", 
                (maxFontSize > 0 && newSize > maxFontSize) ? 
                    maxFontSize : 
                    newSize
            );
        });
    };
})(jQuery);

Si vous voulez contribuer, j'ai ajouté ceci à Gist .

Répondu el 1 de Novembre, 2011 par Marcus Ekwall (14489 Points )

0 votes

Joli script, mais je pense que l'OP cherche à remplir la totalité de la zone de texte, plutôt que de simplement adapter une seule ligne de texte horizontalement. Il semble que c'est ce que fait le Fiddle dans votre lien Gist.

Commenté el 2 de Novembre, 2011 par Jon

1 votes

@Jon, merci ! Vous avez raison de dire que mon script ne fait pas de lignes multiples, mais encore une fois, le PO n'a pas spécifiquement demandé cela, donc votre hypothèse pourrait être fausse. En outre, ce type de comportement n'a pas beaucoup de sens imo. Je suppose que la meilleure façon d'ajouter le support multi-lignes serait de diviser la chaîne de caractères en fonction de la quantité de mots, puis de calculer chaque partie avec le script ci-dessus et ce serait très probablement plus rapide de toute façon.

Commenté el 7 de Novembre, 2011 par Marcus Ekwall

0 votes

Oui, vous avez tout à fait raison, la question de l'OP est un peu ambiguë. Je n'avais pas l'intention de sauter à une conclusion aussi vite. Pour ceux qui cherchent un support multiligne, j'ai eu du succès avec le code de sandstrom ci-dessus. Sinon, pour du texte d'une seule ligne, c'est une excellente solution :)

Commenté el 7 de Novembre, 2011 par Jon

Afficher 10 autres commentaires

Answer 4

36voto

attack Points 1085

Même si j'adore les votes positifs que j'obtiens de temps en temps pour cette réponse (merci !), ce n'est vraiment pas la meilleure façon d'aborder ce problème. Veuillez consulter d'autres réponses merveilleuses, en particulier celles qui ont trouvé des solutions sans bouclage.

Néanmoins, à titre de référence, voici mon première réponse :

<html>
<head>
<style type="text/css">
    #dynamicDiv
    {
    background: #CCCCCC;
    width: 300px;
    height: 100px;
    font-size: 64px;
    overflow: hidden;
    }
</style>

<script type="text/javascript">
    function shrink()
    {
        var textSpan = document.getElementById("dynamicSpan");
        var textDiv = document.getElementById("dynamicDiv");

        textSpan.style.fontSize = 64;

        while(textSpan.offsetHeight > textDiv.offsetHeight)
        {
            textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
        }
    }
</script>

</head>
<body onload="shrink()">
    <div id="dynamicDiv"><span id="dynamicSpan">DYNAMIC FONT</span></div>
</body>
</html>

Et voici une version avec classes :

<html>
<head>
<style type="text/css">
.dynamicDiv
{
    background: #CCCCCC;
    width: 300px;
    height: 100px;
    font-size: 64px;
    overflow: hidden;
}
</style>

<script type="text/javascript">
    function shrink()
    {
        var textDivs = document.getElementsByClassName("dynamicDiv");
        var textDivsLength = textDivs.length;

        // Loop through all of the dynamic divs on the page
        for(var i=0; i<textDivsLength; i++) {

            var textDiv = textDivs[i];

            // Loop through all of the dynamic spans within the div
            var textSpan = textDiv.getElementsByClassName("dynamicSpan")[0];

            // Use the same looping logic as before
            textSpan.style.fontSize = 64;

            while(textSpan.offsetHeight > textDiv.offsetHeight)
            {
                textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
            }

        }

    }
</script>

</head>
<body onload="shrink()">
    <div class="dynamicDiv"><span class="dynamicSpan">DYNAMIC FONT</span></div>
    <div class="dynamicDiv"><span class="dynamicSpan">ANOTHER DYNAMIC FONT</span></div>
    <div class="dynamicDiv"><span class="dynamicSpan">AND YET ANOTHER DYNAMIC FONT</span></div>
</body>
</html>

Répondu el 27 de Mars, 2009 par attack (1085 Points )

3 votes

J'ai trouvé que cela fonctionnait mieux avec offsetWidth J'ai également dû créer une variable pour la taille, puis ajouter les px. textSpan.style.fontSize = size+"px";

Commenté el 21 de Juin, 2012 par Wezly

2 votes

Il est certain que '+"px"' est nécessaire.

Commenté el 27 de Novembre, 2014 par sandun dhammika

0 votes

Merci, sauveur de vie ! Je ne connais pas jQuery, donc je m'en tiens à votre solution :)

Commenté el 26 de Février, 2019 par vintproykt

Answer 5

32voto

Hoffmann Points 3585

La plupart des autres réponses utilisent une boucle pour réduire la taille de la police jusqu'à ce qu'elle tienne dans le div, ce qui est TRÈS lent puisque la page doit rendre à nouveau l'élément chaque fois que la police change de taille. J'ai finalement dû écrire mon propre algorithme pour que cet élément fonctionne d'une manière qui me permette de mettre à jour son contenu périodiquement sans geler le navigateur de l'utilisateur. J'ai ajouté quelques autres fonctionnalités (rotation du texte, ajout de rembourrage) et je l'ai packagé sous forme de plugin jQuery, que vous pouvez obtenir à l'adresse suivante :

https://github.com/DanielHoffmann/jquery-bigtext

appelez simplement

$("#text").bigText();

et il s'adaptera parfaitement à votre conteneur.

Voyez-le en action ici :

http://danielhoffmann.github.io/jquery-bigtext/

Pour l'instant, il présente quelques limitations : la division doit avoir une hauteur et une largeur fixes et il ne permet pas d'envelopper le texte sur plusieurs lignes.

Je vais m'efforcer d'obtenir une option permettant de définir la taille maximale des caractères.

Edit : J'ai trouvé d'autres problèmes avec le plugin, il ne gère pas d'autres modèles de boîtes que le modèle standard et le div ne peut pas avoir de marges ou de bordures. Je vais travailler dessus.

Edit2 : J'ai maintenant corrigé ces problèmes et limitations et ajouté plus d'options. Vous pouvez définir une taille de police maximale et vous pouvez également choisir de limiter la taille de la police en utilisant la largeur, la hauteur ou les deux. Je vais travailler sur l'acceptation des valeurs max-width et max-height dans l'élément wrapper.

Edit3 : J'ai mis à jour le plugin à la version 1.2.0. Nettoyage majeur du code et nouvelles options (verticalAlign, horizontalAlign, textAlign) et support pour les éléments internes à l'intérieur de la balise span (comme les sauts de ligne ou les icônes font-awesome).

Répondu el 2 de Juillet, 2013 par Hoffmann (3585 Points )

1 votes

Je me demande pourquoi l'habillage du texte en plusieurs lignes n'est pas supporté ?

Commenté el 19 de Mai, 2014 par Manish Sapariya

1 votes

@ManishSapariya C'est possible, mais vous devez ajouter les sauts de ligne (balises br) manuellement. La raison pour laquelle je ne prends pas en charge l'habillage automatique du texte est que pour le rendre rapide (il suffit de changer la taille de la police deux fois au lieu de plusieurs), je dois partir du principe que le texte ne s'enroulera pas entre les mots. La façon dont mon plugin fonctionne est de définir la taille de la police à 1000px puis de voir le facteur de la taille du texte par rapport au conteneur, je réduis alors la taille de la police par le même facteur. Pour prendre en charge l'habillage normal du texte, je devrais utiliser l'approche lente (réduire la taille de la police plusieurs fois), ce qui est très lent.

Commenté el 19 de Mai, 2014 par Hoffmann

0 votes

Hey ! Comme il n'y a pas de messagerie privée ici, sur StackOverflow, je vais devoir vous demander en commentant votre réponse. J'adore votre plugin jQuery, mais je n'arrive pas à le faire fonctionner pour moi. J'ai inclus la bonne bibliothèque jQuery, téléchargé votre plugin et l'ai inclus. Maintenant, lorsque j'essaie de l'utiliser, la console indique "Uncaught TypeError : undefined is not a function". Est-ce un problème que vous connaissez ? Savez-vous comment le corriger ? Merci

Commenté el 28 de Octobre, 2014 par Gust van de Wal

Afficher 3 autres commentaires

Answer 6

9voto

sandstrom Points 2420

Ceci est basé sur ce que GeekyMonkey a posté ci-dessus, avec quelques modifications.

; (function($) {
/**
* Resize inner element to fit the outer element
* @author Some modifications by Sandstrom
* @author Code based on earlier works by Russ Painter (WebDesign@GeekyMonkey.com)
* @version 0.2
*/
$.fn.textfill = function(options) {

    options = jQuery.extend({
        maxFontSize: null,
        minFontSize: 8,
        step: 1
    }, options);

    return this.each(function() {

        var innerElements = $(this).children(':visible'),
            fontSize = options.maxFontSize || innerElements.css("font-size"), // use current font-size by default
            maxHeight = $(this).height(),
            maxWidth = $(this).width(),
            innerHeight,
            innerWidth;

        do {

            innerElements.css('font-size', fontSize);

            // use the combined height of all children, eg. multiple <p> elements.
            innerHeight = $.map(innerElements, function(e) {
                return $(e).outerHeight();
            }).reduce(function(p, c) {
                return p + c;
            }, 0);

            innerWidth = innerElements.outerWidth(); // assumes that all inner elements have the same width
            fontSize = fontSize - options.step;

        } while ((innerHeight > maxHeight || innerWidth > maxWidth) && fontSize > options.minFontSize);

    });

};

})(jQuery);

Répondu el 8 de Novembre, 2009 par sandstrom (2420 Points )

0 votes

La différence est qu'il peut prendre plusieurs éléments enfants, et qu'il prend en compte le remplissage. Utilise font-size comme taille maximale par défaut, pour éviter de mélanger javascript et css.

Commenté el 8 de Novembre, 2009 par sandstrom

5 votes

C'est génial, mais comment l'utiliser ? Je fais $('.outer').textfill() ; et je n'obtiens aucun changement.

Commenté el 13 de Mars, 2011 par Drew Baker

3 votes

Merci, c'est une très belle mise en œuvre. Une chose que j'ai rencontrée : si vous avez affaire à de très longues chaînes de texte et à des conteneurs très étroits, la chaîne de texte dépassera du conteneur, mais la largeur extérieure sera toujours calculée comme si elle ne dépassait pas. Ajoutez "word-wrap : break-word ;" dans votre CSS pour ce conteneur, cela résoudra ce problème.

Commenté el 5 de Novembre, 2011 par Jon

Taille automatique du texte dynamique pour remplir un conteneur de taille fixe

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Taille automatique du texte dynamique pour remplir un conteneur de taille fixe

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: