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 font

Answer 1

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

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