Inline Properties

posted 2007-03-30

Now that we're roughly familiar with the inline elements, let's look at the formatting properties each of them expose.

Properties from TextElement

TextElement is the superclass for all classes used for text (with the exception of TextBlock). TextElement defines formatting properties that can be applied universally to text.

FontFamily

Controls what is commonly known as the "font" of the text. Like CSS, you can give a comma-separated list of alternatives such as FontFamily="Calibri, Verdana, Helvetica, Arial". Note that, unlike CSS, you cannot use generic names such as Serif, Sans-Serif, and Monospace. Like CSS, there are a few generic names you can use: Global Monospace, Global Serif, Global Sans Serif, and Global User Interface.

FontSize

The size of the font in "WPF pixels" (1/96 of an inch). Note that this is not equal to the traditional font size measure of points (1/72 or 1/72.27 of an inch depending on how precise you want to be). As with other measures, you can use shorthand in markup to get sizes in points, inches, etc (e.g. FontSize="12pt" or FontSize="2cm").

Foreground

The color of the text. This property is actually a Brush, which means you can do cool things like draw text with a gradient.

FontWeight

Controls the darkness of the font face -- typically used to make text bold. This is a value between 1 and 999, or one of the following value shortcuts: Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold, Black, ExtraBlack. Most fonts only have two weights (Normal and Bold) -- but the nice ones that designers like have many more. If the font doesn't have the weight you request, WPF will choose the weight closest to the value you specified.

FontStyle

Used to italicize text. There are three values: Normal, Italic, and Oblique. Almost every font defines special characters for the Italic style, while Oblique draws the same characters as Normal, but on a slant (inevitably looking worse, and being less readable, than the italic face). The difference is illustrated below:

Examples of Italic, Oblique, and Normal-styled text

FontStretch

If a font has multiple faces with different widths, this allows you to choose between them. Valid values are between 1 and 9, but like FontWeight, there are named shortcuts: UltraCondensed, ExtraCondensed, Condensed, SemiCondensed, Normal, SemiExpanded, Expanded, ExtraExpanded, UltraExpanded. Unfortunately, only high-end fonts come with these faces (WPF will not algorithmically stretch a font).

TextEffects

Used to apply an effect to a piece of text. See my previous post on TextEffects for a thorough description.

Typography

This property is very large, and merits (several) posts of it's own. Basically, this property exposes the many of the advanced features available from OpenType fonts (aka, expensive fonts you probably don't have but wish you did).

Here's a list of the various options available through the property (I've already posted examples for some of these properties, I'll add links as I write more samples -- Warning: the XAML in those older posts is probably no longer valid due to namespace changes and property renames):

Phew, that was a long list! Lucky for you, there won't be a test any time soon. Moving on ...

Properties from Inline

The Inline superclass defines three new properties that can be applied on inline text.

TextDecorations

This property lets you draw a horizontal line around the text -- it's mostly used to underline a word. There are four possible line positions: Underline, Overline, Strikethrough, and Baseline. Underline draws a bit below the baseline so the line doesn't touch the (most of) the actual letters, while Baseline is drawn directly on the text baseline.

You may have noticed that the name of this property is plural, that's because you can set more than one decoration for the text. Unfortunately, the syntax for this isn't as clean as TextDecorations="Underline Overline", you have to use much more verbose syntax:

<Run>
  <Run.TextDecorations>
    <TextDecoration Location="Underline" />
    <TextDecoration Location="Overline" />
  </Run.TextDecorations>
  Help! I'm surrounded by lines
</Run>

Also, an individual TextDecoration has a Pen property, meaning you can choose the Brush used to draw the line, change the Thickness, or each use the DashStyle property to change how your underlines work (it will surely look awesome on your MySpace).

BaselineAlignment

This property allows you to vertically position an inline element within the line. The legal values are: Bottom, Baseline, Center, Top, Subscript, Superscript, TextBottom, and TextTop. The image shows the values in action:

Illustration of the values of the BaselineAlignment property

There are some fine typographic distinctions between TextTop, Top, and Superscript (as well as their mirror values for the bottom) -- but I'm guessing you don't really care about those (they're pretty much the same as CSS, if you really must know).

You probably won't use this property very much, but it comes in handy when you're dealing with non-text objects (i.e. things within an InlineUIContainer), or if you're trying to create a fake subscript or superscript effect because your font doesn't support the real thing.

FlowDirection

This property is useful if you're including text from languages that use a right-to-left reading order (such as Arabic or Hebrew). It's also exposed on many other elements, such as FlowDocument and all the Block-derived classes.

"Content" properties of inlines

Except for LineBreak, each Inline exposes a property that allows you to set it's content. Unlike Control.Content, which is of type object, each of these properties is strongly-typed to the kind of content it can contain:

Additionally, Hyperlink exposes a few properties (such as NavigateUri) so you can actually make a link functional.

Once again, we'll skip over Figure and Floater for now -- we don't have enough background for them yet.

Differences from HTML

With the exception of TextEffects and Typography, these properties are quite similar to their CSS counterparts. You'll run into slight spelling annoyances (CSS uses dashes in their names and values, while WPF does not, href is much easier to type than NavigateUri) -- but you should feel pretty comfortable.

The exceptions would be the properties that don't have CSS analogues: TextEffects and Typography. However, these properties aren't used very frequently, so you rarely need to mess with the defaults.