#262 – Font Sample Sheets

March 31, 2011 Leave a comment

When selecting fonts, it’s helpful to have sample sheets handy that show the font at various sizes and displaying sample text.

I’ve created sample sheets for the 25 fonts installed with Windows 7.  There is a single page for each font, showing samples of text rendered with that font.

Below is a screen capture of the page for the Verdana font.  To download a Word document containing all 25 sample sheets, click here:  FontSamples

Here’s a .pdf version: FontSamples PDF

(NOTE: If you open the document on a system that does not have all of the fonts installed, they will not be displayed properly).

(Click the image below to see the sheet at full size)

Filed under Fonts Tagged with , , ,

#261 – Standard Fonts in Windows 7

March 30, 2011 1 Comment

A number of fonts are installed by default in Windows 7.  Excluding fonts containing exclusively non-English characters (e.g. Arabic, Asian), the standard fonts are listed below.

  • Arial
  • Calibri
  • Cambria
  • Candara
  • Comic Sans MS
  • Consolas
  • Constantia
  • Corbel
  • Courier New
  • Ebrima
  • Franklin Gothic Medium
  • Gabriola
  • Georgia
  • Impact
  • Lucida Console
  • Lucida Sans
  • Microsoft Sans Serif
  • Palatino Linotype
  • Segoe Print
  • Segoe Script
  • Segoe UI
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

Below are some sample sheets that show samples for each font, in four styles: Regular, Bold, Italic, and Bold-Italic.  All fonts are rendered in 12 pt, on a 96 dpi monitor.

Filed under Fonts Tagged with , ,

#260 – The Concept of Fonts

March 29, 2011 Leave a comment

A typeface is a set of glyphs in a particular style, used to render characters.  A typeface is also sometimes known as a font family.

In Windows, a font is a set of glyphs defined by the combination of a typeface, font weight and font style (or slope).

A font weight dictates the thickness of the characters and includes choices like:

  • Thin
  • Extra Light / Ultra Light
  • Light
  • Normal / Regular
  • Medium
  • Demi-Bold / Semi-Bold
  • Bold
  • Extra-Bold / Ultra-Bold
  • Black / Heavy
  • Extra-Black / Ultra-Black

A font style/slope dictates the angle that the glyphs are slanted includes choices:

  • Italic
  • Normal / Regular
  • Oblique

When we combine typeface, weight and style, we then end up with different fonts, for example:

  • Cambria Regular  (normal weight and style)
  • Cambria Bold  (normal style)
  • Cambria Bold Italic
  • Cambria Italic  (normal weight)

Samples of these fonts are shown below.

 

Filed under Fonts Tagged with ,

#259 – Setting Typography Properties for Text Rendered with an OpenType Font

March 28, 2011 1 Comment

WPF includes a Typography class, which allows setting various attached properties for textual elements.  These properties only affect text that is rendered using an OpenType font.

The Typography class lets you specify things like:

  • Superscripts and subscripts
  • Use of capitals and spacing between capitals
  • Ligatures (combined glyphs)
  • Swashes (decorative elements)
  • Alternate glyphs
  • Historical glyphs
  • Proportional spacing for numerals
  • Turning kerning off/on

For example, we can specify that some text be rendered using small capitals, as follows.

		<TextBlock Margin="20" Width="250" Height="55"
		    FontFamily="Constantia" FontSize="14"
		    TextWrapping="Wrap">
			We secure our friends not by accepting favors but by doing them.
			<Run Typography.Capitals="SmallCaps">--Thucydides</Run>
		</TextBlock>

Filed under Controls Tagged with , , , ,

#258 – RichTextBox Allows Richer Formatting than TextBox

March 27, 2011 Leave a comment

The TextBox control allows you to set various properties to change the font used to display its text.  If you want to format only a subset of the text, or format text items separately, you need to use the RichTextBox control.

The RichTextBox control can only have one child element, which must be a FlowDocument.  The contained document is referenced by the Document property, which is the RichTextBox’s content property.

Here’s a simple example that compares a TextBox to a RichTextBox.

		<TextBox Text="This is a text box.." FontStyle="Italic" FontFamily="Cambria" FontSize="16"
			     Width="150" Height="50" Margin="10"/>

		<RichTextBox  Width="150" Height="75" Margin="10">
			<FlowDocument>
				<Paragraph>
					This is a <Bold>RichTextBox</Bold>, which allows formatting
					individual bits of text <Italic>separately</Italic>.
				</Paragraph>
			</FlowDocument>
		</RichTextBox>

Filed under Controls Tagged with , , , ,

#257 – TextBox Control Allows Basic Text Entry and Editing

March 26, 2011 Leave a comment

You can use the Label and TextBlock controls for displaying text.  If you want to go beyond just displaying text, and want a user to be able to enter or edit text, you can use the TextBox control.

Here’s an example of a simple single-line TextBox.  The Text property represent the current content of the TextBox.

		<TextBox Width="180" Margin="20" Text="Pete Zaria"/>


Note that the user can highlight and edit the text in the control.

We can also make the TextBox larger and set its TextWrapping property, so that it displays multiple lines.  In the example below, we also turn on a vertical scrollbar.  Also note that we set the text as the content of the control.

		<TextBox Width="160" Height="120" Margin="20" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto">
			By three methods etc.
		</TextBox>


We can also change the font, using one or more font-related properties (e.g. FontFamily, FontSize, FontStyle, FontWeight).

Filed under Controls Tagged with , ,

#256 – Use a FixedDocument to Display Content at Fixed Locations

March 25, 2011 2 Comments

Where FlowDocument allows displaying content that flows automatically from page to page, FixedDocument allows displaying multiple pages of content in a WYSIWYG (What You See Is What You Get) format.  You add content to the document page by page, and specify exactly where each piece of content should be located.

The FixedDocument includes a series of PageContent elements, each of which contains a FixedPage element.

	<FixedDocument>
		<PageContent>
			<!-- 7" x 9" page -->
			<FixedPage Width="672" Height="864">
				<StackPanel Orientation="Vertical" FixedPage.Left="280" FixedPage.Top="150">
					<Label FontFamily="Arial" FontWeight="Bold" FontSize="18" Content="Jane Eyre" HorizontalAlignment="Center"/>
					<Label FontFamily="Arial" FontStyle="Italic" FontSize="14" Content="Charlotte Brontë" HorizontalAlignment="Center"/>
				</StackPanel>
			</FixedPage>
		</PageContent>
		<PageContent>
			<FixedPage Width="672" Height="864">
				<StackPanel Margin="48">
					<TextBlock FontFamily="Cambria" FontSize="14" Width="576" TextWrapping="Wrap">
						There was no possibility etc.
					</TextBlock>
					<TextBlock FontFamily="Cambria" FontSize="14" Width="576" TextWrapping="Wrap" Margin="0,25,0,0">
						I was glad of it etc.
					</TextBlock>
					<Image Margin="0,25,0,0" Source="Twilight.jpg" />
				</StackPanel>
			</FixedPage>
		</PageContent>
	</FixedDocument>

The document shows up in a default viewer.  Here’s page 1:


And page 2:

Filed under Controls Tagged with , , ,

#255 – Flow Text Around an Image in a FlowDocument

March 24, 2011 Leave a comment

You can flow text around a user control in a FlowDocument using a Floater element.  One common use of a Floater is to flow text around an image.

You include a Floater as a child element of the Paragraph that contains the text that should flow around the image.  Below is a fragment of the content of a FlowDocument, which contains the Floater.

			<Paragraph>
				<Floater HorizontalAlignment="Left" Width="200">
					<BlockUIContainer>
						<Image Source="Twilight.jpg" />
					</BlockUIContainer>
				</Floater>
The said Eliza, John, and Georgiana etc. etc.
			</Paragraph>

Filed under Controls Tagged with , , , ,

#254 – Types of Containers for Hosting a FlowDocument

March 23, 2011 Leave a comment

There are four different controls that you can use to host a FlowDocument:

  • FlowDocumentReader – Reader with support for multiple columns, paging, find and zooming
  • FlowDocumentPageViewer – Reader with support for multiple columns, paging and zooming
  • RichTextBox – Content displayed in an editable format
  • FlowDocumentScrollViewer – Content displayed  with a vertical scrollbar

Here are screenshots of each of the containers:

Filed under Controls Tagged with , , , , , ,

#253 – FlowDocument is Hosted in a FlowDocumentReader Automatically

March 22, 2011 Leave a comment

Because FlowDocument does not derive from UIElement, you can’t include it in a Panel control.  You can use a FlowDocument as the main content in any ContentControl.  If you do this, the FlowDocument will automatically be hosted in a FlowDocumentReader.

The FlowDocumentReader displays some portion of a FlowDocument and provides controls to either page or scroll through the rest of the document.  It also supports displaying the document in multiple columns and provides an easy way to adjust the font size.

The image below shows a FlowDocumentReader hosting a FlowDocument.

The various widgets on the toolbar at the bottom are described below.

  • Find text within the document    
  • Navigate between pages  
  • Single Page / Double Page / Scrolling  
  • Zoom (make text larger)   

Filed under Controls Tagged with , , ,

← Older posts