ansaurus

Question

[PHP, CSS, & ?] fixed width div, resizing text on the fly based on length

Answer 1

+1 A:

Maybe one solution would be to use javascript to calculate the width of the given text in some standard font size, then resize until you get a reasonable width. In Javascript you can calculate the width of the text like this:

 var title = document.getElementById("title");
 var width = title.offsetWidth;

Initailly the text is placed in a span with no styles applied apart from the font-size.

 <span id="title">The Title</span>

You can then check if the width of the text is greater than 800px and reduce the font-size until the width is less than or equal to. It is important that the title span does not have other styles applied to it initially or the results will be wrong.

You can also check if the width is too short, maybe less than 200px and increase the font-size accordingly.

Once you have satisfied yourself that the text is sized appropriately then move the text into the h1 and set the font-size.

This question describes calculating text width.

For example, I quickly wrote this using jQuery. Suppose you have your HTML like this:

<span id="mytitle" style="font-size:14pt;">
    A very long title that may be more than 800px in width. And even longer.
</span>

I used a span because it resizes to the width of the text rather than the container. And the jQuery code:

 $(document).ready(function(){        
    var w = $("#mytitle").width();
    while(w > 800){
       var currentFontSize = $('#mytitle').css('font-size');
       var currentFontSizeNum = parseFloat(currentFontSize, 10);
       var newFontSize = currentFontSizeNum*0.95;
       $('#mytitle').css('font-size', newFontSize);
       w = $("#mytitle").width();
   //alert("Width:" + w);
}
  });

That is, repeatedly reduce the font-size by 5% until the total width is less than or equal to 800px.

Vincent Ramdhanie 2010-03-12 02:50:51

thanks for the great detailed example, I should be able to get it working! :-)

Andrew Heath 2010-03-13 23:16:34

ansaurus

tags:

views:

answers:

[PHP, CSS, & ?] fixed width div, resizing text on the fly based on length

related questions