is pointsize equal to css px ?

[ravikum]

Hi,
suppose I have a css text font-size with 30px font-family verdana.
what pointsize should I use in IM to write that text with verdana font-family?

(I am using the latest version of IM.)

Thanks.

[fmw42]

See
http://kyleschaeffer.com/development/cs ... -vs-pt-vs/
http://graphicdesign.stackexchange.com/ ... difference

Accordingly, the correspondence is unique, but depends upon density (resolution). At density of 72 pixelsperinch, 1 pt = 1 px. So if I have not made an error, then X pts = Density (in units pixelsperinch) / 72.

You can also get glyph size information using IM. See http://www.imagemagick.org/Usage/text/#font_info

[ravikum]

Thanks.
I will use css pt instead of px to display preview and use pointsize in imagemagick to generate the image.
Hope this works.

[ravikum]

Thanks.
I am now using css pt to display preview and using pointsize in imagemagick to generate the image.
However, imagemagick generated text is still smaller.

14pt verdana
css image

Code: Select all

/usr/local/bin/convert -background none -fill '#ffffff' -stroke '#000000' -font Verdana -pointsize 14 -size 250x -gravity Center caption:'I really love you bby tell me' output_image_file

pointsize 14 verdana
generated by imagemagick


am I doing anything wrong?

can you please suggest.
Thanks.

[fmw42]

convert -background none -fill '#ffffff' -stroke '#000000' -font Verdana -pointsize 14 -size 250x -gravity Center caption:'I really love you bby tell me' output_image_file

Code seems correct, though does not show how you overlaid it on your background image. Be sure you have no other CSS arguments that might be expanding the size of your fonts. Your CSS font size is too big for 14pt. Are you sure you are using pts? Try using a text editor and specifying 14 pt Verdana and see how that compares to your images.

Perhaps post your CSS code. Also be sure you have the very same Verdana font family. There may be font substituting going on, if you do not have the correct font size.

[ravikum]

Thanks for your reply.

This is my css code.

Code: Select all

<style>
div {font-size:14pt;font-family:verdana;width:250px}
</style>
<div>I really love you bby tell me</div>

if you save this code as test.html and view it in browser, you can find it.

The last word "me" is being displayed in the second line in css but not in IM

Thanks.

[fmw42]

I am not sure you can trust the browser for display. The browser may be in a zoomed mode. It may substitute fonts rather than what you specified. In older days, it used to show fonts at 96 dpi rather than 72 dpi.

Can you specify dpi in your CSS code?

Check your browser preferences and view panel?

In your IM code, you specified -size and pointsize. IM label: will use -size to change the fontsize to fit the width. So try leaving -size off.

When I type, "This is a test" into my text editor and compare it to

Code: Select all

convert -background white -fill black -font Verdana -pointsize 14 label:"This is a test" show:

But when I display this in my browser

Code: Select all

<style>
div {font-size:14pt;font-family:verdana;width:250px}
</style>
<div>This is a test</div>

It comes out larger by about 96/72. So the browser is using a default 96 dpi. But right now I do not see where in my preference for any of the various browsers where I can control that (as I used to be able to do many years ago).

Did you type your text into a text editor as I had suggested and compared that to what you see in your browser. I am sure you will see that it is smaller than your CSS code in your browser and will likely match IM if you leave off -size or use -annotate.

[fmw42]

see https://developer.mozilla.org/en-US/doc ... resolution