Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,775
    Thanks
    19
    Thanked 155 Times in 146 Posts

    pixel width of string

    Simple question really: How do I get the pixel width of a string? Is it possible? With PHP or any other language?

    Thanks.
    Last edited by chump2877; 11-10-2006 at 03:22 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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.

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,775
    Thanks
    19
    Thanked 155 Times in 146 Posts
    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....
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #4
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts
    try mb_strwidth

    good luck

    ess

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,775
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Quote Originally Posted by ess View Post
    try mb_strwidth

    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
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #6
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,471
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    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 ...

    Code:
    <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>.


    .
    Last edited by mlseim; 11-10-2006 at 08:00 PM.

  • #7
    New Coder
    Join Date
    Jun 2006
    Location
    Sweden
    Posts
    49
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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.

  • #8
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,775
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Quote Originally Posted by mlseim View Post
    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 ...

    Code:
    <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!

    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:

    Code:
     <!-- 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.
    Last edited by chump2877; 11-11-2006 at 03:45 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #9
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,471
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    No problem, that's what this forum is for.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •