Centering an individual character with DrawString

Question

I have tried all of the suggested ways to center text, but I can't seem to get the results I want while centering an individual character.

I have a rectangle. In that rectangle I'm drawing a circle with DrawEllipse. Now I want to draw a single character inside the circle using the same rectangle and DrawString, to have it perfectly centered.

Here is my basic code:

StringFormat stringFormat = new StringFormat();
stringFormat.Alignment = StringAlignment.Center;
stringFormat.LineAlignment = StringAlignment.Center;

using (Graphics g = Graphics.FromImage(xImage))
{
    g.SmoothingMode = SmoothingMode.AntiAlias;
    g.TextRenderingHint = TextRenderingHint.AntiAlias;
    g.CompositingQuality = CompositingQuality.HighQuality;
    g.InterpolationMode = InterpolationMode.HighQualityBicubic;
    g.PixelOffsetMode = PixelOffsetMode.HighQuality;

    g.FillEllipse(fillBrush, imageRect.X, imageRect.Y, imageRect.Width - 1, imageRect.Height - 1);

    g.DrawString(Text, font, Brushes.White, imageRect, stringFormat);
}

The text is centered horizontally... but it's not properly centered veritcally. Using a symmetrical character like an uppercase "I", I find that the top of the character is always much nearer to the edge of the rectangle than the bottom of the character. The distance is probably at least a 50% increase.

I assume that it is measuring enough space for characters like a lowercase "j" which hangs lower. However, since I am trying to create a graphical icon with a single letter, I want more precise centering.

Answer 1

Use GraphicsPath to accomplish the size calculation.

public static void DrawCenteredText(Graphics canvas, Font font, float size, Rectangle bounds, string text)
{
    var path = new GraphicsPath();
    path.AddString(text, font.FontFamily, (int)font.Style, size, new Point(0, 0), StringFormat.GenericTypographic);

    // Determine physical size of the character when rendered
    var area = Rectangle.Round(path.GetBounds());

    // Slide it to be centered in the specified bounds
    var offset = new Point(bounds.Left + (bounds.Width / 2 - area.Width / 2) - area.Left, bounds.Top + (bounds.Height / 2 - area.Height / 2) - area.Top);
    var translate = new Matrix();
    translate.Translate(offset.X, offset.Y);
    path.Transform(translate);

    // Now render it however desired
    canvas.SmoothingMode = SmoothingMode.AntiAlias;
    canvas.FillPath(SystemBrushes.ControlText, path);
}

Answer 2

if you use

StringFormat stringFormat = new StringFormat(StringFormat.GenericTypographic);

you got

instead

hope this helps

Answer 3

Though John Arlen's answer is perfect, I'd like to post my answer:

    private void Form1_Paint(object sender, PaintEventArgs e)
    {
         // Set up string.
        string measureString = "HelloWorld";
        Font stringFont = new Font("Arial", 100, FontStyle.Regular, GraphicsUnit.Pixel);

        // Measure string.
        SizeF stringSize = new SizeF();
        stringSize = e.Graphics.MeasureString(measureString, stringFont);

        // Draw rectangle representing size of string.
        e.Graphics.DrawRectangle(new Pen(Color.Red, 1), 10.0F, 10.0F, stringSize.Width, stringSize.Height);

        // Draw string to screen.
        e.Graphics.DrawString(measureString, stringFont, Brushes.Black, new PointF(10, 10f + stringSize.Height / 12.0f));
    }

code result like that:

"HelloWorld" is centered vertically in the red box.

For the height of descender line is approximately equal 1/6 of stringSize.Height calculated by MeasureString

---

| top padding 1/6

| word body 3/6

| word descender 1/6

| bottom padding 1/6