The NTextStyle class has a TextFormat property, which lets you specify whether the displayed text is in XML format and must be parsed before it is displayed. The XML format specification developed by Nevron closely follows the common HTML formatting tags with some extensions, which reflect the advanced features of Nevron Graphics (like support for fill styles, stroke, shadows and image filters).
Because the parser uses the built-in XML parser you must follow the XML formatting rules when writing XML formatted texts, which slightly differ from HTML formatting. The most important ones are that you must always close each open tag and that all tags must be nested in each other (you cannot have overlapping tags).
Following is a detailed explanation on how to use this advanced feature.
Displaying Text with Different Font Style, Fill Style, Border Style and Shadow Style
When XML formatted text is parsed its initial state for font style, fill style, border style and shadow style are defined by the NTextStyle object properties associated with that text. Therefore it is recommended to use default settings, which closely match the default text properties of the displayed text in order to minimize the amount of the XML formatted text and thus to improve performance.
The tag controlling the font style is naturally the well known HTML <font> tag, which accepts several font attributes, which we'll discuss one by one in the following paragraphs.
Font Face and Size Attributes
The font face and font size attributes allow you to modify the font name and size respectively used to render the text enclosed in the font start and end tags. For example:
| XML |
Copy Code
|
<font face = 'Tahoma' size = '19'> TAHOMA FONT </font>
<font face = 'Impact' size = '22'> IMPACT FONT </font>
|
will display the following text:
The font color attribute changes the color used to draw the text enclosed in the font start and end tags. For example:
| XML |
Copy Code
|
<font face = 'Tahoma' size = '19' color = 'red'> TAHOMA FONT </font>
<font face = 'Impact' size = '22' color = 'blue'> IMPACT FONT </font>
|
will display the following text:
you can also use RGB values when specifying the font color:
| XML |
Copy Code
|
<font face = 'Tahoma' size = '19' color = '#FF0000'>TAHOMA FONT</font>
<font face = 'Impact' size = '22' color = '#0000FF'>IMPACT FONT</font>
|
which will display the same text.
Font Gradient Attribute
The font gradient attribute allows you to specify a gradient fill style on the text enclosed in the font start and end tags. The following example applies horizontal and vertical gradients to the 'TAHOMA FONT' and 'IMPACT FONT' texts:
| XML |
Copy Code
|
<font face = 'Tahoma' size = '19' gradient = '0, 0, white, red'>TAHOMA FONT</font>
<font face = 'Impact' size = '22' gradient = '0, 0, white, blue'>IMPACT FONT</font>
|
displays the following text:
you can also use the name of the gradient style instead of its numeric value:
| XML |
Copy Code
|
<font face = 'Tahoma' size = '19' gradient = 'horizontal, 0, white, red'>TAHOMA FONT</font>
<font face = 'Impact' size = '22' gradient = 'vertical, 0, white, blue'>IMPACT FONT</font>
|
The attribute parameters are in the same order as when you use the NGradientFillStyle class, which increases the readability of the xml text, but is slower to parse.
Font Hatch Attribute
The font hatch attribute allows you to specify a hatch fill effect on the text enclosed in the font start and end tags. The following example applies checkerboard and cross hatch styles on the 'TAHOMA FONT' and 'IMPACT FONT' texts.
| XML |
Copy Code
|
<font face = 'Tahoma' size = '19' hatch = 'largecheckerboard, white, red'>TAHOMA FONT</font>
<font face = 'Impact' size = '22' pattern = 'cross, white, blue'>IMPACT FONT</font>
|
Font Border Attributes
Besides the control over the filling applied on the text you can also modify the border (outline) of the font by using the border, bordercolor, borderpattern, and borderfactor attributes. Their meaning is the same as the Width, Color, Pattern and Factor properties in the NStrokeStyle class. The following XML will render text with different border width and color:
| XML |
Copy Code
|
Text borders can be with different <br>
<font face = 'Impact' gradient = '0, 1, White, Navy' size = '33'>
<font border = '2' bordercolor = 'red'>
WIDTH
</font>
and
<font bordercolor = 'magenta' border = '1'>
COLOR
</font>
</font>
|
displays the following text:
Font Shadow Attributes
One of the strong features of the text support in Nevron Graphics is the ability to apply shadows on texts, which greatly increases the visual quality of the generated images. Working with shadows is fairly easy and requires you to set the shadow style parameters by using the shadow related attributes of the font tag. The following attributes control the shadow properties: shadowtype, shadowfadelength, shadowoffset and shadowcolor and they have the same meaning as the Type, FadeLength, Offset and Color properties of the NShadowStyle class.
The following XML formatted text shows how to work with shadows:
| XML |
Copy Code
|
There are several types of shadows:<br>
<font shadowoffset = '10, 10' shadowfadelength = '10' face = 'Impact' gradient = '0, 1, White, Navy' size = '33'>
-
<font shadowtype = 'solid'>Solid Shadow</font><br>
-
<font shadowtype = 'linearblur'>Linear Blur Shadow</font><br>
-
<font shadowtype = 'radialblur'>Radial Blur Shadow</font><br>
-
<font shadowtype ='gaussianblur'> Gaussian Blur Shadow </font><br>
</font>
|
This XML will produce the following text:
Font Background Fill And Border
By default all text fragments do not have a background. You can modify the text background in the same way as with the text foreground settings (using the color, gradient, hatch and border attributes). The only difference is that you need to prefix these attributes with "back-". The following XML defines a white blue text on a white to gray background:
| XML |
Copy Code
|
| Following is <font color = 'lightgreen' back-gradient = '0, 0, lightgray, black'>Green Text on White to Gray Background</font> |
This XML will produce the following text:
Font Style Control
Almost every developer is familiar with the HTML <B>, <I>, <U> and <STRIKE> tags (font style modifiers). The nice thing about these HTML tags is that they modify the base font style without much typing, which also increases the readability of the XML text. The text rendering engine supports all of them, but you must keep in mind that this is XML after all so you must always close the opening style modifier tag. The following text shows how to work with font style modifiers:
| XML |
Copy Code
|
Demonstrates how to use
<font color = 'red'><b>bold</b></font>
, <font color = 'green'><i>italic</i></font>
, <br><font color = 'blue'><u>underline</u></font>
and <font color = 'darkorange'><strike>strikeout</strike></font>
tags
|
This results in the following text:
Superscript and Subscript
One of the common tasks when displaying text is that sometimes you have to use subscript or superscript texts. These types of texts are necessary when writing mathematical formulas or when you have some other type of text that should not be placed on the text baseline (like author notes). The text rendering in XML mode supports subscript <sub> and superscript <sup> tags. These tags alter the font size and baseline automatically depending on current font. Note that you can also have nested <sub> and <sup> tags.
The following text shows how to display the famous Einstein formula: E = MC2
| XML |
Copy Code
|
World's most famous formula :
<font size = '25' color = 'red'>
<b>E = MC<sup>2</sup></b>
</font>
<br>
This text uses <sup>sup</sup> and
<sub>sub</sub> tags
|
This results in the following rendered text:
Bullets and Numbering
Sometimes when writing text it is often necessary to have automatic numbering or simply a visual tip helping the end user to better comprehend the text. In such cases you can take advantage of the built-in bullet and bullet numbering features of the XML formatted text. As you might guess bullets are controlled with the
<UL> and
<LI> tags like in HTML. The text rendering engine supports nine types of bullets as follows:
| Bullet type |
Description |
| None |
No bullet only text indent |
| Disk |
Circle bullet |
| Star |
Star bullet |
| Square |
Square bullet |
| Decimal |
Bullet with text decimal numbering starting from 1. For example 1, 2, 3, 4 etc. |
| LowerRoman |
Bullet with lowercase text Roman numbering starting from i. For example i, ii, iii, iv etc. |
| UpperRoman |
Bullet with uppercase text Roman numbering starting from I. For example I, II, III, IV etc. |
| LowerAlpha |
Bullet with lowercase text alpha numbering starting from a. For example a, b, c, d etc. |
| UpperAlpha |
Bullet with uppercase text alpha numbering staring form A. For example A, B, C, D etc. |
You control the bullet style by changing the liststyletype attribute of the <UL> tag. All bullets enclosed in this tag share this list style type. The following text shows how to create bulleted text:
| XML |
Copy Code
|
Decimal bullets
<ul liststyletype = 'Decimal'>
<li color = 'red'> Decimal Bullet 1 </li>
<li color = 'blue'> Decimal Bullet 2 </li>
<li color = 'blue'> Decimal Bullet 3 </li>
</ul><br/>
LowerRoman bullets
<ul liststyletype = 'LowerRoman'>
<li color = 'red'> LowerRoman Bullet 1 </li>
<li color = 'blue'> LowerRoman Bullet 2 </li>
<li color = 'blue'> LowerRoman Bullet 3 </li>
</ul><br/>
LowerAlpha bullets
<ul liststyletype = 'LowerAlpha'>
<li color = 'red'> LowerAlpha Bullet 1 </li>
<li color = 'blue'> LowerAlpha Bullet 2 </li>
<li color = 'blue'> LowerAlpha Bullet 3 </li>
</ul>
|
This XML results in the following text rendered by the control:
The XML formatted text support simple shapes that can be nested inside the rendered text. The following XML fragment shows how to display text with simple shapes
| XML |
Copy Code
|
|
Bar Shape <shape shape='bar' size = '20pt, 20pt' color = 'Red' bordercolor = 'DarkRed'/><br/>
Triangle Shape <shape shape='triangle' size = '20pt, 20pt' color = 'Green' bordercolor = 'DarkGreen'/><br/>
InvertedTriangle Shape <shape shape='invertedtriangle' size = '20pt, 20pt' color = 'Blue' bordercolor = 'DarkBlue'/><br/>
Ellipse Shape <shape shape='ellipse' size = '20pt, 20pt' color = 'Red' bordercolor = 'DarkRed'/><br/>
Cross Shape <shape shape='cross' size = '20pt, 20pt' color = 'Green' bordercolor = 'DarkGreen'/><br/>
DiagonalCross Shape <shape shape='diagonalcross' size = '20pt, 20pt' color = 'Blue' bordercolor = 'DarkBlue'/><br/>
LineCross Shape <shape shape='linecross' size = '20pt, 20pt' color = 'Red' bordercolor = 'DarkRed'/><br/>
LineDiagonalCross Shape <shape shape='linediagonalcross' size = '20pt, 20pt' color = 'Green' bordercolor = 'DarkGreen'/><br/>
Star Shape <shape shape='star' size = '20pt, 20pt' color = 'Blue' bordercolor = 'DarkBlue'/><br/>
|
This XML formatted text will result in the following image:
XML formatted texts allow you embed images alongside texts. For this purpose however images must first be registered in a global image repository. The following steps shows how to accomplish that:
1. Registering images to the image repository:
| C# |
Copy Code
|
|
Bitmap austriaFlag = new Bitmap("c:\\CountryFlags\\Austria.png");
Bitmap finlandFlag = new Bitmap("c:\\CountryFlags\\Finland.png");
Bitmap franceFlag = new Bitmap("c:\\CountryFlags\\France.png");
NImageRepository.Instance.RegisterImage("Austria", austriaFlag);
NImageRepository.Instance.RegisterImage("Finland", finlandFlag);
NImageRepository.Instance.RegisterImage("France", franceFlag);
|
| VB.NET |
Copy Code
|
|
Dim austriaFlag As New Bitmap("c:\\CountryFlags\\Austria.png")
Dim finlandFlag As New Bitmap("c:\\CountryFlags\\Finland.png")
Dim franceFlag As New Bitmap("c:\\CountryFlags\\France.png")
NImageRepository.Instance.RegisterImage("Austria", austriaFlag)
NImageRepository.Instance.RegisterImage("Finland", finlandFlag)
NImageRepository.Instance.RegisterImage("France", franceFlag)
|
2. Now you can use the registered images in XML formatted texts:at uses the aliases you should remove the images from the repository:
| XML |
Copy Code
|
|
Austria country flag: <img size = '40, 30' alias = 'Austria'/><br/>Finland country flag: <img size = '40, 30' alias = 'Finland'/><br/>France country flag: <img size = '40, 30' alias = 'France'/><br/>
|
The above XML produces the following image:
3. Finally you must clear the repository from aliases that are no longer in use. A good place to do that is inside the form Dispose method:
| CS |
Copy Code
|
|
NImageRepository.Instance.UnRegisterImage("Austria");
NImageRepository.Instance.UnRegisterImage("Finland");
NImageRepository.Instance.UnRegisterImage("France");
|
| VB.NET |
Copy Code
|
|
NImageRepository.Instance.UnRegisterImage("Austria")
NImageRepository.Instance.UnRegisterImage("Finland")
NImageRepository.Instance.UnRegisterImage("France")
|