[PHP, CSS, & ?] fixed width div, resizing text on the fly based on length
- by Andrew Heath
Let's say you've got a simple fixed-width layout that pulls a title from a MySQL database.
CSS:
#wrapper {
width: 800px;
}
h1 {
width: 100%;
}
HTML:
<html>
<body>
<div id="wrapper">
<h1> $titleString </h1>
</div>
</body>
</html>
But the catch is, the length of the title string pulled from your MySQL database varies wildly. Sometimes it might be 10 characters, sometimes it might be 80. It's possible to establish a min & max character count.
How, if at all possible, do I get the text-size of my <h1>$titleString</h1> to enlarge/decrease on-the-fly such that the string is only ever on one line and best fit to that line length? I've seen a lot of questions about resizing the div - but in my case the div must always be 100% (800px) and I want to best-fit the title.
Obviously a maximum text-size value would have to be set so 5 character strings don't become gargantuan.
Does anyone have a suggestion? I'm only using PHP/MySQL/CSS on this page at the moment, but incorporation of another language is fine if it means I can solve the problem.
The only thing I can think of is a bruteforce approach whereby through trial and error I establish acceptable string character count ranges matched with CSS em sizes, but that'd be a pretty ugly implementation from the code side.
