Formatted Text

Writing text may require the highlighting of a certain area of text, whether it be a phrase or a single word. While Graphics.DrawString or Graphics.DrawText could be used to do this, they are not optimal methods, because of the necessity of breaking text into chunks with the same font settings, and then rendering them separately by calling the Graphics.DrawString or Graphics.DrawText methods. Graphics Mill provides a far more streamlined method for highlighting, called the Graphics.DrawFormattedText. This method allows the completion of this task with ease. This method is quite similar to Graphics.DrawText and accepts the same arguments:

• Text string to draw.
• Font settings.
• SolidBrush that specifies the color of the text.
• The size of the drawn text.
• Boolean value specifying whether to clip the text when it does not fit the bounding rectangle.
• Number of whitespaces with which to replace one tabulation character in the text.

There is only one difference between these methods: the text you want to draw with the Graphics.DrawFormattedText method must be marked up in XML-like style. The following tags and document structure are allowed:

<root>
    <para [style="..."]>
        [some text]
        <span [style="..."]>
            [some text]
            <span [style="..."]>
                [some text]
            </span>
        </span>
        ...
        <span [style="..."]></span>
    </para>
    ...
    <para [style="..."]></para>    
</root>

Let's consider it in more detail.

Root is the root tag. There should be only one root tag in the text argument which incorporates all parts of the text, along with their settings. If you place some text outside the <root></root> tags, the Graphics.DrawFormattedText will throw an ArgumentException.

Para is a paragraph tag. All the text you want to draw should be divided into at least one paragraph and each paragraph should be enclosed between <para> and </para> tags. Otherwise, the text won't be parsed and drawn. It supports the style attribute (see below) which allows you to specify some font and color settings of this paragraph.

Span is a tag intended to define a new inline area. You can use it to highlight some text inside a paragraph. These tags can be embedded in the existing <span></span> tags. It supports the style attribute too.

The text layout mechanism is based on CSS and uses style attributes for attaching font settings and text parameters for paragraphs and their portions. These attributes accept settings as a formatted string. Its common syntax is shown below:

style="style-parameter1:value1; style-parameter2:value2; ...; style-parameterN:valueN"

All supported parameters are described in the following table:

Graphics.DrawFormattedText supports the following XML predeclared entities:

• & - & ampersand;
• < - < less than;
• > - > greater than.

This method also processes service characters in the specific way. It parses the tabulation character (\t in C#) as a sequence of whitespaces. The number of whitespaces with which to replace one tabulation character can be specified by the tabSize parameter.

The following code example draws a birthday postcard with specified text that shown below:

// Background bitmap
using (var bitmap = new Bitmap(@"Images\balloons.jpg"))
using (var graphics = bitmap.GetGraphics())
{
    // XML string for drawing
    string resultXml;

    //define font and color settings 
    var font = new Font("Tahoma", 14);
    var brush = new SolidBrush(RgbColor.Black);
        
    // Mark up the text 
    resultXml = "<root>"+
        "<para style=\"font-size:40;text-align:center;color:rgb(220,0,0);_line-spacing:40px\">" +
        "Dear John!" + "</para>" +
        "<para style=\"font-size:20;text-align:justify;font-weight:bold;color:rgb(5,70,150);_line-spacing:20px\">" +
        "\tFor a happy birthday and a happy, healthy and lucky year. We wish you to live in you own way, " +
        "to reach  for your own goals, to be the person you want to be. Wishing you happiness on your bithday!" +
        "</para>" + "<para style=\"font-size:18;text-align:right;font-style:italic;color:rgb(220,235,250)\">" +
        "Your friends" + "</para>" + "</root>";
        
    graphics.DrawFormattedText(resultXml, font, brush, 40, 40, bitmap.Width - 80, bitmap.Height - 80, true, 4);
        
    bitmap.Save(@"Images\Output\formatted.png");
}