Vista Typography and Documents

Developers have one major drawback that they are notoriously known for. Most

developers have little or no design sense which also translates into the user

experience that their applications get. However, with Windows Vista and .NET

3.0, developers can now start developing applications that take advantage of the

capabilities offered by the system to make their applications look richer.

Windows Presentation Foundation or WPF is the new core stack of .NET 3.0 that

allows this. This article takes a look at the typography and document features

of WPF that you can leverage for your app.

Document balancing



HTML has been around for ages and has become a way to show any kind of content.
However, there are a number of issues that it has not been able to solve. For

instance, you might be using a very high resolution screen and can browse over

to a news site. But because of the layout of the site, you might notice that

your Web page uses only a part of the screen and the rest is filled with white

space. You also cannot flow content into columns that render themselves based on

screen resolution, font size and available application canvas size automatically

when you are using HTML.

Applies To: Vista developers USP: Learn to use WPF in .NET 3.0  Primary Link: msdn.microsoft.com/windowsvista/experience Google Keywords: windows presentation foundation

This is where WPF's FlowDocument Reader element comes into play. This

element can render content automatically based on a number of differentinputs or

properties (either set or detected). For instance, type in the following code

into Notepad and save it as DOC.XAML.

MinZoom="80" MaxZoom="200" ZoomIncrement="10"

Name="Viewer" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"



xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">





TEST TEXT ...


TEST TEXT ...


TEST TEXT ...


TEST TEXT ...

Make sure you have lots of text in each paragraph and there are a good number

of paragraphs. Now double click on the XAML file to execute it. As you will see,

the XAML viewer opens up a special version of IE that allows you to view the

content. The viewer has features like font size adjustment, page modes, and text

search built in. When you view the content, you will see that the content is

adjusted into columns that span the available space. Not only that, but the

columns also follow the rules you have set (min height, min width, etc.) so that

they render the content correctly. In fact, when you adjust the font size or the

application size or even screen resolution, the content is re-rendered

automatically to fit the application.

Two views of same content with app canvas and font size changing. Content is automatically rendered into columns & pages without any code or human intervention

This would be impossible if you do it with HTML. Note that the document

features of WPF allow for all sorts of rich content-including lists, tables,

floaters, figures, images and all the normal font formatting. For instance, to

add a floater element in the content, simply add the following within one of the

paragraph tags:

BorderBrush="Black"



FontStyle="Italic" Width="120" HorizontalAlignment="Right"


Margin="5, 0, 0, 5" Padding="10">


Floater


Some Floater text in the middle

Rich typography



WPF also lets you create extremely rich typography using the new OpenType fonts.
Unlike TrueType fonts which are basically static bitmaps, OpenType fonts

actually render themselves based on some rules. Each font also has a set of

properties that can be set that allows you to manipulate their behavior, exactly

like you might do with a programmable object. For instance, consider the

following piece of code.

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">






Verdana


/>


Palatino LinoType


/>


Segoe Script

Here, we have defined three rich text box controls-each with a different

font. The first uses the standard TTF Verdana, and the other two use OpenType

fonts “Palatino LinoType” and “Segoe Script”. Save this as Typo. XAML

and run it. You will be able to enter any text into them as expected and the

fonts will render as per their types. Now set properties on the textboxes that

use OpenType fonts to start rendering them differently. For instance, change the

middle textbox to:

FontSize="72" Typography.NumeralStyle="OldStyle" />

Two views of same content with app canvas and font size changing. Content is automatically rendered into columns & pages without any code or human intervention

This adds a new typography property to the font. Now try entering a few

numbers into this text box and see the difference in the rendering. Add another

property so that the line now looks like

FontSize="72"



Typography.NumeralStyle="OldStyle" Typography.Fraction="Stacked"
/>

Now add not only enter numbers, but also fractions like 1/2, 3/4, 5/6, etc.

They automatically get stacked as requested. Change the code again to look like:

Typography.DiscretionaryLigatures="True"/>

Now enter some text into the last textbox. You will see that the font

dynamically renders itself based on alphabet that come before or after the

current one. For instance, type in the text “this is so cool and different”

into this box. You will notice that every instance of the letter “o” and “s”

are different and the double-f and the “th” are joined together as they

should be.

We've only touched the tip of the very rich capabilities of Vista and its

document and typography features. As developers you now have access to all of

this and can take advantage of them to make your



application richer and better.

Vinod Unny, Enterprise Infotech