Search code examples
c#htmlimage-processingdrawstring

Difference between html font size and c# DrawString font

I am trying to do the following: user uses some html page where he can upload images and also add text. This is the app for apparel company. So basically we have a t-shirt background picture and we place some image and text over it. Then in the back I should generate the picture. So in the frontend I am using draggable and resizable plugins for Jquery and passing to the backend left, top and font-size information of the div that holds the text. In backend I am using DrawString function, set the same left, top and font-size. But the problem is when font size increases there is the difference in sizing. I guess the size of bounding boxes or padding or something like that.

This is a simple example of the code and I am setting font size of 200. The same font size is set in the web. But as you can see there are differences of paddings.

Graphics g = e.Graphics;
g.FillRectangle(Brushes.White, this.ClientRectangle);

String s = "Customisation 1";

Font f = new Font("Arial", 200, FontStyle.Regular, GraphicsUnit.Pixel);
Rectangle r = new Rectangle(20, 20, 2400, 400);

// 
g.DrawRectangle(Pens.Black, r);
g.DrawString(s, f, Brushes.Black, r);

Here you can see the difference between web and forms app: enter image description here enter image description here

Am I doing something wrong? How I can solve this issue?

Solution

  • This was a css line-height property that was set in bootstrap. I just set it to initial for the needed div and spans. Also you need to draw the string with next configuration:

    using (var sf = new StringFormat(StringFormat.GenericTypographic))

    StringFormat.GenericTypographic removes the starting padding. https://stackoverflow.com/a/54028440/1651298