"Best fit" font size - how do I measure a sentence width?

Question

I'm coming up against a common problem with customised content management system design.

I run a small web design company and I often have to make a certain area of a website editable for the customer. For example, there may be a bar along the top of the page advertising the latest news or deals which the customer wants to be able to edit themselves.

The problem I'm having is that they often write too much and the text overflows. Maybe I'm being a bit too defensive, but in these situations I usually privately blame the customer - surely they check after updating the text, realise it doesn't fit, and modify it so that it does?

Anyway, I guess it's my responsibility to make the site look nice so I've been trying to find a way of making text fit in a fixed size box. One way is to give the box (usually a div) this css property:

overflow: auto;

but sometimes this isn't suitable, such as in the example described above where the bar is only one line high.

My question (yes I've finally got to it) is how can I make the font change size automatically so that it fits in the box?

In some applications (Powerpoint being one example), you can choose a "best fit" option for font size and the application chooses a size which allows the text to fit exactly. I'm basically looking for either a CSS, JavaScript or PHP version of this.

Thanks in advance!

EDIT: Here's the solution - http://jsfiddle.net/Cnkfn/1/

Answer 1

I feel your pain! We also have clients who give us abstracts which are too long for the allotted area; for some clients, it apparently doesn't even cross their mind that their text might be too long. :-)

What I'd do in your case is something like what stackoverflow does: show a box below the input area that shows their text updating onkeyup. With a fixed-height box, it'll be immediately obvious to them when their text is too long. In lieu of that, you could try something like the following:

<style>
#outer {
  width:100px;
  height:40px;
  overflow-x:hidden;
  overflow-y:auto; /* To make it obvious the text is too long. */
  border:1px solid red;
}
#inner {
  width:100px;
}
</style>

<div id="outer">
  <div id="inner" style="font-size:16px">
    Lorem ipsum dolor sit amet, dui orci interdum sagittis,
    proin metus dui, justo in suspendisse dolor.
  </div>
</div>
<button onclick="checkFontSize()">Check font size</button>

<script>
function checkFontSize() {
  var o = document.getElementById('outer');
  var i = document.getElementById('inner');
  var fs = parseInt(i.style.fontSize);
  while(i.offsetHeight > o.offsetHeight) {
    fs--;
    i.style.fontSize = fs + 'px';
  }
}
</script>

It checks to see if the inner div's height is greater than the outer div's; it works on the assumption that the inner div has no padding (you can tweak as necessary). It decreases the inner div's font-size by 1px till the inner div's height is no longer greater than the outer div's.

You could have code like this on the page that displays the client's text in which case you could just wrap it in an anonymous function that executes ondomready. I trust you can modify this to suit your implementation.