Controlling the appearance of documents via styles arises from the need to have centralized control over the appearance of different text elements in a text document. This ensures that content authors can quickly adjust the document’s appearance by simply touching the relevant style properties instead of manually reformatting the document. This is especially useful for large documents, where the alternative manually goes through the document content when the author has to change the document formatting. This is why styles are integral to many text and document publishing systems. This article shows how to apply CSS-like and Word-like styles to documents in Nevron Rich Text Editor for .NET.

MS Word and HTML CSS styling are fundamentally different. In MS word, styling is defined as a collection of styles that can be applied to individual elements from a specific type. There are three types of styles in Word – ones that apply to characters, paragraphs, and tables. Each style has a set of properties that can affect those text elements. HTML CSS styling, on the other hand, is much more advanced and complex. There the styles consist of two parts – selector and rule. The selector picks which elements of the document the style’s rules should be applied to. Selectors can be very complex and are not limited to the element type – they can include complex conditions such as checking the element parent, type, properties, and others.
Each of those styling models has advantages and drawbacks. The advantage of the Word styling model is that it is simple to use. In contrast, the HTML CSS styling model is more flexible but as a result more complex. In Nevron Rich Text Editor for .NET you can use both styles when formatting your documents.

The document block object (NDocumentBlock) contains a property called Styles which allows you to access the collection of “Word” like styles applied to the document. There are three types of objects that you can add to this collection:

• NInlineStyle – this style is applied to inline elements (text) and corresponds to the character style in MS Word. It allows you to modify character level properties, such as font name, font size, font style, text fill, text background fill, and others.
• NParagraphStyle – this style is applied to paragraph elements and allows you to specify block-level properties (block background fill, border, margins, padding) as well as inline-level properties.
• NTableStyle - this style is applied to tables and allows you to control the formatting of table rows and columns (for example specify alternating row/column filling, border, etc.)

The following sample applies a paragraph style to one of the paragraphs in a dummy text document:

// Create a paragraph style with two rules
NParagraphStyle paragraphStyle = new NParagraphStyle("CustomHeading1", "Custom Heading 1");

// Rule for paragraph formatting options
paragraphStyle.ParagraphRule = new NParagraphRule();
paragraphStyle.ParagraphRule.BackgroundFill = new NColorFill(NColor.DarkBlue);

// Rule for inilne (character) formatting options
paragraphStyle.InlineRule = new NInlineRule();
paragraphStyle.InlineRule.Fill = new NColorFill(NColor.White);
paragraphStyle.InlineRule.FontStyle = ENFontStyle.Bold;
paragraphStyle.InlineRule.FontSize = 14;

document.Styles.Add(paragraphStyle);

// Add dummy text content
document.Sections.Clear();
NSection section = new NSection();
document.Sections.Add(section);

NParagraph paragraphWithCustomStyle = new NParagraph("Paragraph With Custom Style (Custom Heading 1).");
section.Blocks.Add(paragraphWithCustomStyle);

// associate the style with the paragraph
paragraphStyle.Apply(paragraphWithCustomStyle);

NParagraph paragraph = new NParagraph("Paragraph with default style.");
section.Blocks.Add(paragraph);

Adding other styles is also very easy. For example, suppose you also have to add an inline style to the first word in a paragraph:

// Create an inline style
NInlineStyle inlineStyle = new NInlineStyle("CharacterStyle1", "Character Style 1");

// that modifies the text color and font style
inlineStyle.Rule = new NInlineRule();
inlineStyle.Rule.Fill = new NColorFill(NColor.Red);
inlineStyle.Rule.FontStyleUnderline = true;

document.Styles.Add(inlineStyle);

// Add dummy text content
NParagraph paragraph3 = new NParagraph();
section.Blocks.Add(paragraph3);

NTextInline firstWordInline = new NTextInline("Inline Styles");
paragraph3.Inlines.Add(firstWordInline);
inlineStyle.Apply(firstWordInline);
paragraph3.Inlines.Add(new NTextInline(" allow you to modify the appearance of individual inlines."));

Adding this code after the previous one will result in the following text document appearance:
To summarize the pros and cons of this type of styling are:

Pros:

• Using Word-like styling is very easy.
• Styles are stored and imported in RTF and DOCX document files.

Cons:

• This type of styling does not allow for complex selectors. You cannot apply styling based on property values, the order of the text element in the document tree, and other more complex scenarios.
• MS Word-like styles are limited only to the currently edited document. If you want to style several rich text editor controls in an application form, you must apply the styles to each one of them.

Nevron Rich Text for .NET is built on top of NOV’s Document Object Model (DOM), which is a unified model for constructing various types of documents that contain texts, diagrams, charts, UI elements, etc. The components build on top of this DOM share a set of common features such as support for document structure, metadata, serialization, events, history, styling, and visualization. The styling subsystem of NOV’s DOM is inspired by CSS and has the same functionality. The core idea in CSS is similar to the one in MS Word, however, it is much more flexible regarding the functionality provided to select different elements inside the document. In CSS, you’re not limited to attaching styles to individual text elements but can write complex conditions (selectors) that define which text elements should be styled and which not.

The following code shows how to create the same text document as in the previous example; but, in this example, styling is applied with the build-in CSS styling:

// create a CSS style sheet that uses different backgrounds and fonts depending on the parent of the paragraph
NStyleSheet sheet = new NStyleSheet();
nRichTextViewControl.View.Document.StyleSheets.Add(sheet);

// configure paragraph styling that applies the same styles as the CustomHeading1 style in the previous example
{
NRule rule = new NRule();
rule.Declarations.Add(new NValueDeclaration <NFill >("BackgroundFill", new NColorFill(NColor.DarkBlue)));
sheet.Add(rule);

NSelectorBuilder builder = new NSelectorBuilder(rule);
builder.Start();

builder.Type(NParagraph.NParagraphSchema);
builder.ValueEquals(NTextElement.TagProperty, "CustomHeading1");
builder.End();
}
{
NRule rule = new NRule();
rule.Declarations.Add(new NValueDeclaration<NFill >
("Fill", new NColorFill(NColor.White)));
rule.Declarations.Add(new NValueDeclaration<ENFontStyle>
("FontStyle", ENFontStyle.Bold));
rule.Declarations.Add(new NValueDeclaration<double>("FontSize", 14));

sheet.Add(rule);

NSelectorBuilder builder = new NSelectorBuilder(rule);

builder.Start();

builder.Type(NInline.NInlineSchema);
builder.ChildOf();
builder.ChildOf();
builder.Type(NParagraph.NParagraphSchema);
builder.ValueEquals(NTextElement.TagProperty, "CustomHeading1");

builder.End();
}

// configure paragraph styling that applies the same styles as the CharacterStyle1 style in the previous example
{
NRule rule = new NRule();
{
NRule rule = new NRule();
rule.Declarations.Add(new NValueDeclaration<NFill>
("Fill", new NColorFill(NColor.Red)));
rule.Declarations.Add(new NValueDeclaration<ENFontStyle>("FontStyle", ENFontStyle.Underline));
sheet.Add(rule);

NSelectorBuilder builder = new NSelectorBuilder(rule);
builder.Start();

builder.Type(NInline.NInlineSchema);
builder.ValueEquals(NTextElement.TagProperty, "CharacterStyle1");
builder.End();
}

// add some content
nRichTextViewControl.View.Content.Sections.Clear();

NSection section = new NSection();
nRichTextViewControl.View.Content.Sections.Add(section);
NParagraph paragraph1 = new NParagraph("Paragraph With Custom Style (Custom Heading 1).");
paragraph1.Tag = "CustomHeading1";
section.Blocks.Add(paragraph1);

NParagraph paragraph2 = new NParagraph("Paragraph with default style.");
section.Blocks.Add(paragraph2);

// Add dummy text content
NParagraph paragraph3 = new NParagraph();
section.Blocks.Add(paragraph3);

NTextInline firstWordInline = new NTextInline("Inline Styles");
firstWordInline.Tag = "CharacterStyle1";
paragraph3.Inlines.Add(firstWordInline);
paragraph3.Inlines.Add(new NTextInline(" allow you to modify the appearance of individual inlines."));

This code will result in the same document appearance.

The pros and cons of this type of styling are:
Pros:

• CSS styling allows you to write complex selectors that are not limited to the element type but can also check property values, the order of the element in the document tree, and others. In fact, you can write any selector that is supported by the CSS specification.
• CSS styling can be applied per the whole application and visual tree and is not limited to the currently edited document.

Cons:

• CSS styles applied on the document are not exported to DOCX and RTF file formats.
• Writing CSS styles is more complex than using the simpler Word-like styling.

Founded in 1998, Nevron Software is a component vendor specialized in the development of premium presentation layer solutions for .NET based technologies. Today Nevron has established itself as the trusted partner worldwide for use in .NET LOB applications, SharePoint portals and Reporting solutions. Nevron technology is used by many Fortune 500 companies, large financial institutions, global IT consultancies, academic institutions, governments and non-profits.
For more information, visit: www.nevron.com.