Develop Reference

How to compute the correct width of a digit in pixels?

I have a custom control that may have user customizable Font in future (the zoom is already implemented). I must fill a rectangle under two digits that form a base-10 number. I have different colors for zero, one or both of the digits.
With the font {Name = Microsoft Sans Serif Size=16} and the following Graphics.MeasureString method calls:
g.MeasureString("00", Font);
g.MeasureString("0", Font);
I get:
The size of "00" is {Width = 31.5486088 Height = 26.8124962}
The size of "0" is {Width = 19.3298588 Height = 26.8124962}
The width of "0" is a lot bigger that half of the width of "00".
I know of the methods Graphics.MeasureString, it has many overloads, and I also know of the StringFormat class. How can I correctly compute the width of the '0' char?
Because the font will be user-customizable, I do not want to solve the problem using a monospace font.
If I use the following calls:
g.MeasureString("00", Font, 999, StringFormat.GenericTypographic);
g.MeasureString("0", Font, 999, StringFormat.GenericTypographic);
The width of "0" seems to be half of the width of "00", but the digits overlap when drawn with a smaller font size:
Update: In the OnPaint method of an UserControl I have this code:
Graphics g = e.Graphics;
int[] indices = { 0, 1 };
CharacterRange[] charRanges = new CharacterRange[indices.Length];
for (int chx = 0; chx < indices.Length; ++chx)
{
charRanges[chx] = new CharacterRange(indices[chx], 1);
}
StringFormat sf = new StringFormat(StringFormat.GenericDefault);
sf.SetMeasurableCharacterRanges(charRanges);
Region[] regions = e.Graphics.MeasureCharacterRanges("01", Font, e.ClipRectangle, sf);
RectangleF[] r = new RectangleF[regions.Length];
int i = 0;
foreach (Region rr in regions)
{
r[i] = rr.GetBounds(g);
g.DrawRectangle(Pens.Blue, r[i].X, r[i].Y, r[i].Width, r[i].Height);
++i;
}
g.DrawString("0", Font, Brushes.Black, r[0], sf);
g.DrawString("1", Font, Brushes.Black, r[1], sf);
The font is {Name = "Microsoft Sans Serif" Size=25}. When running the program, this is what is visible:
I want to make the digits centered in the blue rectangles. The rectangles must be as big as possible in the UserControl but also leaving space for a percent of the Height of the UserControl. The Font should adapt to the rectangles.

Small adjustments are required to make this work as intended:
TextRenderingHint.ClearTypeGridFit gives a better result when rendering the Text.
It's more precise and works well with the grid-fitting nature of Graphics.DrawString.
See the notes you can find in the answer linked below for more informations on this matter.
StringFormat alignment in both horizontal and vertical dimensions.
A modified method that allows to draw strings of any length.
If the string is larger than the container, it will be wrapped, with the current settings.
Irrelevant: Brush and Pen are declared outside the Paint event, to allow their re-definition when required.
Different implementations of MeasureCharacterRanges here:
How to highlight wrapped text in a control
About Graphics.DrawString and TextRenderingHint.ClearTypeGridFit:
Drawing a Long String on to a Bitmap results in Drawing Issues
Font 48em:
Font 16em:
Font 9em:
Pen pen = new Pen(Color.LightGreen, 1);
Brush brush = new SolidBrush(Color.White);
string sourceDigits = "010011001";
private void panel1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
CharacterRange[] charRanges = new CharacterRange[sourceDigits.Length];
for (int chx = 0; chx < sourceDigits.Length; ++chx) {
charRanges[chx] = new CharacterRange(chx, 1);
}
using (StringFormat sf = new StringFormat())
{
sf.Alignment = StringAlignment.Center;
sf.LineAlignment = StringAlignment.Center;
sf.SetMeasurableCharacterRanges(charRanges);
Region[] regions = e.Graphics.MeasureCharacterRanges(sourceDigits, Font, e.ClipRectangle, sf);
for (int i = 0; i < regions.Length; i++) {
RectangleF rect = regions[i].GetBounds(e.Graphics);
e.Graphics.DrawRectangle(pen, rect.X, rect.Y, rect.Width, rect.Height);
e.Graphics.DrawString(char.ToString(sourceDigits[i]), Font, brush, rect, sf);
}
}
}

Unable to get correct Size of DrawnText using TextRenderer

Im drawing Text using the following code onto a Bitmap
GraphicsPath pth = new GraphicsPath();
var style = (int)myfont.Style;
pth.AddString(tcaption.Text, myfont.FontFamily, style, myfont.Size, point, StringFormat.GenericTypographic);
p = new Pen(new SolidBrush(bc), 2f);
mygraphics.DrawPath(p, pth);
I'm using the TextRenderer to measure the size of the string..
int Width = TextRenderer.MeasureText(tcaption.Text, myfont).Width;
But this does not produce the correct size of the drawn string; there is around 20-30% difference from the actual size of the drawn string?
What im i doing wrong? Please advice.
UPDATE:
I want to draw a Text and an Image onto a Bitmap,so inorder to accommodate both i'm creating an Bitmap like this
intWidth = TextRenderer.MeasureText(tcaption.Text, cfont).Width + image.Width;
intHeight = TextRenderer.MeasureText(tcaption.Text, cfont).Height +image.Height;
tempimage= new Bitmap(intWidth, intHeight);
Then i create Graphics object from the Bitmap like this
using (Graphics newg = Graphics.FromImage(tempimage))
#Hans Passant
I have also tried the Graphics.MeasureString as an alternative to TextRenderer
Now i set the position of the text and image-I need to draw the image at the top left corner .. so
imageposy = 0;
imageposx = 10;
textposy = image.Height;
textposx = 0;
Then i draw the text like this
po=new Point(textposx, textposy);
newg.SmoothingMode = SmoothingMode.AntiAlias;
GraphicsPath pth = new GraphicsPath();
var style = (int)myfont.Style;
pth.AddString(tcaption.Text, myfont.FontFamily, style, myfont.Size, po,
StringFormat.GenericTypographic);
newg.FillPath(new SolidBrush(fc), pth);
Now i draw the image like this
Rectangle nrect = new Rectangle(imageposx, imageposy, image.Width,
image.Height);
objGraphics = Graphics.FromImage(tempimage);
objGraphics.DrawImage(image, nrect);
As you have seen i need to add the offset 10 to imageposition x coordinate to correct the measurement issue.
Hope my update throws more light into the question... what im i doing wrong?
Please advice..

instead of using TextRenderer use GraphicsPath:
var path = new GraphicsPath();
path.AddString(text, font.FontFamily, (int)font.Style, size, new Point(0, 0), StringFormat.GenericTypographic);
var area = Rectangle.Round(path.GetBounds());
Here is sample code that generates image with size of text:
private Image DrawText(String text, Font font, int size, Color textColor, Color backColor)
{
var path = new GraphicsPath();
path.AddString(text, font.FontFamily, (int)font.Style, size, new Point(0, 0), StringFormat.GenericTypographic);
var area = Rectangle.Round(path.GetBounds());
Rectangle br = Rectangle.Round(path.GetBounds());
var img = new Bitmap(br.Width, br.Height);
var drawing = Graphics.FromImage(img);
drawing.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAliasGridFit;
drawing.SmoothingMode = SmoothingMode.HighSpeed;
drawing.Clear(backColor);
drawing.TranslateTransform((img.Width - br.Width) / 2 - br.X, (img.Height - br.Height) / 2 - br.Y);
drawing.FillPath(Brushes.Black, path);
Brush textBrush = new SolidBrush(textColor);
drawing.Save();
textBrush.Dispose();
drawing.Dispose();
return img;
}
Here are sample results:

Bold a part of string in generated barcode

I am generating a barcode as an image. The barcode consists of few different values, such as amount, length, width and m2. These numbers are displaying below the barcode as a summary of all user entries. Is there a way to either bold or underline the m2 (square meters) in the summary under the barcode? Please see below sample of what is needed:
Here's the code I use to generate the barcode:
private void generate_Click(object sender, EventArgs e)
{
String barcode = summary.Text;
Bitmap bitmap = new Bitmap(barcode.Length * 40, 150);
using (Graphics graphics = Graphics.FromImage(bitmap))
{
Font ofont = new System.Drawing.Font("IDAutomationHC39M", 20);
PointF point = new PointF (2f, 2f);
SolidBrush black = new SolidBrush(Color.Black);
SolidBrush White = new SolidBrush(Color.White);
graphics.FillRectangle(White, 0, 0, bitmap.Width, bitmap.Height);
graphics.DrawString("*" + barcode + "*", ofont, black, point);
}
using (MemoryStream ms = new MemoryStream())
{
bitmap.Save(ms, ImageFormat.Png);
box4.Image = bitmap;
box4.Height = bitmap.Height;
box4.Width = bitmap.Width;
}
}

You can use the constructor of Font that accepts a font style (docs)
new System.Drawing.Font("IDAutomationHC39M", 20, FontStyle.Bold);
The problem comes in determining what part of the text should be bold which means you will have to split the text up at a certain point, and ascertain the offset of the bold text
Since the font you're using (IDAutomationHC39M), renders the bar code also, this won't work unless you find a different font that will allow you to render the bars separately to the text. This leaves you with a few options.
Separate fonts
Don't make the text you want to bold
Make it stand out in a different way, colour the text in a different colour that will make it stand out / draw a line under it / etc

If this was just text
You need to break the text up into 2 parts,
string barcode1; //the normal bit
string barcode2; //the bold/underlined bit
Font ofont = new System.Drawing.Font("IDAutomationHC39M", 20);
Font ofontBold = new System.Drawing.Font("IDAutomationHC39M", 20, FontStyle.Bold);
Then render text in 3 stages, measuring the offset of each previous part:
graphics.DrawString("*" + barcode1, ofont, black, point);
var point2 = new PointF(point.X + graphics.MeasureString("*" + barcode1, ofont).Width, point.Y);
graphics.DrawString(barcode2, ofontBold, black, point2);
var point3 = new PointF(point2.X + graphics.MeasureString(barcode2, ofontBold).Width, point2.Y);
graphics.DrawString("*", ofont, black, point3);
However the font includes the lines
So I think the best you can do is to draw an underline using the same string measuring techniques:
string barcode1; //the normal bit
string barcode2; //the underlined bit
var lineStartX = point.X + graphics.MeasureString("*" + barcode1, ofont).Width;
var lineWidth = graphics.MeasureString(barcode2).Width;

C# graphics, paint, picturebox centering

Ok, so this is the problem: in C# forms I've created a new private void:
private void NewBtn(string Name, int x, int y)
Which has a purpose of creating a picturebox that imitates behavior of a button (don't ask why, I simply enjoy complicating things) and can be called as many times as I want.
Font btnFont = new Font("Tahoma", 16);
PictureBox S = new PictureBox();
S.Location = new System.Drawing.Point(x, y);
S.Paint += new PaintEventHandler((sender, e) =>
{
e.Graphics.TextRenderingHint =
System.Drawing.Text.TextRenderingHint.AntiAlias;
e.Graphics.DrawString(Name, btnFont, Brushes.Black, 0, 0);
});
Controls.Add(S);
Now, I am worried about part with Paint/Graphics (ignore rest of the code, I only gave some of it). I want to center the text that I write as "Name" in void when I call it "NewBtn(Name, x, y)". So, what should I put as
e.Graphics.DrawString(Name, btnFont, Brushes.Black, ThisX???, 0);
Suggestions?

var size = g.MeasureString(Name, btnFont);
e.Graphics.DrawString(Name, btnFont, Brushes.Black,
(S.Width - size.Width) / 2,
(S.Height - size.Height) / 2));
You can improve this by measuring the string only once, considering the font and text won't change for a specific Button/PictureBox.
And I would also suggest checking if S.Size is wider / taller than size and handling it, so graphics won't try to draw a string starting at negative coordinates.

Try using the Graphics.DrawString methods that uses the String.Drawing.StringFormat Option
StringFormat drawFormat = new StringFormat();
drawFormat.Alignment= StringAlignment.Center;
drawFormat.LineAlignment = StringAlignment.Center;
You have two options here the first to use coordinates.
e.Graphics.DrawString(("Name", new Font("Arial", 16), Brushes.Black, 10, 10, drawFormat);
the second is to create a rectange like this:
e.Graphics.DrawString("Name", new Font("Arial", 16), Brushes.Black, new Rectangle(0,0,this.Width,this.Height), drawFormat);

White bar, and then text watermark?

I would like to apply a watermark to images.
At the moment, I am trying to use this code, but it's failing on different sized images:
public void AddWaterMark(string filePath, string watermarkText)
{
Image img = Image.FromFile(
MapPath(GlobalVariables.UploadPath + "/" + filePath));
Graphics gr = Graphics.FromImage(img);
Font font = new Font("Alial Black", 40);
Color color = Color.FromArgb(50, 241, 235, 105);
StringFormat stringFormat = new StringFormat
{
Alignment = StringAlignment.Near,
LineAlignment = StringAlignment.Near
};
gr.SmoothingMode = SmoothingMode.AntiAlias;
gr.DrawString(watermarkText, font, new SolidBrush(color),
new Point(20, img.Height - 60), stringFormat);
img.Save(MapPath(GlobalVariables.UploadPath + "/w_" + filePath));
}
Sometimes the font goes off the bottom. I want it to be text along the bottom of the image.
How do I ensure it doesn't go off the bottom?
Also, I want to enhance it slightly. I want to make a white, but transparent bar across the full length of the bottom of the image, and then write black text over it. Is this possible with drawing? So, a bar across the bottom of the image, maybe 60 pixels high, and in the middle of the 60px, I want text written (left aligned).
I am also finding the text moves arounf, depending on the file size
Here's an image that works:
http://www.listerhome.com/fulldisplay.aspx?imageid=100055
Bur sometimes, when I uploaded higher resolution images, I get this:
http://www.listerhome.com/fulldisplay.aspx?imageid=100060

You can use MeasureString function to calculate string size.
SizeF stringSize = gr.MeasureString(watermarkText, font, img.Width - 40);
gr.DrawString(watermarkText, font, new SolidBrush(color),
new RectangleF(20, img.Height - stringSize.Height, img.Width - 40, stringSize.Height),
stringFormat);