Home

Drawing Strings

 

The Spoken and Written Words

 

The Speech

Our most common means of communicating with other people is through the spoken words. This is the type taught very early to babies and infants. For two people A and B to effectively communicate with speech, they must use words that are common to them. There could be other words spoken by two different individuals C and D and that people A and B do not understand. The group of words that two people A and B use to understand each other is called a language. Each language has a name, such as Latin or Aramaic. One or more new languages can be derived from an existing language. Just as done for a C# class, the newly derived language can modify some words of the parent language and can add new language.

One of the limitations of the spoken word is that we must be interacting, somehow directly, with the other person and, after the conversation is over, except for our memory, the whole speech is physically lost, and there is no physical reference that the conversation took place.

An Alphabet and its Letters

Another type of communication, which is sometimes an addition, sometimes an alternative, is the written word. To make this possible, a long time ago (hundreds and sometimes thousands of years ago), a group of symbols were created so that each symbol would have a particular role and meaning. The group of symbols is understandable to a particular language and the group of symbols is called an alphabet. Like everything else, an alphabet has a name, and the name of the alphabet is related to its corresponding language. For example, there is such a thing as the English alphabet. There is the French alphabet, and the German alphabet.

One of the particularities of a regular alphabet is that it must have a specific way to represent its primary basic symbols. In English, the basic symbols are A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, and Z. There are two ways to represent a letter (in most Western languages): uppercase and lowercase.

Besides the regular letters of an alphabet, when creating or representing the written words, a language can add some signs to some words. This can assist in the pronunciation or the variations, which can subsequently make the language richer. For example, both the English and the French languages use the same alphabet, but the French language adds some signs to some of its letters. Examples are: Ma marâtre est peut-être a côté du tronçon fluvial. Many other languages, derived from Latin or not, use this type of mechanism to complement their communication.

As mentioned already, the letters used in the alphabet and the digits used to represent numbers were created a long time ago. The people who created them designed a standard way of representing the letters. For example, they decided that the letter A would be represented as A. A few (hundred) years later, as aesthetic representation was developed to make things look good, some variations of representing the same letter were created. For example, here are three representations the the same word:

  • State
  • State
  • State

Notice that the S on each word is different. With the advent of computers, new demands for better and more sophisticated techniques of representing words were needed.

The Digits

The letters of an alphabet are typically used to create or represent spoken words. To count, to measure, to represent numbers, or to perform calculations, other symbols were created. The Latin-based languages use the symbols 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9. Because there are 10 of them, they are referred to as digits. While most (or rather many) languages, including non-Latin-based languages, use or borrow these digits, some other languages use other means of representing numbers.

In spoken words, each of these symbols has a specific name.

To create a represent a number, you use one or a combination of digits.

Getting a Font

A font is an abstract (non-physical) object used to draw some symbols on paper, a computer monitor, or another device (PDA, oscillator, etc).

A font is created by a graphic artist or developed by a corporation. Once the font has been designed, it is created as a computer application and must be installed in the device that will use it. This means that the font must be installed in the computer, the printer, or the device that can then use it. This also means that there are various ways you can get a font to your device. Most computer-related objects (PCs, printers, oscillators, PDAs, etc) come with one or more fonts already installed. You can also purchase a font and install it on a computer. You can also download a free font from the Internet and install it.

The Characteristics of a Font

 

Introduction

A font is a GDI+ object, like a pen or a brush. Like any other object, the primary information of a font is its name. To see the names of fonts installed in a computer that is running Microsoft Windows, in the Control Panel, you can double-click Fonts. Here is an example:

Because is something that must be installed on, and can be removed from, the computer, it is likely that two computers would not have the same (list of) fonts. Still, because Microsoft Windows installs some default or popular fonts by default, there are fonts that are likely to be found on every regular installation of Microsoft Windows. This implies that, if you create a (commercial) application that you intend to distribute to people (customers) you do not know, you should assume that your audience would not have most or any of the fancy fonts you have in your computer.

You have two alternatives when selecting the fonts used in your application you intend to distribute. If you own the font, you can distribute it with your application. Another solution, easier solution, is to use only the most likely fonts to be found on most computers.

Creating a Font

In the .NET Framework, the primary piece of information about a font is held by a class named FontFamily. The FontFamly class is equipped with three constructors that each provides a different means of initializing a font.

The list of fonts installed in a a computer is stored in a property of the FontFamily class and that property is named Families. The FontFamily.Families property is collection member declared as a static property.

Like every GDI+ object, before using a font, you must create and initialize it.  To support fonts, the .NET Framework provides the Font class. This class is equipped with various constructors that each provides a particular means of initializing a font.

In order to use a font in an application, you must identify the FontFamily object you want to use and associate it with a Font.

The Name of a Font

The primary piece of information about a font is its name. As seen about, the names of fonts can be seen in the Fonts window of Control Panel. As mentioned already, the name of a font is held by the FontFamily class. If you know the name of the font you want to use, to create a font object (using that name), you can use the following constructor of the FontFamily class:

public FontFamily(string fontName);

This constructor takes as argument the name of the font you want to use. Here is an example of using it:

using System;
using System.Drawing;
using System.Windows.Forms;

public class Exercise : System.Windows.Forms.Form
{
    Button btnWrite;

    public Exercise()
    {
        InitializeComponent();
    }

    void InitializeComponent()
    {
        btnWrite = new Button();
        btnWrite.Text = "Write";
        btnWrite.Location = new Point(12, 12);
        btnWrite.Click += new EventHandler(btnWriteClick);

        Controls.Add(btnWrite);
    }

    void btnWriteClick(object sender, EventArgs e)
    {
        FontFamily fntWrite = new FontFamily("Times New Roman");
    }
}

public class Program
{
    static int Main()
    {
        System.Windows.Forms.Application.Run(new Exercise());
        return 0;
    }
}

When using this constructor, you should make sure the font you use exists in the computer that will run the application. If you provide a name of a font that does not exist in the computer that is running the application, the compiler would throw an ArgumentException exception.

To get the name that a FontFamily object is using, get the value of its Name property. As you can guess, the name of a font is a string.

The Size of a Font

The size of a font is the width and the height that will be used to draw a character. It is important to know that this size refers to the visual 2-dimensional size and not to the memory size. This means that the letters i, N, g, M, l, and W obviously use different visual space but all of them use the same amount of memory space.

When creating a font, to specify its size, you can use the following constructor of the Font class:

public Font(string familyName, float emSize);

The first argument is the name of the font you want to use. The second argument is a floating-point number. Here is an example:

void btnWriteClick(object sender, EventArgs e)
{
      Font fntWrite = new Font("Verdana", 16.0F);
}

If you had stored the name of the font in a FontFamily variable and want to create a font, you can use the following constructor of the Font class:

public Font(FontFamily family, float emSize);

Here is an example of using this constructor:

void btnWriteClick(object sender, EventArgs e)
{
      FontFamily ffmWrite = new FontFamily("Times New Roman");
      Font fntWrite = new Font(ffmWrite, 16.0F);
}

To find out the size of an existing font, you can get the value of the Size property of a Font object.

The Style of a Font

To enhance the appearance of a characters, a font can be underlined, italicized, or bolded, etc. These are referred to as a style. To specify a style when creating a font, you can use the following constructor of the Font class:

public Font(string familyName, float emSize, FontStyle style);

The first argument is the name of the font. The second argument would be the size of the font. The third argument is of type FontStyle, which is an enumeration. The members of this enumeration are:

  • Regular: The character(s) would not have a particular style
  • Bold: The character(s) would be bolded
  • Italic: The character(s) would be italicized
  • Strikeout: A line would traverse the the character(s)
  • Underline: The character(s) would be underlined

Here is an example of initializing a font by specifying its name, its size, and a style:

void btnWriteClick(object sender, EventArgs e)
{
        Font fntWrite = new Font("Verdana", 16.0F, FontStyle.Italic);
}

The above constructor is used to directly specify the name of the font. If you had stored the name of a font in a FontFamily object and you want to specify its style when initializing it, you can use the following constructor when declaring a Font variable:

public Font(FontFamily family, float emSize, FontStyle style);

Here is an example of using this constructor:

void btnWriteClick(object sender, EventArgs e)
{
        FontFamily ffmWrite = new FontFamily("Times New Roman");
        Font fntWrite = new Font(ffmWrite, 16.0F, FontStyle.Strikeout);
}

If you already have an existing font but want to apply a style to it, change its style, or apply a different style to it, you can use the following constructor of the Font class:

public Font(Font prototype, FontStyle newStyle);

Here is an example:

void btnWriteClick(object sender, EventArgs e)
{
        FontFamily ffmWrite = new FontFamily("Times New Roman");
        Font fntWrite = new Font(ffmWrite, 16.0F, FontStyle.Strikeout);
        
        . . . Use or don't use the font here

        fntWrite = new Font(fntWrite, FontStyle.Bold);

        . . . Use the new font here
}

You can also create a new font based on the previous one but with a different style. Here is an example:

void btnWriteClick(object sender, EventArgs e)
{
        FontFamily ffmWrite = new FontFamily("Times New Roman");
        Font fntWrite = new Font(ffmWrite, 16.0F, FontStyle.Strikeout);
        
        . . . Use or don't use the font here

        Font fntAnother = new Font(fntWrite, FontStyle.Bold);

        . . . Use the new font here
}

You can combine two or more styles to get a fancier effect. To combine the styles, you use the OR bit operator "|". Here are two examples:

void btnWriteClick(object sender, EventArgs e)
{
    FontFamily ffmWrite = new FontFamily("Times New Roman");
    Font fntWrite = new Font(ffmWrite, 16.0F, 
	FontStyle.Strikeout | FontStyle.Italic);

    . . . Use or don't use the font here
        
    fntWrite = new Font(fntWrite, 
	FontStyle.Italic | FontStyle.Bold | FontStyle.Underline);

    . . . Use the new font here
}

As opposed to applying a style, you may be interested to get the style that a font object holds:

  • To find out whether a character or a word is bolded, get the Boolean value of the Bold property of its font
  • To find out whether a character or a word is italicized, get the Boolean value of the Italic property of its font
  • To find out whether a character or a word in underlined, get the Boolean value of the Underline property of its font
  • To find out whether a character or a word is stricken through, get the Boolean value of the Strikeout property of its font
  • To get all the styles applied to a character, a word, or a group of words, get its Style property

Introduction to the Font Dialog Box

 

Introduction

To assist the user with selecting a font for an application, Microsoft Windows provides the Font dialog box:

Font

The Font dialog box appears with three combo boxes of a simple style, a group box that contains a label, a combo box of a drop down list style, and two buttons (labeled OK and Cancel).

The list of fonts installed on the computer appear in the Font combo box. To select a font, the user can start typing its name and the combo box would present suggested names. The user can also scroll down in the list and click the desired font.

The four types of font styles are listed in the Font Style combo box: the Regular, the Italic, the Bold, and the combined Bold Italic styles.

The possible sizes are listed in the Size combo box. The user can click a size or scroll down in the list to find the desired size. The user is allowed to use a size that is not listed. To use it, the user can click in the text box side of the control, delete the number, and type the new number.

As the user is making the selections that would define a font, the Sample label shows a preview of the selection.

The Script combo box allows the user to specify an alphabetic category. The options are Western (the default for a US-English computer), Greek, Turkish, Central European, and Cyrillic.

After making the selections in the Font, the Font Style, and the Size combo boxes, the user can click OK.

As an option, the Font dialog box can allow the user to apply two more styles and a color to the selected font. To make this possible, the lower-left section of the dialog box can be equipped with an Effects group box. Here is an example:

The Font Dialog Box With Styles and Color

The Effects group box is equipped with a Strikeout check box, an Underline check box, and a Color combo box. To apply a style, the user can click its check box. To remove a style, the user can uncheck it. To select a color, the user can click the arrow of the Color combo box and select a color.

As mentioned already, after making the selections, the user can click OK. To dismiss the selections, the user can click Cancel or press Esc. After clicking OK or Cancel, the dialog box would be closed. As an alternative, the Font dialog box can be equipped with an Apply button. In this case, when the dialog box comes up, the user can make selections. If the user clicks Apply, the new selections would be executed, as if the user had clicked OK, but the dialog box would continue displaying. After clicking Apply, even if the user clicks Cancel, the changes made on the dialog box would be validated.

Creating a Font Dialog Box

In the .NET Framework, the Font dialog box is represented by the FontDialog class. The FontDialog class is derived from the CommonDialog class.

At design time, to provide a Font dialog to your application, from the Dialogs section of the Toolbox, you can click the FontDialog button FontDialog and click the form. To programmatically provide a Font dialog box to your application, declare a variable of type FontDialog and use the new operator to allocate its memory.

To display a Font dialog box to the user, call its ShowDialog() method. Here is an example:

using System;
using System.Drawing;
using System.Windows.Forms;

public class Exercise : System.Windows.Forms.Form
{
    FontDialog dlgFont;

    public Exercise()
    {
        InitializeComponent();
    }

    void InitializeComponent()
    {
        dlgFont= new FontDialog();

        dlgFont.ShowDialog();
    }
}

public class Program
{
    static int Main()
    {
        System.Windows.Forms.Application.Run(new Exercise());
        return 0;
    }
}

This would produce:

The default Font dialog box of the .NET Framework

Characteristics of the Font Dialog Box

 

The Font of a Font Dialog Box

After creating a Font dialog box, you can display it to the user. The dialog box is configured to select a default font, Regular as the default style, and 8 as the default size. If you want, when the dialog box comes up, you can define the font you want it to display. To support this, the FontDialog class is equipped with a property named Font.

At design time, to define the font, click the FontDialog object under the form. In the Properties window, click Font and click its ellipsis button. This would display the Font dialog box. You can make your selections and then click OK. At run time, to specify the font, first create a Font object, and then assign it to the Font property of the FontDialog variable. Here is an example:

void InitializeComponent()
{
        Font fnt = new Font("Garamond", 18.00F, FontStyle.Italic);

        dlgFont = new FontDialog();
        dlgFont.Font = fnt;

        dlgFont.ShowDialog();
}

This would produce:

Font

At any time, to make the dialog box display its default values, you can call its Reset() method. The syntax of the Reset() method is:

public override void Reset ();

On the other hand, after the user has made the selections on the dialog box and clicked OK (or Apply), to get the list of selections the user made, you can get the values of its Font property.

The Apply Button

As you may know already, after making the selections on the dialog box, the user can click OK. In this case, when you call the ShowDialog() method, you can find out whether this method returns DialogResult.OK. If it does, you can get all the returned values of the dialog box to know what changes the user made.

Besides OK and Cancel, you can equip a font dialog box with a button labeled Apply. To support this, the FontDialog class is equipped with a Boolean property named ShowApply. By default, this property is set to false, which means the button would be hidden. If you want to show the button, set this property to true. Here is an example:

void InitializeComponent()
{
        dlgFont = new FontDialog();
        
        dlgFont.ShowColor = true;

        dlgFont.ShowApply = true;

        dlgFont.ShowDialog();
}

This would produce:

Font

As opposed to the OK button, when the user clicks Apply, the dialog box does not close and therefore (its ShowDialog() method) does not return a DialogResult result. Instead, the dialog box fires an Apply event. This event is of type EventArgs, which means it does not give your information about what the user did (or did not do). Fortunately, to get information about the state or the values of the dialog, you can simply inquire about its various properties and you would get all the information you need without any effort.

The Effects of a Font Dialog Box

We have already mentioned that the Font dialog box can display or not display the Effects group box. This characteristic is controlled by the ShowEffects Boolean property. When this property is set to true, the dialog box would display an Effects group box that contains a Strikeout and an Underline check boxes. If the ShowEffects property is set to false, the whole section would be hidden.

The Color Combo Box

Besides the font definition, you may want the user to apply a color to the font. To support this, the FontDialog class is equipped with the ShowColor Boolean property. By default, this property is set to false. Because the Color combo box is contained in the Effects group box, before being able to display it, you must set the ShowEffects property to true. Then, to show the Color combo box, you can set its property to true.

If the Font dialog box is configured to show the Color combo box, by default, when the dialog box displays, the Color combo box selects the black color. If you want, you can make it display a different color. To do this, at design time, access the Properties window for the FontDialog object, click the arrow of the Color field and select a color. To programmatically specify a color, assign the desired color to the Color property:

void InitializeComponent()
{
        Font fnt = new Font("Garamond", 18.00F, FontStyle.Italic);

        dlgFont = new FontDialog();
        dlgFont.Font = fnt;

        dlgFont.ShowColor = true;
        dlgFont.Color = Color.Red;

        dlgFont.ShowDialog();
}

This would produce:

After using the dialog box, if the user had selected a color and clicked OK (or Apply), to find out the color the user had selected, get the value of the Color property.

Drawing a String

 

Introduction

Besides the regular geometric and irregular non-geometric shapes we have seen so far, you can draw a string on a graphics object. To support this, the Graphics class is equipped with a method named DrawString that is overloaded with various versions.

One of the versions of the Graphics.DrawString() methods uses the following syntax:

public void DrawString(string s, Font font, Brush brush, float x, float y);

The first argument is the string that will be drawn on the graphics object. The second argument is the definition of the font that will be used. The third argument can simply be a color, it can be a pattern, or it can be a complex texture that will be used to paint the character(s) of the string. The last two arguments are the (top-left) coordinates where the beginning of the string would be.

Here is an example of calling this method:

using System;
using System.Drawing;
using System.Windows.Forms;

public class Exercise : System.Windows.Forms.Form
{
    public Exercise()
    {
        InitializeComponent();
    }

    void InitializeComponent()
    {
        Paint += new PaintEventHandler(Painter);
    }

    void Painter(object sender, PaintEventArgs e)
    {
        FontFamily fntFamily = new FontFamily("Times New Roman");
        Font fntWrite = new Font(fntFamily, 24.00F, FontStyle.Regular);

        e.Graphics.DrawString("Rain Drop", fntWrite, Brushes.Blue, 10.00F, 8.00F);
    }
}

public class Program
{
    static int Main()
    {
        System.Windows.Forms.Application.Run(new Exercise());
        return 0;
    }
}

This would produce:

Draw String

The above version of the DrawString() method specifies the coordinates as two floating-point numbers. A logical alternative is to consider the coordinates as a PointF value. This can be done using the following version of the method:

public void DrawString(string s, Font font, Brush brush, PointF point);

The first three arguments are the same. The last argument is the PointF combination of the two floating-point values of the previous version of the method.

Confining a String to a Rectangle

One of the advantages of using one of the above versions of the Graphics.DrawString() method is that it would draw the whole string. I you draw other strings, there is a possibility that the strings would overlap. Here is an example:

void Painter(object sender, PaintEventArgs e)
{
    PointF ptF = new PointF(10.00F, 8.00F);
    FontFamily fntFamily = new FontFamily("Times New Roman");
    Font fntWrite = new Font(fntFamily, 18.00F, FontStyle.Regular);

    e.Graphics.DrawString("College Park Auto-Parts", fntWrite, Brushes.Blue, ptF);

    ptF = new PointF(10.00F, 16.00F);
    e.Graphics.DrawString("Georgetown Cleaning Services", 
			  fntWrite, Brushes.Red, ptF);
}

This would produce:

Draw String

Of course, this means that it is just a concern you would have to address and there are various ways you can solve this type of problem (unless it is your intention to overlap the strings). One alternative you can use is to draw the string inside of a box and not allow it to go beyond that box. To support this, the DrawString() method has the following version:

public void DrawString(string s, Font font, 
		       Brush brush, RectangleF layoutRectangle);

The last argument is a rectangle value with floating-point numbers. The string would be drawn inside that rectangle. Anything that could go beyond that rectangle would disappear. Here is an example:

void Painter(object sender, PaintEventArgs e)
{
    FontFamily fntFamily = new FontFamily("Times New Roman");
    Font fntWrite = new Font(fntFamily, 20.00F, FontStyle.Regular);
    RectangleF rect = new RectangleF(10.00F, 8.00F, 160.00F, 20.00F);

    e.Graphics.DrawString("College Park Auto-Parts", 
			  fntWrite, Brushes.Blue, rect);
}

This would produce:

Draw String

Notice that, not only is the string too tall for the rectangle, but also the string is too long. This means that you must appropriately define the rectangle.

 
 

Previous Copyright 2008-2009, yevol.com Next