Scintilla Styling Overview

We're going to examine manual styling in Scintilla without the use of a lexer. This is referred to as Container Styling. We'll also go through a few examples of setting styles in a document and configuring style definitions. These are things that a lexer and configuration file normally do for you respectively. Understanding the styling mechanism in Scintilla is essential if you don't want "out of the box" functionality that a lexer gives. It is also necessary if you wish to implement your own Scintilla lexer or a new ScintillaNET language configuration.

At its heart, styling in Scintilla is pretty simple. Unlike HTML with CSS which has many layers of inheritance and cascading rules, the rules for determining how each characer is displayed is somewhat flat. Every character of text data in the Scintilla document has a corresponding byte of style information. This means that unlike HTML or RTF, there are no "style runs". Every character has to be individually styled, we'll see some of the behaviors that are inherent to this model later on.

Each style byte value is an index to one of Scintilla's Style Definitions. There are 128 style definitions that can be defined in a Scintilla control*. These style definitions are where the actual style properties like font and color are defined. To put it in a way familiar to CSS users, think of it like this: There are a total of 128 CSS classes, and each character can be assigned to one of these classes.

Let's look at a simple example of how to setting up a style and styling a document to use it. For all the examples in this document I'll use both the INativeScintilla interface and the ScintillaNET 2.0 API.

INativeScintilla:

INativeScintilla ns = scintilla.NativeInterface; 

// We'll set up style 1 to a red background color 
ns.StyleSetBack(1, ScintillaNet.Utilities.ColorToRgb(Color.Red)); 

// We'll set up style 2 to a red foreground and 16pt Italic Times New Roman Font 
ns.StyleSetFore(2, ScintillaNet.Utilities.ColorToRgb(Color.Red)); 
ns.StyleSetFont(2, "Times New Roman"); 
ns.StyleSetSize(2, 16); 
ns.StyleSetItalic(2, true); 

// Add some text to the document 
ns.SetText("12"); 

// Style the "1" character as style 1
ns.StartStyling(0, 0xff);
ns.SetStyling(1, 1); 

// And Style the "2" character as style 2 
ns.SetStyling(1, 2);

ScintillaNET 2:

// We'll set up style 1 to a red background color
scintilla.Styles[1].BackColor = Color.Red; 

// We'll set up style 2 to a red foreground and 16pt Italic Times New Roman Font 
scintilla.Styles[2].ForeColor = Color.Red; 
scintilla.Styles[2].Font = new Font("Times New Roman", 16, FontStyle.Italic); 

// Add some text to the scintilla 
scintilla.Text = "12";

// Style the "1" character as style 1 
scintilla.GetRange(0).SetStyle(1); 

// And Style the "2" character as style 2 
scintilla.GetRange(1).SetStyle(2);

Scintilla Documentation Reference

Styling
Style Definition

Last edited Oct 16, 2009 at 9:44 PM by ChrisRickard, version 5

Comments

ChrisRickard Apr 5, 2011 at 6:14 AM 
Strikeout isn't supported by Scintilla (at least last I checked). Strikeout and Underline aren't standard GDI font functionalities which means custom painting is employed to simulate the effect in Word Processors.

danieladacruz Nov 6, 2010 at 6:23 PM 
Hello.

I tried to use the "Strikeout" instead of "Italic", but it didn't worked.
Do you know why? It works with Underline.

daniela