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


Tags: javascript,html,css,content-management-system,content-management

Problem :

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/



Solution :

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.


    CSS Howto..

    CSS Matrix - how to achieve percentage translation

    How to prevent long text from flowing out of a container

    How to get rid of duplicating image when applying own style to Radio/CheckButtons in GTK with CSS?

    How to create a circle with divided borders in CSS and Javascript?

    How to auto adjust (stretch) div height and width using jQuery or CSS

    How to add an image to a transparent box using css

    How to divide a menu horizontaly between buttons , using CSS?

    How would can i keep horizontal divs (3 in a row) with margins inbetween them inline with wrapper?

    How to place a scroll down button in the middle of split screen window?

    How to do page numbering in header/footer htmls with wkhtmltopdf?

    ASP.NET - how to retrieve CSS styles applied by javascript on page postback?

    How to animate top % after a delay?

    how to align vertically a dynamic-height div inside another fixed height div

    How to make CSS float left not bend around when browser width is shrunk

    How to prevent crawlers depending on XPath from getting pages contents [duplicate]

    JQuery: Creating boxed text that shows on top of a div on hover

    How to start developing Android application with HTML5, CSS, JavaScript and jquery? [closed]

    How to Make Text Stay Inside Div?

    unexpected script/css conflict, how to resolve?

    How to apply css to a dynamically created div?

    Fixing GoogleMonkeyR column width issue. How to change a script's CSS?

    How NOT to combine all CSS into one file with SASS and bootstrap

    How to avoid name collisions of css class names

    How to centre a table in html using css file? [duplicate]

    How to bounce to top with button on image with CSS

    How should I make this code to display inline

    How do i vertically align my form in bootstrap?

    How to make Text inside Div Unselectable/uncopyable? [closed]

    How to add padding space in /div container via CSS?

    How do I make this menu using only HTML and CSS