1. Graphics Mill 11.5.34
  2. Drawing Text and Graphics

Formatted Text

In the Drawing Text topic, we discussed how to draw different types of text and change text settings like font, outline, and fill. Also, we discussed how to perform effects and transformations on text. The only important question left untouched is how to draw portions of text with different font styles within a single text string. In other words, how to draw formatted text. This topic will show you how to do this.

Also, this topic discusses the well-known formatting option of lists.

In Graphics Mill, any type of text can be formatted. In other words, any child of the Text class understands formatting. We will use the BoundedText class for demonstration purposes, but you can perform the same function with any type of text (PlainText, BoundedText, PathText, DoublePathText, and ArtText).

Paragraph and Text Formatting

Text formatting in Graphics Mill utilizes the <span> tag and CSS-like style attribute. You just mark the text you want to format with <span> and <p> tags and set their styles using the style attribute, then you initialize a text class with the string and use the class's draw method to output the text. It is that simple. Let us see how it works:

C# 
using (var bitmap = new Bitmap(600, 400, PixelFormat.Format24bppRgb, new RgbColor(255, 255, 255, 255)))
using (var graphics = bitmap.GetAdvancedGraphics())
{
    var brush = new SolidBrush(RgbColor.Black);

    var text = @"<p style='first-line-indent:20pt; space-before:30pt; space-after:20pt;'>Lorem ipsum dolor sit <span style='color:red;'>amet</span>," +
        @"consectetur adipiscing elit. <span style='bold:true;underline:true;color:rgb(0,0,255)'>Cras</span> elementum quam ac nisi varius gravida. " +
        @"Mauris ornare, <span style='font-name:Times New Roman;font-size:60pt;pen-color:green;pen-width:1px;color:yellow;'>dolor</span> et scelerisque " +
        @"volutpat, <span style='italic:true;color:gray;'>enim urna commodo odio, <span style='color:green;'>consequat</span> fermentum sem arcu</span>" +
        @" sit amet nisl.</p> <p style='first-line-indent:40pt; space-before:60pt; space-after:10pt;'>Aliquam tincidunt id neque in gravida. " +
        @"Mauris mollis est vulputate suscipit facilisis.</p>";

    var boundedText = new BoundedText(text, graphics.CreateFont("Verdana", 26f), brush)
    {
        Rectangle = new System.Drawing.RectangleF(20f, 20f, 560f, 360f)
    };

    graphics.DrawText(boundedText);

    bitmap.Save(@"Images\Output\DrawFormattedText.png");
}

This snippet results in the following image:

Formatted text

Format Options

The following table describes all formatting options supported by Graphics Mill.

Name Description Examples
Paragraph Settings
direction

Specifies the text direction in the paragraph. It can be either RTL or LTR.

 style = 'direction:RTL'
first-line-indent

Specifies the indent of the first line in the paragraph.

 style = 'first-line-indent:20pt'
left-indent

Specifies the left indent of the paragraph.

 style = 'left-indent:10pt'
right-indent

Specifies the right indent of the paragraph.

 style = 'right-indent:10pt'
space-before

Sets the space before the paragraph.

 style = 'space-before:30pt'
space-after

Sets the space after the paragraph.

 style = 'space-after:20pt'
Font Settings
font-family

Specifies the font family name.

 style = 'font-family:Arial'
font-name

Specifies the PostScript font name. If the specified font is not found, then the Text.Font is used.

 style = 'font-name:Times New Roman'
font-style

Specifies the font style name.

 style = 'font-style:Narrow Italic'
font-size

Specifies the font size.

 style = 'font-size:12pt'
bold

Enables the faux bold style. Set true for bold.

 style = 'bold:true'
italic

Enables the faux italic style. Set true for italic.

 style = 'italic:true'
underline

Enables the underlining. Set true for underline.

 style = 'underline:true'
digit-type

Sets the digit type. This setting supports the hindi, arabic, and farsi values.

 style = 'digit-type:hindi'
ot

Enables the OpenType features. The minus sign followed by a feature name disables this feature.

 style = 'ot:-liga;ot:sups'
leading

Specifies leading.

 style = 'leading:50pt'
tracking

Specifies letter spacing, in thousandths of em.

 style = 'tracking:500'
word-spacing-scale

Specifies word spacing.

 style = 'word-spacing-scale:3'
Color Settings
color

Specifies the text fill color. Keywords like red, green, white, etc. are supported.

 style = 'color:rgb(0,255,0)'
style = 'color:green'
pen-color

Specifies the text outline color. Keywords like red, green, white, etc. are supported.

 style = 'pen-color:rgb(0,255,0)'
style = 'pen-color:green'
pen-width

Specifies the text outline width.

 style = 'pen-width:1px'

Also, you can use the <br/> tag to insert line breaks.

To display reserved symbols, use the following combinations:

  • &amp; for & (ampersand)
  • &lt; for < (less than)
  • &gt; for > (greater than)

Measuring Formatted Text

Measuring text means determining the dimensions of a rectangle that encloses the text as tightly as possible. To measure formatted text, you can get its black box using the GetBlackBox() method as the following snippet illustrates:

C# 
using (var bitmap = new Bitmap(160, 160, PixelFormat.Format24bppRgb, RgbColor.White))
using (var graphics = bitmap.GetAdvancedGraphics())
{
    var text = @"<span style='font-size:36pt;color:red;'>Art</span> " +
               @"<span style='color:green;'>Round</span> <span style='font-size:36pt;color:blue;'>Text</span>";
    using (var roundText = new RoundText(text, graphics.CreateFont("Verdana", 26f), new System.Drawing.PointF(80, 80)))
    {
        roundText.Bend = 0.9f;
        graphics.DrawText(roundText);
        graphics.DrawRectangle(new Pen(RgbColor.Gray, 1f), roundText.GetBlackBox());
        bitmap.Save(@"Images\Output\MeasureFormattedText.png");
    }
}

This snippet draws the text and its black box:

Measuring formatted text.

Using OpenType Features

The ot format option allows you to apply OpenType features if your font supports them. To disable the features, use the minus sign followed by the feature name. The following snippet demonstrates how you can draw formatted text with the superscript, small caps, and fraction features enabled:

C# 
using (var bitmap = new Bitmap(400, 130, PixelFormat.Format24bppRgb, RgbColor.White))
using (var graphics = bitmap.GetAdvancedGraphics())
{
    var brush = new SolidBrush(RgbColor.Black);

    var text = @"<p>OpenType Regular Text 1234567890</p>" +
               @"<p><span style='ot:sups'>OpenType Superscript 1234567890</span></p>" +
               @"<p><span style='ot:smcp;ot:c2sc'>OpenType Small Caps 1234567890</span></p>" +
               @"<p><span style='ot:frac;ot:lnum'>OpenType Fractions 1 2/3</span></p>";

    var boundedText = new BoundedText(text, FontRegistry.Installed.CreateFont("Lyon Text", "Regular", 24, graphics.DpiX, graphics.DpiX), brush)
    {
        Rectangle = new System.Drawing.RectangleF(10f, 10f, 380f, 110f)
    };

    graphics.DrawText(boundedText);

    bitmap.Save(@"Images\Output\DrawOpenType.png");
}

This snippet draws the following text:

OpenType features

For the full list of supported OpenType features, refer to the OpenTypeFeatureTag topic.

Lists

Graphics Mill supports numbered and bulleted lists. To format text as a numbered list, use the <ol> tag, and for a bulleted list, use the <ul> tag. Each element in a list must be tagged with <li>:

C# 
using (var bitmap = new Bitmap(600, 420, PixelFormat.Format24bppRgb, new RgbColor(255, 255, 255, 255)))
using (var graphics = bitmap.GetAdvancedGraphics())
{
    var brush = new SolidBrush(RgbColor.Black);

    var text = @"<ol style='type:upperRoman;'>" +
                  @"<li>The first level element." +
                     @"<ul style='type:bullet; text-indent:30pt; level-indent:50pt;'>" +
                        @"<li>The second level element.</li>" +
                        @"<li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>" +
                        @"<li>Cras elementum quam ac nisi varius gravida.</li>" +
                     @"</ul>" +
                  @"</li>" +
                  @"<li>The first level element." +
                     @"<ul style='type:minus;'>" +
                        @"<li>The second level element.</li>" +
                        @"<li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>" +
                        @"<li>Cras elementum quam ac nisi varius gravida.</li>" +
                     @"</ul>" +
                  @"</li>" +
               @"</ol>";

    var boundedText = new BoundedText(text, graphics.CreateFont("Verdana", 26f), brush)
    {
        Rectangle = new System.Drawing.RectangleF(20f, 20f, 600f, 420f)
    };

    graphics.DrawText(boundedText);

    bitmap.Save(@"Images\Output\DrawFormattedList.png");
}

This snippet results in the following image:

Formatted list

To configure a list, you can use the style attribute. Its type parameter can be one of the following:

for numbered lists:

  • numbers - the marker is a number (1, 2, 3, 4, 5, etc.); this is the default type
  • lowerLetter - the marker is lower-alpha (a, b, c, d, e, etc.)
  • upperLetter - the marker is upper-alpha (A, B, C, D, E, etc.)
  • lowerRoman - the marker is lower-roman (i, ii, iii, iv, v, etc.)
  • upperRoman - the marker is upper-roman (I, II, III, IV, V, etc.)

for bulleted lists:

  • none - list elements without markers; this is the default type
  • bullet - the marker is a circle
  • minus - the marker is a minus

also, for bulleted lists, you can use any symbol by specifying its UTF8 code, for example:

  • <ul style='type: #9675;'> for circle
  • <ul style='type: #9632;'> for square
  • <ul style='type: #9679;'> for disc

To start a numbered list with a certain number, use the start argument of the style attribute. For example, <ol style='start: 3; type: upperRoman;'> starts the list from III.

Format Options

Name Description Snippets
List Settings
level-indent

Specifies the level indent of list elements.

 style = 'level-indent:50pt;'
start

Specifies the start number for a numbered list.

 style = 'start: 3;'
text-indent

Specifies the text indent of list elements.

 style = 'text-indent:30pt;'

Handling Exceptions

The exception classes for formatted text are:

The following code catches the UnknownTagException error because the <article> tag is not supported:

C# 
using (var bitmap = new Bitmap(600, 350, PixelFormat.Format24bppRgb, new RgbColor(255, 255, 255, 255)))
using (var graphics = bitmap.GetAdvancedGraphics())
{
    var text = @"<article>Lorem ipsum dolor sit <span style='color:red;'>amet</span></article>";
    try
    {
        var plainText = new PlainText(text, graphics.CreateFont("Verdana", 26f));
        graphics.DrawText(plainText);
        bitmap.Save(@"Images\Output\DrawFormattedText.png");
    }
    catch (UnknownTagException e)
    {
        Debug.WriteLine("The {0} exception message is caught.", e.GetType());
        Debug.WriteLine("The unknown tag: " + e.Message + ".");
    }
}

The output is:

The Aurigma.GraphicsMill.AdvancedDrawing.UnknownTagException exception message is caught.
The unknown tag: article.

See Also

Reference

Manual