I have run into this problem a few times. I have no problem limiting characters in a string to a specific number. However, some characters are longer than others so it wraps to another line or makes my DIV element wider and not uniform with the rest of my website.
For instance:
Literacy - Is it the Sa
Machu Picchu, Cuzco, Pe
are the exactly the same amount of characters (23) including spaces but the Machu Pichu one is longer in terms of the actual width on screen.
Is there any way to have a uniform size for a string that is based on the width of the actual string as opposed to the number of characters? Someone has had to have come up with a solution to this before right?
You'd probably have to play with GD and imagefontwidth(): http://ar2.php.net/manual/es/function.imagefontwidth.php
Without writing an algorithm in PHP to limit characters based on "font-widths" for the specific font you are using, you can use a monospace font.
Alternatively, I'm sure a JavaScript solution could be written as well to test the widths, but I'm not sure how off of the top of my head.
This can't be done in PHP -- the best you can do is approximate. Different browsers and different operating systems render font widths differently for the same font. So even if you manually stored an array of character font widths for the font on your browser and os, it might not match up with others.
It's usually better to work your design around the possibility of different-width fonts than to try to force it.
That being said, this can be done perfectly (without approximation) in javascript, albeit with a little bit of a hack. There are a number of possible methods, but here's one: Start by rendering the full string in a div that has width that you are looking for, then measure the div's height. If it is larger than one line could possibly be, then start a loop progressively removing the last word. Keep going until the height of the div is for one line.
Use CSS for formatting so they all have uniform widths - no jagged edges on the right side. Something like this:
p { text-align: justify; }
Had some fun workin on this CSS + JS solution. It wasn't tested intensively (Firefox + IE7/8) but it should work ok...
<script type="text/javascript" src="jquery.js"></script>
<style>
.monospaced, .not-monospaced{
font: normal normal 16px/16px Verdana; /* not monospaced font */
clear: both;
}
.monospaced span{
float: left;
display: block;
width: 16px;
text-align: center;
}
</style>
<script>
$(document).ready(function(){
$('.monospaced').each(function(){
var monospace = $(this).html(); // .trim() does not work at IE http://api.jquery.com/jQuery.trim/ (view comments)
monospace.replace(/(^[\s\xA0]+|[\s\xA0]+$)/g, '');
mono = monospace.split('');
for(i = 0; i < mono.length; i++){
if(mono[i] == ' ')
mono[i] = ' ';
mono[i] = '<span>'+mono[i]+'</span>';
}
$(this).html(mono.join(''));
});
});
</script>
</head>
<body>
<div class="not-monospaced">
This is supposed to be monospaced...
</div>
<div class="not-monospaced">
mmmm mm mmmmmmmm mm mm mmmmmmmmmm...
</div>
<div class="monospaced">
This is supposed to be monospaced...
</div>
<div class="monospaced">
mmmm mm mmmmmmmm mm mm mmmmmmmmmm...
</div>
</body>
