Programmatically determine Font-Size for single-line display...

Question

I'm displaying articles on a page. The article titles sometimes spill over onto two lines, and may even have only a single word on the second line. This is very undesirable. Using jQuery/CSS, what would be the best method to programmatically determine a new font-size for the titles to keep them on one line?

Answer 1

I am just guessing here - Can we do it by using JS to know the height of the container of the text and then decrease the font size if necessary? I guess this will introduce page contents resizing because of the change.

Answer 2

You could just count how many characters are in the title and work out a font size based on that. More characters = smaller font-size.

I would place caps on how big and how small the font size would be allowed to go, to prevent silly results though.

Answer 3

A simply solution would be to put an element right at the end of the line, and decrease the text size until its offsetHeight was correct. For example, wrap the full-stop in:

<span id="check">.</span>

You can now check where your full stop is, and reduce the text size until it's nearer to where you hoped. If you set the line-height on this particular phrase to be very large, it would make it easier to determine.

Answer 4

Counting characters is a solution, but you would have to take characters' width into account. 'W' is wider than 'i', unless you're using fixed-width fonts.

Moreover, you cannot guarantee that font of your choice will be available in client's browser, that his font-size settings will be same ar yours, etc.

You can, however, combine two solutions - first, approximate font-size using some character-counting algorigthm, for example - assume that characters have fixed width, and then correct your calculations with client-side js, if js determines that line has been split anyway.

It'll require some tuning, but I believe acceptable results can be achieved.

Answer 5

This is duplicate of another question:

http://stackoverflow.com/questions/875183/how-to-measure-characters-in-javascript-and-or-with-jquery/875200#875200

Answer 6

I assume you have a default text size, so set it to that, and check the offsetHeight of the element. If it is obviously two lines, shrink the font size until the offsetHeight dramatically reduces by roughly 50%

An example using jQuery...

var defaultSize = 36; // if title is taller than this, it will be shrinked

$(".articleTitle").each(function() {
  var h = $(this).height();
  var i = defaultSize;
  while(h > defaultSize) {
    i--;
    this.style.fontSize = i + 'px';
    h = $(this).height();
  }
});

Answer 7

Kind of a hack but: Something like this will get you close. It likely needs a little more tweeking. Basically, it clones the element and sets the clone's text to &nbsp, so it gets an idea of what the height of one line would be. Then it decreases the element's font size until it's smaller than the target height.

Keep in mind you would also need to attach this function to the parent's resize().

$(document).ready(function() {
    $(".shrink").each(function() {
        var targetHeight = $(this).clone().html(" ").insertAfter($(this));

        while ($(this).height() > targetHeight.height()) {
            $(this).css("font-size", parseInt($(this).css("font-size")) - 1);
        }

        targetHeight.remove();
    });
});