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?
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.