fixed width div, resizing text on the fly based on length

Question

Let's say you've got a simple fixed-width layout that pulls a title from a MySQL database.

CSS:

 #wrapper {
    width: 800px;
 }

 h1 {
    width: 100%;
 }

HTML:

 <html>
  <body>
   <div id="wrapper">
    <h1> $titleString </h1>
   </div>
  </body>
 </html>

But the catch is, the length of the title string pulled from your MySQL database varies wildly. Sometimes it might be 10 characters, sometimes it might be 80. It's possible to establish a min & max character count.

How, if at all possible, do I get the text-size of my <h1>$titleString</h1> to enlarge/decrease on-the-fly such that the string is only ever on one line and best fit to that line length? I've seen a lot of questions about resizing the div - but in my case the div must always be 100% (800px) and I want to best-fit the title.

Obviously a maximum text-size value would have to be set so 5 character strings don't become gargantuan.

Does anyone have a suggestion? I'm only using PHP/MySQL/CSS on this page at the moment, but incorporation of another language is fine if it means I can solve the problem.

The only thing I can think of is a bruteforce approach whereby through trial and error I establish acceptable string character count ranges matched with CSS em sizes, but that'd be a pretty ugly implementation from the code side.

I can't offer you a good answer -except perhaps in psuedo code- but I'll note two things: 1, you can't/shouldn't do this server-side, you should use JavaScript/client-side; and 2: are you sure that this idea is a good design-ethos? Branding typically relies on consistency, which this idea seems to disregard in its entirety. — David Thomas, Mar 12 '10 at 01:43
@ricebowl 1) agreed, but I'll need help as I don't know any flavors of Java || 2) a good point, but not applicable. I'm working with article titles and want to subtly resize the text to avoid the dreaded *one word left hanging on a second line* which looks awful. If there's no good solution, I'll just have to suck it up and find what size works with the longest string and use only that. — Drew, Mar 12 '10 at 01:48
I agree with ricebowl on the consistency thing yet have had instinces in my own projects where I've wanted something like this to be manifest. No matter how I sliced it, when I thought it was done, it never was. Max limits were a good idea until the 16 character string of upper-case "W"s came to be or names like MOOMWOOD02 or IllI1 were used. I guess you've thrown out the idea of designing for a possible wrap, so I'm not going to go there. I am interested to see where this question will go. — rob - not a robber, Mar 12 '10 at 01:51
I did work for a few years on a very large entertainment site where we'd run into this all the time with band names. When the hard-width containter broke lines in an ugly way, the art team and the very tenured editor always agreed on the good old fashioned BR insert ;) — rob - not a robber, Mar 12 '10 at 01:55

score 2 · Answer 1 · answered Feb 08 '12 at 17:27

I've had some luck using a pretty simple approach in php. Takes some playing with the numbers to match your application: I had a space for the title that could fit about 30 characters at font-size: 1.65em, so I made longer titles proportionately a smaller font-size like so:

$title = $row->title;
$title_length = strlen($title);
if ($title_length > 30)
    $title_size = 1.65 * (30 / $title_length);
else $title_size = 1.65;

print('<span style="font-size: '.$title_size.'em;display: inline;">'. $title.'</span>');

score 1 · Accepted Answer · edited May 23 '17 at 10:33

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.

thanks for the great detailed example, I should be able to get it working! :-) — Drew, Mar 13 '10 at 23:16

fixed width div, resizing text on the fly based on length

2 Answers2