How do I detect the length of text in pixels in PHP?

[hedgehog90]

Firstly, check out my site: http://www.gpstudios.com/index.php

This isn't a huge problem, but I'd like to fix it anyway.

 

As you can see, there are many game boxes, featuring the game title, author, category and rating.

The title must keep to 2 lines or less, and the rest must be 1 line.

At the moment I've got it so that if the title is less than 17 characters, it creates 2 /br between the author and the category. if it is over, then it creates only 1.

What happens sometimes, is the title will equal 17 exactly, and it'll only have 1 /br, even though it isn't 2 lines long.

 

So what i want to know is, is there a more reliable way of doing this?

Can I find the length of text in pixels?

It's very frustrating having to change the title to a game slightly when this problem occurs.

 

Thanks,

 

-Tom

[mikesta707]

why not just make 2 brs if its less than or equal to?

[Mchl]

The font face and size that the user will see is ultimately dependent on their browser settings, so you can't actually calculate it using PHP.

[hedgehog90]

What... so there is no way of getting round this?...

I know that isn't the case, so could someone please help me?

[Mchl]

You could perhaps try to do it in JavaScript, but PHP simply does not know, how the text is displayed on client's side.

Client can always zoom in or zoom out view, or even override your CSS with is own styles.

 

Another option is to structure your page in a different way.

Have a fixed height div for title, and another div for author below. I am not sure about this, because my layout skills suck

[hedgehog90]

Can anyone else help me? :/

[j0n]

You can parse glyph information out of TTF files, but it is a relatively involved process.  There is a library called FPDF for generating PDF documents on the fly that has tools to do this, which you can find here.  You can just download the FPDF library and just use the font tools if you need.

 

Another way is by using the GD library.  imagefontwidth() may do some of what you require.  There is also one for the height of a font as well, unsurprisingly named imagefontheight().

[Mchl]

In both cases it will be useless. FPDF calculates the width given string will have within a PDF file. GD library calculates its width within an image.

[j0n]

If the width of the text is annoying him so bad, he could always use GD to create images for the game titles.  Using the functions outlined above, it'll always be rendered the same and always fit.

[Mchl]

Yeah. That might be a solution, but a slow one.

[j0n]

It isn't necessarily slow. 

 

Once the image has been generated for the first time, he can cache it on disk.  Generating an image of that size is going to take a fraction of a second anyway, so speed is not an issue here.

[alpine]

But it will make search engines incapable of indexing these lines.

[Mchl]

They will appear in Google Images though

[Szandor]

How a font looks is, as already stated, impossible to know serverside. Even if you create an elaborate script that calculates the length in pixels based on actual font metrics, you can never know if the user even has that particular font installed.

 

The good news is that what you want to do can easily be done through CSS! Here's how:

 

Don't use <br /> in your HTML code to align stuff. This is as bad as using the FONT tag. Presentational stuff belongs in the CSS, the structure belongs in the HTML.

 

Instead, I'd code it something like this:

<div class="game">
<img alt="A screenshot of the game 'TheGame'" src="thegame.jpg" />
<div class="identity">
	<h3 class="gametitle">TheGame</h3>
	<p class="author">by The Author</p>
</div>
<div class="classification">
	<p class="category">Puzzle</p>
	<div class="rating_4"><span>4</span></div>
</div>
</div>

 

The DIV "identity" would be placed relatively to the top of the DIV "game" and the DIV "classification" relative to the bottom. Problem solved, no matter what fonts or sizes that are used.