Question

I’m creating some images of text in code that need to reflect a CSS Font as closely as possible. The CSS class looks like this:

.font
{
      letter-spacing: -0.7px;
      font-family: segoe wp,segoe ui,verdana,arial,helvetica,sans-serif;
      font-size: 1.15em;
      padding: 10px;
}

My image code looks like this:

using (var helper = new Bitmap(1, 1))
using (var gHelper = Graphics.FromImage(helper))
using (var font = new Font("Segoe WP", 1.15f, GraphicsUnit.Point))
using (var brush = new SolidBrush(Color.White))
{
    var size = gHelper.MeasureString(concept, font);

    using (var image = new Bitmap((int)size.Width + _padding, (int)size.Height + _padding))
    {
        using (var g = Graphics.FromImage(image))
        {
            g.Clear(Color.Black);
            g.DrawString(concept, font, brush, (float)_padding / 2, (float)_padding / 2);
        }

        var converter = new ImageConverter();
        var b = (byte[])converter.ConvertTo(image, typeof(byte[]));

        return File(b, _contentType);
    }
}

The images that are being produced by this code are VERY small.

The letter spacing I’m guessing will require that I make a loop and draw each letter individually, but how do I work with EMs inside of C#?

Answer 1

In my opinion you can’t work with EMs, because they’re not fixed.
Read this part (extracted from http://webdesign.about.com/od/typemeasurements/qt/how-big-is-an-em.htm):

But How Big is an Em?
According to the W3C an em: “is equal to the
computed value of the ‘font-size’ property of the element on which it
is used. The exception is when ’em’ occurs in the value of the
‘font-size’ property itself, in which case it refers to the font size
of the parent element.” In other words, ems don’t have an absolute
size. They take on their size values based on where they are. For most
Web designers, this means that they are in a Web browser, so a font
that is 1em tall is exactly the same size as the default font size for
that browser.

But how tall is the default size?
There is no way to be 100% certain,
as customers can change their default font size in their browsers, but
since most people don’t you can assume that most browsers have a
default font size of 16px. So most of the time 1em = 16px.

So you can try:

using (var font = new Font("Segoe WP", 16 * 1.15f, GraphicsUnit.Point))

knowing from the very beginning that this is only an approximation!!