How to render text in .NET in the same size as browsers does given CSS for the text.

Question

I am trying to create a "save webpage as bitmap"-function on a website and i have some problems rendering the text in the correct size on the server side.

The fontsize settings for the text on the client is:

.textDiv
{
    font-family: Verdana;
    font-size:16px;
}

If i try to render this on the server with

float emSize = 16;
g.DrawString("mytext", new Font("Verdana", emSize), Brushes.Black, x, y);

The text will become about 20% larger on the server.

The documentation for new Font() says that the second argument(the font size) should be specified in em-points. What exactly is one em-point?

If i specify font-size:16em in the browser, the text becomes HUGE. If i specify font-size:1em in the browser the text will be around 14px big but if i put 1 as argument on the server the text becomes a thin line.

So, how do i convert from browser px or em to .net px/em.

Answer 1

Here's a link to an online Pixel to EM point calculator:

http://riddle.pl/emcalc/

And another here i think: http://convert-to.com/pixels-px-to-em-conversion.html

And here's a good discussion on what's up with EM and pixels:

http://www.webmasterworld.com/forum83/7781.htm

Hope that helps.

Answer 2

I am slightly confused because you are using two different units of measure in your question. I will try to explain both:

PX

This is the height in pixels. This should be as easy as setting the Font:

new Font("Verdana", 16F);

EM

This is going to be much harder to control, because this is a multiple of your line height. Such as if 1em = 14px then 16em = (14 * 16)px. This is going to be hard to replicate unless you know your line height.

Also the document says the following

The em-size, in points, of the new font.

So it is defined in PX or pixels for the constructor you are using. You could try this constructor, but EM is really a browser/CSS implementation that is dynamically adjusted according to the screen, almost like Vectors. Where the Font object is a Bitmap that works the number of pixels to draw.

http://msdn.microsoft.com/en-us/library/ms141986.aspx

Answer 3

Actually, the docs say "em-size", not "em-point" ("The em-size, in points, of the new font"). It's asking you to specify the size in points. There are 72 points per inch. You need to figure out the DPI of the user's screen and the DPI of the canvas you're drawing on and multiply the 16px size by the difference in that ratio.

e.g.

(CSS_Font_Size_Pixels * Canvas_DPI) / (User_Screen_DPI * 72) = Equivalent_Point_Size

You could save yourself a mathematical operation by using the Font constructor overload that takes a GraphicUnit and specify Pixels. This way, the appropriate size would be:

(CSS_Font_Size_Pixels  / User_Screen_DPI) * Canvas_DPI