How to Determine the Length (In Pixels) of a String Being Rendered on a Web Page

How to determine the length (in pixels) of a string being rendered on a web page?

Use the PHP function imagettfbbox to get the size of the bounding box for the given string.

On the other hand you can use also javascript to manipulate SVG images in case you would like to handle it on the client side. That way it wouldn't even matter if the client had the specified font or not...

Any way to calculate the pixel length of a string?

imagettfbbox() does that:
http://www.php.net/manual/en/function.imagettfbbox.php

How to calculate the length in pixels of a string with php - from another page on my website

Thank you guys for deterring me from this dead-end.
It helped me find the solution - using either tables or flexbox in css. That gives me the dynamical style I need for the menu elements.

http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

Calculate text width with JavaScript

Create a DIV styled with the following styles. In your JavaScript, set the font size and attributes that you are trying to measure, put your string in the DIV, then read the current width and height of the DIV. It will stretch to fit the contents and the size will be within a few pixels of the string rendered size.

var fontSize = 12;var test = document.getElementById("Test");test.style.fontSize = fontSize;var height = (test.clientHeight + 1) + "px";var width = (test.clientWidth + 1) + "px"
console.log(height, width);

#Test{    position: absolute;    visibility: hidden;    height: auto;    width: auto;    white-space: nowrap; /* Thanks to Herb Caudill comment */}

<div id="Test">    abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>

How to calculate the length (in pixels) of a string in JavaScript?

Given the new information about your wanting to append an ellipsis for text overflow, I think the text-overflow CSS property is a better approach. See this article on quirksmode for more information: http://www.quirksmode.org/css/textoverflow.html

Calculate pixel width of text without knowing font in React/JavaScript

You can use measureText of canvas like below:

function getTextWidth(text, font) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  context.font = font || getComputedStyle(document.body).font;

  return context.measureText(text).width;
}

You can just pass the font if you need to change it, it's basically a CSS font declaration.

function getTextWidth(text, font) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  context.font = font || getComputedStyle(document.body).font;

  console.log(context.font);

  return context.measureText(text).width;
}

const elements = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

elements.forEach(element => {
  console.log(getTextWidth(element.innerText, getComputedStyle(element).font));
});

h1, h2, h3, h4, h5, h6 {
  font-family: serif;
}

.sans-serif {
  font-family: sans-serif;
}

<h1>Hello, World</h1>
<h2>Hello, World</h2>
<h3>Hello, World</h3>
<h4>Hello, World</h4>
<h5>Hello, World</h5>
<h6>Hello, World</h6>
<h1 class="sans-serif">Hello, World</h1>
<h2 class="sans-serif">Hello, World</h2>
<h3 class="sans-serif">Hello, World</h3>
<h4 class="sans-serif">Hello, World</h4>
<h5 class="sans-serif">Hello, World</h5>
<h6 class="sans-serif">Hello, World</h6>

How to programmatically measure string pixel width in ASP.NET?

Like Tom Gullen is saying. You can just create a bitmap and messure the string. I have this code I use to find the width/length in pixel. Just change the font and size.

// Bitmap class namespace:
using System.Drawing;

...

private float GetWidthOfString(string str)
{
    Bitmap objBitmap = default(Bitmap);
    Graphics objGraphics = default(Graphics);

    objBitmap = new Bitmap(500, 200);
    objGraphics = Graphics.FromImage(objBitmap);

    SizeF stringSize = objGraphics.MeasureString(str, new Font("Arial", 12));

    objBitmap.Dispose();
    objGraphics.Dispose();
    return stringSize.Width;
}

Just wanted to show an example.

How to get the width of a string in php?

After browsing all the functions starting with mb_ , I found this. It is exactly what I was looking for:

mb_strwidth()

It Returns the width of a string, where halfwidth characters
count as 1, and fullwidth characters count as 2.

https://www.php.net/mb_strwidth

How to find the width of a String (in pixels) in WIN32

Try using GetTextExtentPoint32. That uses the current font for the given device context to measure the width and height of the rendered string in logical units. For the default mapping mode, MM_TEXT, 1 logical unit is 1 pixel.

However, if you've changed the mapping mode for the current device context, a logical unit may not be the same as a pixel. You can read about the different mapping modes on MSDN. With the mapping mode, you can convert the dimensions returned to you by GetTextExtentPoint32 to pixels.

Calculating the dimensions of a rendered string of text (before rendering it)

Assuming you're in Java Swing, what you want is FontMetrics.

new FontMetrics(canvas.getFont()).getStringBounds(someString, canvas.getGraphics());

will return a Rectangle2D with the size of your string in it.

---

Related Topics