In this post we will talk about

  • Fonts
  • Web Fonts
  • Text Transformations

Fonts

We can use any fonts which are available on the users system. We also specify a font family and in that case the user’s browser will use any font available from that font family. The three most popularly used fonts are:

 

Serif Fonts

These fonts are generally used in articles or paragraphs as these provide easier reading. Some of the Serif fonts are

  • Baskerville
  • Georgia
  • MS Serif
  • New York
  • Palatino Linotype
  • Times
  • Times New Roman

If we want to default to any available font from this family available on the user system then we can use serif.

Sans-Serif Fonts

These fonts are generally used for headlines as they stand out. Some of the Sans-Serif fonts are

  • Arial
  • Arial Black
  • Century Gothic
  • Geneva
  • Helvetica
  • Impact
  • Lucida Grande
  • Palatino Linotype
  • Tahoma
  • Trebuchet MS
  • Verdana

If we want to default to any available font from this family available on the user system then we can use sans-serif.

Monospace Fonts

These fonts are good for writing code. Some of the Monospaced fonts are

  • Andale Mono
  • Cooperplate
  • Courier
  • Courier New
  • Lucida Console
  • Monaco

If we want to default to any available font from this family available on the user system then we can use monospace.

So with this all this new knowledge on fonts let us go ahead and change the fonts in our html.

p

{

color:  #24981f;

font-family: Georgia 'Times New Roman' serif;

font-size: medium;

}

h1

{

color: #0f769d;

font-family: Impact Tahoma 'Century Gothic' sans-serif;

font-size: larger;

}

h2

{

color: #1197c9;

font-family: Impact Tahoma 'Century Gothic' sans-serif;

font-size: large;

}

And our page with new fonts looks something like below

Fonts

Fonts

Web Fonts

The fonts mentioned above need to be present on the user’s system, so that the web page could use it but in the case of Web Fonts we can specify to download these fonts on the user’s machine. But sometimes this might not be the right choice as this might lead to ownership issues because of the font’s ownership. The best solution around that is to use a Font Server and better yet use Google font server. To get the specific font all we need to do is get the link of a particular font from the Google font server and include it in the web page so that it is downloaded as and when it is needed.

Let’s try to use Web Fonts and for that we need to go to http://www.google.com/fonts. On the left hand panel we can see various options to filter and customize our fonts.

 

Google Web Fonts

Google Web Fonts

We also have multiple option to select the text we want to analyze, the size we want to analyze and the various way we can sort it. We can also see it in poster, paragraph, sentence or word.

 

Google Web Fonts

Google Web Fonts

To use a particular type of font we need to add it to the collection and click on Use at the bottom right corner of the page.

 

Google Web Fonts

Google Web Fonts

Once we do that we see all the instructions as to how we can use that font in our web page. And before we use it we can include or exclude the stuff we want and also see the load time of that font in the web page.

 

Google Web Fonts

Google Web Fonts

We will go ahead and use this font in our webpage for paragraph and headings.

<head>

<meta charset="utf-8" />

<title>Learn CSS3</title>

<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>

<style>

p

{

color:  #24981f;

font-family: 'Noto Serif', serif;

font-size: medium;

}

h1

{

color: #0f769d;

font-family: 'Noto Serif', serif;

font-size: larger;

}

h2

{

color: #1197c9;

font-family: 'Noto Serif', serif;

font-size: large;

}

It works really well even after the fact this font is not present on my system.

 

Web Fonts

Web Fonts

Font Size

Just selecting the font family is enough, for our webpage to look really amazing we also need set the font size appropriately as well. We can specify the font size in

  • em – It is a scalable unit. 1em = current font size. So if the current font size is 16 px then 1em = 16px and 2em = 32px.
  • percentage – It is similar to em but the current font size is 100%. So if the current font size is 16px then 100% = 16px and 200% = 32px.
  • px – These are the fixed sized unit where 1px = one on screen.
  • keywords (small, medium, large, etc) – These are also fixed sized units. One point = 1/72 of an inch.

Font Color

We can also set the font color in our styles. The various ways to set font color are

  • rgb – We need to pass the red, green and blue hexadecimal values of the color
  • rgba – This is similar to rgb with an additional attribute of a which repsents the opacity. The value of a ranges between 0(Transparent) and 1(Opaque).

Font Style

We could also use Font style. The various font styles that we can set in our font are

  • italic – This will italicize the content.
  • bold – This will make the content bold.

Also if font style is already set before in the hierarchy then we can reset it to normal which will remove any font style that is already present.

Other Text Decorations

We can use to change the text to

  • text-transform: lowercase
  • text-transform: uppercase
  • text-transform: capitalize
  • font-variance: small caps
  • text-decoration: overline

Below is the usage of all of these

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title></title>

<style>

h1

{

text-transform: capitalize;

}

h2

{

text-transform: uppercase;

}

h3

{

font-variant: small-caps;

}

h4

{

text-decoration: overline;

}

p

{

text-transform: lowercase;

}

</style>

</head>

<body>

<article id="first-article">

<section id="header-section">

<h1>Learn everything about CSS</h1>

<h2>Learn everything about CSS</h2>

<h3>Learn everything about CSS</h3>

<h4>Learn everything about CSS</h4>

<p>

LEARN EVERYTHING ABOUT CSS

</p>

</section>

</article>

</body>

</html>
Text Decorations

Text Decorations

Kerning

The “font-kerning” property controls metric kerning, kerning that utilizes adjustment data contained in the font.

    • letter-spacing: 1px;
    • word-spacing: 2px;

 

Leading

The CSS line-height property is similar to leading in desktop publishing – it determines the “line height”. This results in lines of text appearing closer together or further apart.

    • line-height: 1.5

 

    • line-height: 150%

 

li { letter-spacing: -1px; word-spacing: 5px; line-height: 150%; }

 

Text Decorations

Text Decorations

Box Model

In CSS3 we can consider our page to consist a set of boxes. Every element that we have could be considered as an individual box. So an image will be a box so will be a paragraph or any other element on our page.

Border

It is the line around each of these boxes. It can be set for all four sides of the element or individual side.

  • border
  • border-top
  • border-right
  • border-bottom
  • border-left

Margin

All these boxes are separated by space which is known as margin. It can be set for all four sides of the element or individual side. An inline box cannot have top and bottom margins.

Padding

It is the space between the border and the content of the boxes. It can be set for all four sides of the element or individual side. An inline box cannot have top and bottom paddings.

Block level and Inline Tags

The various block level tags are:

  • p
  • div

The various inline tags are as below. These tags cannot have top and bottom margin.

  • strong
  • em
  • image

By default we have a square box for the elements however we can create a rounded corner box for the elements using the following style

.box-rounded-corner

{

border-radius: 25px;

background-color: green;

}

 

And

<ul>

<li>learn everything about css</li>

<li>learn everything about css</li>

<li>learn everything about css</li>

<li>learn everything about css</li>

</ul>

 

 

Round Corners

Round Corners

Let us apply few of the these changes on our initial page

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Learn CSS3</title>

<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>

<style>

p

{

color:  #24981f;

font-family: 'Noto Serif', serif;

font-size: medium;

}

h1

{

color: #0f769d;

font-family: 'Noto Serif', serif;

font-size: larger;

text-align: center;

padding: 5px

}

h2

{

color: #1197c9;

font-family: 'Noto Serif', serif;

font-size: large;

}

footer p

{

font-size: x-small;

}

.article-title

{

background-color: #c4c4c4;

}

.meta-article

{

font-style: oblique;

}

.meta-author

{

font-style: normal;

}

#first-article

{

background-color: #e8dede

}

ul :nth-child(odd) {background-color: #c4c4c4}

ul :nth-child(even) {background-color:#e8dede}

.webPage {

font-size: 16px;

color: #117c13;

background-color: #000000;

width: 800px;

margin-top: 25px;

margin-left: auto;

margin-right: auto;

border:  5px solid black;

border-radius: 25px;

background-color: green;

box-shadow: 0 0 15px 5px lightGray

}

</style>

</head>

<body>

<article id="first-article">

<section id="header-section">

<h1>Learn everything about CSS</h1>

<div>

<span>Posted on 12th Sep 2013</span>

<span>by</span>

<span>Abhishek Shukla</span>

</div>

</section>

<section>

<p>&nbsp;</p>

<p>In this section we will learn enough about CSS3 to get a good foundation for working on it.

<img alt="CSS3" title="CSS3" src="http://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Logo.jpg" /></p>

<p>CSS 3 came along with HTML5 and has enhanced the capabilities that are available in HTML5.

In this course we will have a look at the various basics of CSS3.

We will also get our hands dirty with some practical examples.</p>

</section>

<aside>

<section>

<h2>About CSS3</h2>

</section>

<section>

This section is generally used for the side panels. Somethime it is also used to give additional information.

<ul>Here is a list of few useful concepts in CSS

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Padding</li>

<li>Positioning</li>

</ul>

</section>

</aside>

</article>

<footer>

<p>Copyright 2013 Abhishek Shukla</p>

</footer>

</body>

</html>
Border Margin Padding

Border Margin Padding

The code for this post can be found here or @ mirror

Any questions. comments or feedback are most welcome.

 

In this section we will look WPF text formatting in layout services. We will have a look at text rendering feature, text layout services, text object model and text editing controls.

Rich Text

WPF uses ContentModel to present the text so WPF is does not just present the text as a plain string but allows you to take control and present whatever you want, so all the controls that use text are free to use WPF text formatting. As we can see in the image below we have used multiple fonts and color in the TextBlock inside a button. I know it looks ugly but the point is that this is the kind of capability WPF provides us with.

WPF Rich Text

WPF Rich Text

As we can see in the image above we have placed a textblock inside the button. TextBlock is your control if you want to a few letters or a few paragraphs. It supports Font Styles like FontSize, FontFamily, etc. It also offers block level formatting options. But default a TextBlock only runs a single line display but if you want to display paragraphs you need to turn on text wrapping. We can specify the TextAlignment. Till now you have seen TextBlock accepting the strings as the Text to display. That is done for the convenience for DataBinding, etc. We can provide content model to the text to provide formatting to the other part of the texts. We have individual properties which will be used to provide formatting to text sections. There is also Span which can be used to apply a format to the span of a text. We also nest these formatting like a span inside a span. As use can see that we have painted the text with LinearGradientBrush. It is evidently similar to html. Though it might look like HTML these are objects and blend well with .NET.

Class Hierarchy for WPF Text Model

Inline Text Elements

In the image below we can see the class hierarchy of the WPF Text Object Model. These are the Inline elements of the text like the short runs of text that are within the paragraph like a bold or underline. As we saw in the Core Elements section that the most of the WPF Elements derive from the FramworkUIELements but Text derive from the FrameworkContentElement. As we can see TextElement derives from FrameworkContentElement and provides properties like FontSize, FontFamily,etc. The properties in other WPF Controls provides aliases to these properties. If you go to the Control.FontSize property of a control and retrieve its DependencyObject then you will see that it derives from TextElement. Controls just provide an easy way to use these properties rather than using the cumbersome attached properties syntax. Controls do this by using the static Add Owner method of the dependency property which allows an element to declare the use of attached properties as a local property.

 

Inline class is the base the class for elements which are designed to use within a paragraph. As we can see that these elements which are designed to use in a paragraph and the most of them then further derive from Span. Span defines a children property and Span can acts a container and that is why we are able nest these elements in XAML. LineBreak lets you add line breaks between paragraphs. WPF does not consider these as paragraphs from Content Model point of view. And since Paragraph is not an inline element and so we cannot use it as the inline element. So LineBreak comes in handy and it helps to design stuff inline that looks like a paragraph. Run is an inline element which we always use but never write it. Confused? Actually Run element is the only one capable of holding a string The Span is a content model that support only inlines. Run is automatically generated when we add text strings. Let see this in action. You will see that the run elements are automatically generated by the xaml compiler when the types request it.

 

WPF Inline Text

WPF Inline Text

Block Text Elements

Blocks are paragraph level constructs like List, Tables, etc. Since these elements do not derive from inline we cannot put them into textblock so we need to place them into a FlowDocument that supports Blocks.

 

Document Viewer Controls

To display a flow document we need to use one of the DocumentViewerControls.

  • FLowDocumentScrollViewer – This displays content as continuous vertical scrolling. This one looks similar to a web browser page where we can place unlimited content and it will scroll vertically.

 

WPF FLowDocumentScrollViewer

WPF FLowDocumentScrollViewer

  • FlowDocumentPageViewer – This provides a paginating view. You can see it in lot of online reader like msdn reader. This will size the content to page according to the reading area available and font size so that no scrolling is required and it uses pagination for the documents that not fit one page.

 

WPF FLowDocumentPageViewer

WPF FLowDocumentPageViewer

  • FlowDocumentReader – This lets the user decide as to which FlowDocument style to use. This is similar to what we will get wahen we display a flow document inside a content control.

Paragraph

Paragraph is the simplest block type. It is just a collection of inlines and so we can fill it up with text or marked up formatted text. Since paragraph support inline contents it will wrap its content into run elements impliclitly.

 

Section

Section is another block type. As the block has no intrinsic appearance of its own. The purpose of a block is to let us group several other blocks together and then we can set the text formatting properties on the entire block any text formatting applied to a section will imply on all the blocks of the entire section.

 

List

List block type makes it easier to display bulleted and numbered list. WPF provides just one list that does it all. The MarkerStyle property of the list will specify whether we want bullets or numbers. You can specify the numbers, letters or bullets. We can use only inbuilt bullets as there is no way to define the custom bullet types.

 

Table

The table block element lets us build the table of texts. This may seem similar to Grid but the Grid derives form FramworkElemet and Table derives from FramworkContentElement as it is a text element. The table understands the text layout roots and this enables the table for doing what the grid cannot. Like a table can span multiple pages if it cannot fit one page. Also unlike the grid we do not need to tell the table upfront as to how many columns are needed. It generates them as per the content. The advantage of grid over table is that we can put multiple elements in one cell which is not possible in a table. We still can have nested elements inside a table cell though.

Figures and Floaters

Other inline types are Figures and Floaters. They cannot be used inside a TextBlock though. These can be use only in a FlowDocument. These let us place the content that is out of the main flow of the document like images, tables, etc. They support nested items of content and the main text will flow around them. These elements provide as an anchor point for content out of the flow of the document.

Floater – It is the simple of the two and we can provide the alignment of the element.

Figure – This is more flexible. It’s designed for paginated views. We can the content to appear at the top of the page, half of the width of the page or span a couple of columns.

Integrating a UIElement in a FlowDocument

We can do that by using the following:

  • BlockUIContainer
  • InlineUIContainer

RichTextBox

This is like the textbox but uses the FlowDocument as its internal representation. So it uses the TextObjectModel we just explored. It can also import or export the rich text format through the clipboard.

Any questions, comments or feedback are most welcome.

The code for this post can be found here.