"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/

Tapia

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.

Laicize

This sounds really good, thanks. I'm trying to get it working using jsFiddle but the button doesn't do anything, can you offer any help? jsfiddle.net/Cnkfn – Tapia

Ah don't worry, it's fixed now, I made the function global to get around jsFiddle idiosyncrasies. This solution is perfect, thank you very much! jsfiddle.net/Cnkfn/1 – Tapia

Answer 2

Haven't tried this in HTML, but you might loop and check the scrollHeight property and see if it's bigger than you expect, and if so set the font one point smaller, and repeat until scrollHeight is what you expect.

https://developer.mozilla.org/en/DOM/element.scrollHeight

Winstonwinstonn

Yes, I see your point, but wouldn't this process physically change the size of the font before the user's eyes when they load the page? That's not really ideal... – Tapia

You could hide the block and do it hidden, but some browsers don't provide this info for hidden blocks, so a workaround I've seen is to push it to left: -10000px (way offscreen) and do it there. Clunky. – Winstonwinstonn

Using visibility would be better in his case. – Evangelina