...

View Full Version : pixel width of string



chump2877
11-10-2006, 04:10 PM
Simple question really: How do I get the pixel width of a string? Is it possible? With PHP or any other language?

Thanks.

Fumigator
11-10-2006, 06:01 PM
If font and font size are a constant, then you can apply a width to each character and parse the string to come up with a total pixel value. But as you know, browsers support dynamic font sizes, and browsers display fonts differently from other browsers, you can come pretty close with your own configuration but it won't go over well on other configs.

chump2877
11-10-2006, 07:22 PM
A major problem I'm having with that solution is that different characters in any given font type have different pixel widths...For example, a period is much narrower than the "m" character....

I have no intention of trying to define an exact width for each font's character...much too tedious, as I'm sure you realize...

I know what I'm trying to do isn;t an exact science, but I'm looking for something pretty darn close to accurate. The length of my string will conditionally serve a specific image (among a group of images) in my CMS, depending on the string's [pixel] width...

I considered doing something with the GD library for this, but that seemed like overkill...I thought there might be an easier way, and get the same or similar results....

ess
11-10-2006, 07:24 PM
try mb_strwidth (http://php.morva.net/manual/en/function.mb-strwidth.php)

good luck

ess

chump2877
11-10-2006, 07:27 PM
try mb_strwidth (http://php.morva.net/manual/en/function.mb-strwidth.php)

good luck

ess

I'm actually currently using that function...but it measures string length just like strlen or mb_strlen does, in terms of number of characters (at least, according to my tests, that seems to be the case)...I need the pixel width of a string, not the number of characters it contains...

but thanks for the reply :)

mlseim
11-10-2006, 08:45 PM
Here's my solution ...
<td>'s are the only thing I can think of that adjust automatically to width.

In my example below, it fills the <td> with text and then you can find out
what the width of the <td> really is (in pixels).

See if you can do anything with this ...


<html>
<head><title>Test DIV width in pixels</title>
<script>
function getOff()
{
x = document.getElementById('test');
return x.offsetWidth;
}
</script>
<style>
#test{
margin: 0px auto;
}
</style>
</head>
<body>
<table><tr>
<td id="test">This is the text to measure.</td>
</tr></table>
<br /><br />
<a href="javascript:alert('offsetWidth = ' + getOff())">Get Pixel Width</a>
</body>
</html>


NOTE: I didn't measure the actual pixel results. You might have to subtract two pixels if
the calculation takes into account the outer dimensions, which would be one pixel to the left
of the "T" and one pixel to the right of the "." -- it doesn't matter what font you're using either,
since it's the <td> width that is measured, not the fonts.

I also figured out that if you don't want the text to show, you can create a table within a <div>
that's pushed off your screen, or the font color is the same as the background (so you can't see
the text). You could use Javascripting to load the <td> with text, test it, and re-load with some
other text, all using the same <table>.


.

Nicklas
11-11-2006, 12:05 AM
You could do it the hard way. Use photoshop or any other grafic software and measure each and all chars of the font and size you want to use, and store the pixel-width in an array.

chump2877
11-11-2006, 04:38 AM
Here's my solution ...
<td>'s are the only thing I can think of that adjust automatically to width.

In my example below, it fills the <td> with text and then you can find out
what the width of the <td> really is (in pixels).

See if you can do anything with this ...


<html>
<head><title>Test DIV width in pixels</title>
<script>
function getOff()
{
x = document.getElementById('test');
return x.offsetWidth;
}
</script>
<style>
#test{
margin: 0px auto;
}
</style>
</head>
<body>
<table><tr>
<td id="test">This is the text to measure.</td>
</tr></table>
<br /><br />
<a href="javascript:alert('offsetWidth = ' + getOff())">Get Pixel Width</a>
</body>
</html>NOTE: I didn't measure the actual pixel results. You might have to subtract two pixels if
the calculation takes into account the outer dimensions, which would be one pixel to the left
of the "T" and one pixel to the right of the "." -- it doesn't matter what font you're using either,
since it's the <td> width that is measured, not the fonts.

I also figured out that if you don't want the text to show, you can create a table within a <div>
that's pushed off your screen, or the font color is the same as the background (so you can't see
the text). You could use Javascripting to load the <td> with text, test it, and re-load with some
other text, all using the same <table>.


.


Dude, props to you, that solution was awesome! :thumbsup:

And it works of course.

Here's the code I used....I'm displaying the browser source here, not the actual file with all the PHP inside, so you can see the javascript better:


<!-- The div with appropriate class name and accompaning background image is served here, inside the div named "serve_blurb_head" -->

<div id="side_bar_boxes">
<div class="side_bar_box2">
<div id="serve_blurb_head"></div>
<div class="side_bar_box_middle">
<div class="side_bar_content">
<p>The majority of marketing messages still reach audiences via traditional means like the print media (i.e., newspapers, magazines, etc.). Media Moguls will reinforce your company's image and bolster your advertising efforts with professional print media design. Our designs are clean and inviting, grabbing the attention of your target audience and communicating a clear message.</p>
</div>
</div>
<div class="side_bar_box_bottom"> </div>
</div>
</div>


<!-- I used the following code later in the file, in a blank section of the page, where the text blended in with the background. The <p> content of the div with class "side_bar_box_top" or "side_bar_box_top_2", and the <p> content of table cell "test_cell", is dynamic. -->

<div>
<table cellspacing="0" cellpadding="0" style="border:0;margin:0">
<tr>
<td id="test_cell">
<p class="invisible_text" style="color:#F9F9F9;margin:0">In Other News</p>
</td>
</tr>
</table>

<script type="text/javascript">

var pixelWidth = document.getElementById('test_cell').offsetWidth;

if (pixelWidth < 153)
var myClass = '<div class="side_bar_box_top"><p>In Other News</p></div>';
else
var myClass = '<div class="side_bar_box_top_2"><p>In Other News</p></div>';

document.getElementById('serve_blurb_head').innerHTML = myClass;

</script>
</div>

Great work man, this is really going to come in handy in the future. Can't thank you enough. :D

mlseim
11-11-2006, 05:50 PM
No problem, that's what this forum is for.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum