| Using imagettfbbox with Arial Bold [message #173252] |
Thu, 31 March 2011 04:26  |
jwcarlton
Messages: 76
Registered: December 2010
Karma: 0
|
Member |
|
|
I'm using imagettfbbox() to find the width of a variable-driven text
object. Like this:
$variable = "Business";
$fontsize = "9";
$fontface = "arialbd.ttf";
function get_bbox($text) { return imagettfbbox($fontsize, 0,
$fontface, $text); }
function t_width($text) {
$box = get_bbox($text);
$width = $box[4] - $box[6];
return $width;
}
$text_width = t_width($variable);
If I use arial.ttf, this works perfect. But I'm trying to find the
width of Arial Bold, which I assume is arialbd.ttf. When I change
$fontface to "arialbd.tff", the width comes out shorter than it should
be (my test phrases are coming out with a width anywhere from 0 to 7px
shorter than they really are).
For example, <font face="Arial"><b>Business</b></font> actually
measures 52px, but the above is returning 49px.
This is on a Linux machine, with GD2 installed.
Any suggestions on why this font is calculating incorrectly? Is there
a different/better way to measure bold text?
TIA,
Jason
|
|
|
|
| Re: Using imagettfbbox with Arial Bold [message #173253 is a reply to message #173252] |
Thu, 31 March 2011 07:16  |
alvaro.NOSPAMTHANX
Messages: 277
Registered: September 2010
Karma: 0
|
Senior Member |
|
|
El 31/03/2011 6:26, jwcarlton escribió/wrote:
> I'm using imagettfbbox() to find the width of a variable-driven text
> object. Like this:
>
> $variable = "Business";
> $fontsize = "9";
> $fontface = "arialbd.ttf";
>
> function get_bbox($text) { return imagettfbbox($fontsize, 0,
> $fontface, $text); }
If this is your real code, it should be throwing a couple of notices:
the $fontsize and $fontface variables are not defined inside the function.
>
> function t_width($text) {
> $box = get_bbox($text);
> $width = $box[4] - $box[6];
>
> return $width;
> }
>
> $text_width = t_width($variable);
>
> If I use arial.ttf, this works perfect. But I'm trying to find the
> width of Arial Bold, which I assume is arialbd.ttf. When I change
> $fontface to "arialbd.tff", the width comes out shorter than it should
> be (my test phrases are coming out with a width anywhere from 0 to 7px
> shorter than they really are).
>
> For example,<font face="Arial"><b>Business</b></font> actually
> measures 52px, but the above is returning 49px.
Are you using a <font> tag as reference?
The way TTF fonts get rendered is not unique and universal. It depends
on the renderer and its settings. What GD2 can tell you (and should be
telling you) is the size of the font as rendered by GD2 in that
computer. If you want to establish a correct comparison you need to
actually draw the font from PHP and grab a screenshot.
--
-- http://alvaro.es - Álvaro G. Vicario - Burgos, Spain
-- Mi sitio sobre programación web: http://borrame.com
-- Mi web de humor satinado: http://www.demogracia.com
--
|
|
|
|
| Re: Using imagettfbbox with Arial Bold [message #173254 is a reply to message #173253] |
Thu, 31 March 2011 07:47 |
jwcarlton
Messages: 76
Registered: December 2010
Karma: 0
|
Member |
|
|
> If this is your real code, it should be throwing a couple of notices:
> the $fontsize and $fontface variables are not defined inside the function.
No, I was just trying to simplify everything for the sake of the post.
> Are you using a <font> tag as reference?
Technically, it's being set via CSS in a <div>. When it renders on the
screen, it's actually more like:
<div style="font-family: Arial, Tahoma, Helvetica; font-size: 9pt">
$variable
</div>
* Not a copy & paste, so please ignore any typos
> The way TTF fonts get rendered is not unique and universal. It depends
> on the renderer and its settings. What GD2 can tell you (and should be
> telling you) is the size of the font as rendered by GD2 in that
> computer. If you want to establish a correct comparison you need to
> actually draw the font from PHP and grab a screenshot.
I'm not sure that I follow. This is my first attempt with
imagettfbbox() (and I've only barely used GD, mostly with Perl), so I
could be wrong, but I thought that this was what the above script did?
Is there a reason that it would be correct with arial.ttf, but not
arialbd.tff?
|
|
|
|
| Re: Using imagettfbbox with Arial Bold [message #173255 is a reply to message #173254] |
Thu, 31 March 2011 11:26 |
alvaro.NOSPAMTHANX
Messages: 277
Registered: September 2010
Karma: 0
|
Senior Member |
|
|
El 31/03/2011 9:47, jwcarlton escribió/wrote:
> Technically, it's being set via CSS in a<div>. When it renders on the
> screen, it's actually more like:
>
> <div style="font-family: Arial, Tahoma, Helvetica; font-size: 9pt">
> $variable
> </div>
>
> * Not a copy& paste, so please ignore any typos
>
>
>> The way TTF fonts get rendered is not unique and universal. It depends
>> on the renderer and its settings. What GD2 can tell you (and should be
>> telling you) is the size of the font as rendered by GD2 in that
>> computer. If you want to establish a correct comparison you need to
>> actually draw the font from PHP and grab a screenshot.
>
> I'm not sure that I follow. This is my first attempt with
> imagettfbbox() (and I've only barely used GD, mostly with Perl), so I
> could be wrong, but I thought that this was what the above script did?
>
> Is there a reason that it would be correct with arial.ttf, but not
> arialbd.tff?
I'll try to explain myself better. A font file is basically a collection
of mathematical primitives: a line here, a circle there, that stuff.
If you want to display a letter on a printed document you need a program
that takes those primitives and converts them into instructions for the
printer on how to drop ink on the sheet. If you want to display a letter
on a computer screen you need a program that converts the primitives
into coloured pixels. And there are many possible ways to do that
because random geometrical shapes do not normally map uniquely to pixel
grids. Even in your own PC you'll see that fonts look completely
different if you disable anti-aliasing, or if you optimise it for LCD
panels or CRT monitors.
Your CSS rules are rendered by the browser in the local PC and the
browser can choose to handle the task to the operating system font
libraries or use its own library. GD2 uses whatever version of the
FreeType library is installed on the server.
Why can't you compare GD2 with CSS? Because they use different programs
to render the font, programs that do not even run on the same computer.
Furthermore, you have certain amount control about the server (until you
host upgrades PHP) but zero control about the browser.
--
-- http://alvaro.es - Álvaro G. Vicario - Burgos, Spain
-- Mi sitio sobre programación web: http://borrame.com
-- Mi web de humor satinado: http://www.demogracia.com
--
|
|
|
|
| Re: Using imagettfbbox with Arial Bold [message #173256 is a reply to message #173255] |
Thu, 31 March 2011 13:27 |
The Natural Philosoph
Messages: 993
Registered: September 2010
Karma: 0
|
Senior Member |
|
|
Álvaro G. Vicario wrote:
> El 31/03/2011 9:47, jwcarlton escribió/wrote:
>> Technically, it's being set via CSS in a<div>. When it renders on the
>> screen, it's actually more like:
>>
>> <div style="font-family: Arial, Tahoma, Helvetica; font-size: 9pt">
>> $variable
>> </div>
>>
>> * Not a copy& paste, so please ignore any typos
>>
>>
>>> The way TTF fonts get rendered is not unique and universal. It depends
>>> on the renderer and its settings. What GD2 can tell you (and should be
>>> telling you) is the size of the font as rendered by GD2 in that
>>> computer. If you want to establish a correct comparison you need to
>>> actually draw the font from PHP and grab a screenshot.
>>
>> I'm not sure that I follow. This is my first attempt with
>> imagettfbbox() (and I've only barely used GD, mostly with Perl), so I
>> could be wrong, but I thought that this was what the above script did?
>>
>> Is there a reason that it would be correct with arial.ttf, but not
>> arialbd.tff?
>
> I'll try to explain myself better. A font file is basically a collection
> of mathematical primitives: a line here, a circle there, that stuff.
>
> If you want to display a letter on a printed document you need a program
> that takes those primitives and converts them into instructions for the
> printer on how to drop ink on the sheet. If you want to display a letter
> on a computer screen you need a program that converts the primitives
> into coloured pixels. And there are many possible ways to do that
> because random geometrical shapes do not normally map uniquely to pixel
> grids. Even in your own PC you'll see that fonts look completely
> different if you disable anti-aliasing, or if you optimise it for LCD
> panels or CRT monitors.
>
> Your CSS rules are rendered by the browser in the local PC and the
> browser can choose to handle the task to the operating system font
> libraries or use its own library. GD2 uses whatever version of the
> FreeType library is installed on the server.
>
> Why can't you compare GD2 with CSS? Because they use different programs
> to render the font, programs that do not even run on the same computer.
> Furthermore, you have certain amount control about the server (until you
> host upgrades PHP) but zero control about the browser.
>
>
Exactly.
HOWEVER if its the same library (gd) that's dong the rendering as is
doing the text measurement, it ought to get things right.
|
|
|
|
| Re: Using imagettfbbox with Arial Bold [message #173273 is a reply to message #173255] |
Fri, 01 April 2011 03:49 |
jwcarlton
Messages: 76
Registered: December 2010
Karma: 0
|
Member |
|
|
> I'll try to explain myself better. A font file is basically a collection
> of mathematical primitives: a line here, a circle there, that stuff.
>
> If you want to display a letter on a printed document you need a program
> that takes those primitives and converts them into instructions for the
> printer on how to drop ink on the sheet. If you want to display a letter
> on a computer screen you need a program that converts the primitives
> into coloured pixels. And there are many possible ways to do that
> because random geometrical shapes do not normally map uniquely to pixel
> grids. Even in your own PC you'll see that fonts look completely
> different if you disable anti-aliasing, or if you optimise it for LCD
> panels or CRT monitors.
>
> Your CSS rules are rendered by the browser in the local PC and the
> browser can choose to handle the task to the operating system font
> libraries or use its own library. GD2 uses whatever version of the
> FreeType library is installed on the server.
>
> Why can't you compare GD2 with CSS? Because they use different programs
> to render the font, programs that do not even run on the same computer.
> Furthermore, you have certain amount control about the server (until you
> host upgrades PHP) but zero control about the browser.
OK, that makes sense. What I don't get, though, is why it's not
measuring correctly based on the way I've coded it? Like Natural said
(below), isn't it the same library rendering it for the screen as is
doing the measurement?
If it were an issue of the browser or monitor being off, then wouldn't
it be off for both Arial AND Arial Bold?
|
|
|
|
| Re: Using imagettfbbox with Arial Bold [message #173277 is a reply to message #173273] |
Fri, 01 April 2011 07:26 |
alvaro.NOSPAMTHANX
Messages: 277
Registered: September 2010
Karma: 0
|
Senior Member |
|
|
El 01/04/2011 5:49, jwcarlton escribió/wrote:
>> Why can't you compare GD2 with CSS? Because they use different programs
>> to render the font, programs that do not even run on the same computer.
>> Furthermore, you have certain amount control about the server (until you
>> host upgrades PHP) but zero control about the browser.
>
> OK, that makes sense. What I don't get, though, is why it's not
> measuring correctly based on the way I've coded it? Like Natural said
> (below), isn't it the same library rendering it for the screen as is
> doing the measurement?
You never said that you are comparing the output of imagettfbbox() with
a real picture of the font (PNG or something) generated with GD.
Actually, you suggested you are comparing it with the font as rendered
by the browser.
:-?
--
-- http://alvaro.es - Álvaro G. Vicario - Burgos, Spain
-- Mi sitio sobre programación web: http://borrame.com
-- Mi web de humor satinado: http://www.demogracia.com
--
|
|
|
|
| Re: Using imagettfbbox with Arial Bold [message #173364 is a reply to message #173277] |
Tue, 05 April 2011 03:27 |
jwcarlton
Messages: 76
Registered: December 2010
Karma: 0
|
Member |
|
|
>> OK, that makes sense. What I don't get, though, is why it's not
>> measuring correctly based on the way I've coded it? Like Natural said
>> (below), isn't it the same library rendering it for the screen as is
>> doing the measurement?
>
> You never said that you are comparing the output of imagettfbbox() with
> a real picture of the font (PNG or something) generated with GD.
> Actually, you suggested you are comparing it with the font as rendered
> by the browser.
>
> :-?
You're right, I'm just an idiot :-) I am comparing text rendered by
the browser to text rendered by GD. I just got confused.
I did fix the problem, though, based on your earlier comment.
What I was doing was creating a variable-driven navigation bar, then a
variable-driven submenu beneath each title. For this purpose, I was
using text, then padding left and right by 15px to make it centered.
Then, using imagettfbbox(), I was measuring the width, then adding 30
to it to make the submenu the same width as the parent title.
The CSS padding is where the problem came in. To fix this problem, I
measured the width first, then added 30px to it to set the width of
the title, then centering the text; essentially removing the padding
altogether.
So basically, I made the width of the title the same as the width of
the submenu, instead of trying to make the submenu the same width as
the title.
Too much info, I know. But in the end, it's fixed, so I thank you very
much for your help :-)
|
|
|
|
Calendar
Search
Help
Members
Register
Login
Home
]