Organizational Research By

Surprising Reserch Topic

how to automatically change the text size inside a div


how to automatically change the text size inside a div  using -'jquery,html,css,font-size'

asked Oct 13, 2015 by thiru
0 votes
5 views



Related Hot Questions

6 Answers

0 votes

I understand your question this way, you would like to fit some text into a given div with a fixed dimension, and if the div is to small, to show all the text, the font size sould be shrinked until the text fits into the div. If that's the point, here is my solution.

Here is an exmaple with a jQuery implementaion: http://jsfiddle.net/MYSVL/2/

Have some div

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

With a fixed size

#fitin {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
    font-size: 1em;
}

This JavaScript will do the job.

$(function() {
    while( $('#fitin div').height() > $('#fitin').height() ) {
        $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" );
    }
});
answered Oct 13, 2015 by akasati02
0 votes

FlowType.js will do just that: resize the font to match the bounding element, be it a div or another element type.

An example of implementing FlowType:

  1. Set up your style

    body {
    font-size: 18px;
    line-height: 26px;
    }
    
  2. Download FlowType from GitHub and include a reference to it in your head element

    flowtype.jQuery.js
    
  3. Call FlowType

    $('body').flowtype();
    
  4. (optional) Update default settings

    $('body').flowtype({
    minimum   : 500,
    maximum   : 1200,
    minFont   : 12,
    maxFont   : 40,
    fontRatio : 30,
    lineRatio : 1.45
    });
    

Check out their homepage for an interactive demo

answered Oct 13, 2015 by gauravg.gwl
0 votes

The question has been answered since long, but I'd like to add some notes.

Since, an extra jQuery plugin has been added to the universe: FlowType.js

https://github.com/simplefocus/FlowType.JS

I tried my hand at the given solutions and plugins (including FlowType.JS), in the end I wrote my own. I just like to include it here as 'inspiration'. I use a different approach: I calculate the ratio that the size of the text is larger then it's parent. I don't know if it makes sense, but for me it works nicely.

    /* shrinkText jQuery Plugin  */

(function( $ ){

  $.fn.shrinkText = function() {

    var $_me = this;
    var $_parent = $_me.parent();

    var int_my_width = $_me.width();
    var int_parent_width = $_parent.width();

    if ( int_my_width > int_parent_width ){

      rl_ratio =   int_parent_width / int_my_width;

      var int_my_fontSize = $_me.css("font-size").replace(/[^-\d\.]/g, '');

      int_my_fontSize = Math.floor(int_my_fontSize * rl_ratio);

      $_me.css("font-size", int_my_fontSize + "px");

    }
  };

})( jQuery );

It assumes a inline-element within a block-level element, it shrinks the inline element by recalculating the font-size.

HTML:

Macrobenthos of the North Sea - Miscellaneous worms

JavaScript:

if( jQuery().shrinkText ){
    $("#title a").shrinkText();
}
answered Oct 13, 2015 by sumit_jaiswalmca
0 votes

I'm not completely sure I understand your question but I think what you're asking is how to fit text in a particular container of predefined size. I'll try to answer this question.

Client side

When you want to do this on demand on the client you will have to run Javascript. The idea is to:

  1. generate an invisible div and set its style to:

    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    display: block;
    visibility: hidden;
    font-family: /* as per your original DIV */
    font-size: /* as per your original DIV */
    white-space: /* as per your original DIV */
    
  2. copy your text to it

  3. check whether DIV's width exceeded the size of your original DIV.

  4. adjust font-size value by not simply incrementing/decrementing but rather by calculating width difference between your invisible and original DIV. This will deviate to correct size much faster.

  5. go to step 3.

Server side

There is no reliable way of setting font size on the server so it will fit your client rendered container. Unfortunately you can only approximate sizes on pretested empirical data.

answered Oct 13, 2015 by nimisha.jagtap
0 votes

You have to preload the image to get the width and height of the image.

As soon as you got the dimensions you can "try" different fontsizes:

$("").appendTo(document.body).attr('src','myBackground.png').load(function(){
    var width = $(this).width(), height = $(this).height(),
        $div = $("#myDivId"),
        font = 30;

    do{
      font--;
      $div.css('font-size',font);
    }while($div.width()>width || $div.height()>height || font == 0);

    $div.width(width);
    $div.height(height);
});
answered Oct 13, 2015 by mca.agarwal
0 votes

Here is a global function with JQuery and HTML5 Data annotations to define the block size take a look:

Don't ask me why I need the table :-) , the width function works best with tables... on Jquery 1.7 .. Getting no width for Divs

Usage :

The Text is Here

Function to add:

$(function () {
    var textConsts = {
        MIN_SIZE_OF_A_TEXT: 9
    };

    $('*[data-text-max-width]').each(function () {

        var textMaxWidth = $(this).data("text-max-width");
        var textMaxHeight = $(this).data("text-max-height");
        var minSizeOfaText = $(this).data("text-min-size");

        $(this).css('font-size', '9em');

        if (minSizeOfaText == null || !($(this).hasData("text-min-size")))
            minSizeOfaText = textConsts.MIN_SIZE_OF_A_TEXT;

        if (textMaxWidth == null || !($(this).hasData("text-max-width")))
            textMaxWidth = $(this).parent().width();

        if (textMaxHeight == null || !($(this).hasData("text-max-height")))
            textMaxHeight = $(this).parent().height();

        var curentWidth = $(this).width();
        var curentFontSize = 0;
        var numberOfRounds = 0;
        var currentHeigth = $(this).height();
        curentFontSize = parseInt($(this).css('font-size'));
        var lineHeigth = parseInt($(this).css('line-height'));
        if (currentHeigth > (curentFontSize * lineHeigth)) {
            curentWidth += curentFontSize * lineHeigth;
        }

        while (curentWidth > textMaxWidth || currentHeigth > textMaxHeight) {

            curentFontSize = parseInt($(this).css('font-size'));
            curentFontSize -= 1;

            $(this).css('font-size', curentFontSize + "px");

            curentWidth = $(this).width();
            currentHeigth = $(this).height();

            if (currentHeigth > (curentFontSize * 1.5))
                curentWidth += curentFontSize * 1.5;

            numberOfRounds += 1;

            if (numberOfRounds > 1000)
                break;

            if (curentFontSize <= minSizeOfaText)
                break;
        }

        $(this).css('height', textMaxHeight + "px");
        $(this).css('width', textMaxWidth + "px");
    });

});
answered Oct 13, 2015 by balvant maurya

...