Styling Text Files by editing the CSS

The Spoc-Text Editor and the Markup/Programming Languages it supports are extensible on different Levels. This Section shows how you can change the Looks of Text Files for a certain formal Language. Defining the Language using a Grammar is an advanced Topic discussed in the next Section.

Styling STX with Cascading Style Sheets (CSS)

The *.STX Format is an open Text Markup with an extensible Set of Tags, like in XML. You can already invent and use any Number of Tags, but an associated CSS File allows You to customize the Looks and Behavior of these Tags.

CSS is a W3C standardized Language to format HTML Pages like this one. It was chosen because it is an open, well-documented Standard that has a broad Tool-Support and a very large User-base.

Spoc-Text will tolerantly ignore not supported CSS Commands, so You can re-use existing CSS Files e.g. from HTML Pages. 

The proper CSS File for a Language is usually defined in a *.css File with the same Name as the *.lang File defining the Language. Both are located in the /Spoc-Text/_Resources/_Syntax Folder of Your Installation.

The following Sections explain how to edit CSS Files to modify or create new Styles.

It uses an Extract from the actual stx.css File that defines how STX Elements are represented.

Creating or changing Styles in Cascading Style Sheets (CSS)

This Section explains how to edit or create the *.CSS Files that come with Spoc-Text. Of course You can (and should) use Spoc-Text to edit them, because it defines a Highlighting-Scheme that makes it easier to read and Autocomplete-Keywords that help in writing CSS. The Sample CSS Code You see in this Article was simply copied and pasted into this Web-Page.

Spoc-Text uses *.CSS Files to define how Sections marked up with e.g "{i ...}" are rendered.

This is the Line from the stx.css File responsible for styling these Sections:

.i { font-style: italic;target-name: "<i/><em/>"; content: "{i italic} Font Style "}

As You can see, it starts with a '.i', that means it is applied to Sections marked with "{i ...}". In CSS this is called a 'Selector', in this case it selects all Sections with a 'Class' named 'i'.

Then follows a List of Commands that control which Property is set to what Value.

In this Case, only the first is relevant:

•  { font-style: italic; meaning the Font-Style is switched from 'normal' to 'italic'.
•  target-name: "<i/><em/>"; specifies that this Style is translated from both <i/> and <em/> HTML Elements and back to <i/> (the first)
  
•  content: "{i italic} Font Style "} is a sample Text, that is used in the Spoc-Text Help-Screen.

The following Lines from the stx.css File demonstrate how to control various CSS Properties:

• Bold Font: .b { font-weight: bold; target-name: "<b/><strong/><dfn/>"; content: "{b bold} Font Boldness"} 
• Underlined Text: ._  { text-decoration: underline; target-name: "<u/>"; content: "{_ Underlined} Text" } 
• Over-lined Text: .\~ { text-decoration: overline; content: "{~ Overlined Text}, not supported in MS Word" }
  Here a '\' AKA 'Backslash' must precede the '~' Character, because is normally used as a special Operator in CSS Selectors. Also the following Strike-through Text Selector '-' needs to be escaped:
  .\- { text-decoration: line-through; target-name: "<strike/>"; content: "{- Strikethrough}, ..."}

You can change every Aspect of the Text, even make it invisible in Presentation Mode and Printouts:

• 'Invisible' Comments: .\! { visibility: collapse; target-name: "<!-- -->"; content: "{! comments are removed on printing } " } 
• Larger Font: .\* { font-size: 125%; content: "{* Larger} Font {*4 with Power}"}
  
• Smaller Font: .\/ { font-size:  80%; content: "{/ Smaller} Font {/4 with Power}"} 
• Super-Script: .\^ { vertical-align: super; font-size: 80%; target-name: "<sup/>"; content: "Text with {^ SuperScript}" }
  
• Subscript: .v  { vertical-align: sub;   font-size: 80%; target-name: "<sub/>"; content: "Text with {v SubScript}" }
  
• Changing the Font: .s { font-family: Verdana; content: "{s Sans (without) Serif Font} for low Resolution Displays; Arial..." } 

You can create and use arbitrary many Styles. This is especially useful to define so-called "semantic" Styles, that are used exclusively for Contents that actually 'is', what it is named.

Using aural Styles like Speech and Music in Cascading Style Sheets (CSS)

Spoc-Text supports playing Audio Files and reading the File Content, even using multiple Voices when they are installed. (unfortunately Windows comes with only a single Voice per Language. You can get additional Voices from different Vendors.) 

This is an Extract from the Snuff.css File responsible for styling the eBook 'Snuff' by Terry Pratchett. It defines a Style for each Person in the Book and attaches not only a distinct color to the spoken Sections, but also Voice-properties like Sex, Age, or Volume:

.Vetinari { color: Violet; voice-family: male; voice-age: Adult}
.Mumm { color: Blue; voice-family: male; voice-age: Adult}
.Sybil { color: Violet; voice-family: female; voice-age: Adult}
.Carrot { color: Orange; voice-family: male; voice-age: Adult}

The complete Set of supported CSS Properties is listed at the End of this Chapter.

Defining the Language Tag in Cascading Style Sheets (CSS) for Spell-Checking and Speech

The Tag to determine the Language of the Text Content is defined as 'l' in the CSS, so You can change it if You like by changing this Rule:

.l { lang: ; content: "{lEn Mark any Range with a Language Code {l or unmark it} for Spell-Checking and Voice Output}" }

Defining the Tag for Music in Cascading Style Sheets (CSS)

The 'm' Tag to play an Audio File is also defined using CSS, so You can change it if You like. Any Tag that defines the CSS 'play-during' Property will play the defined File: .m { play-during: ; target-name: "<audio><source src='play-during'/></audio><bgsound src='play-during'/>"; 

 content: "Add Music: {m(audio.mp3) ...content...} " }

As You can see, this is mapped to the HTML 5 <audio> Tag, that is not yet well-supported in many Browsers.

Defining the Tag for Graphics in Cascading Style Sheets (CSS)

Also the 'g' Tag to embed Graphics into the STX File is defined in CSS: .g { icon: ; height: 100%; width: ;
 target-name: "<img src='icon' height='height' width='width' alt='content'/>"; content: "Add Graphic: {g(Image.png) with alt. Text } " }

Creating semantic Styles

You can create and use arbitrary many Styles. This is especially useful to define so-called "semantic" Styles, that are used exclusively for Contents that actually 'is', what it is named.

Example: When You create a Style named .vehicle, you can mark up all the different Cars, Planes, Ships etc. like this: "{vehicle Mercedes...}"

This is most useful, because then You can easily extract all vehicles or other Data from the given Document, using proven, open XML Technologies like XPath or XSLT, because STX is completely equivalent to XML.

Of course You can also mark up the same Data with multiple semantic Styles: "{car {ship amphibious vehicle...}}"

Defining simple Matches in Cascading Style Sheets (CSS)

Apart from Styles that always select the Class/Tag, You can also define Text-Strings that literally match a Section in the Document. (If You need variable Matches, look into the next Chapter that explains how to define Matches and Ranges in the *.lang File. )

Any CSS Selector that does NOT start with a Dot selects the same Text in the Document and formats it according to the CSS-Rules and/or Style referenced. Use the animation-name Property to specify a second Style to format these literal Matches.

This is the Line from the stx.css File responsible for styling Check-Boxes:

• checked: [x] { animation-name: Checked;  background-color: lightgray; color: Red;    content: "[x] or [_] for Check Boxes "; target-name: "<input type='checkbox' checked='checked' />"}
• unchecked: [_] { animation-name: Check;    background-color: lightgray; color: LimeGreen; target-name: "<input type='checkbox' />"} 

These Text-Check-Boxes are much easier to read and edit, because they consist of Keyboard-Characters and closely resemble the corresponding drawn Patterns. You can also see that these Check-Boxes are mapped to the actual HTML Check-Boxes, so You get the real Experience when You copy this Text into Word or HTML Pages. The same holds for Option-Buttons, only here You need to escape any Character that is significant in the Selector using the Backslash '\': 

• \(x\) { animation-name: Opted;   target-name: "<input type='radio' checked='checked' />"; background-color: lightgray;color: Red; }
• \(\ \) { animation-name: Option; target-name: "<input type='radio' />"; background-color: lightgray; color: LimeGreen; content: "(x) or ( ) for exclusive Options"}

Here You can see again that certain Characters need to be escaped using the '\' Backslash. Especially Spaces and Tabs also need to be escaped as in these Definitions for bulleted '*' Headings, that are mapped to the corresponding HTML <h/> Tags resp. MS Word Styles: 
\*\  { target-name: "<h1/>"}  /* .MsoHeading1 class*/
\ \*\  { mso-outline-level: 2; target-name: "<h2/>"}
\ \ \*\  { mso-outline-level: 3; target-name: "<h3/>"}
\ \ \ \*\  { mso-outline-level: 4; target-name: "<h4/>"}
\ \ \ \ \*\  { mso-outline-level: 5; target-name: "<h5/>"}
\ \ \ \ \ \*\  { mso-outline-level: 6; target-name: "<h6/>"}
\ \ \ \ \ \ \*\  { mso-outline-level: 7; target-name: "<p class='MsoHeading7'/>"} 
\ \ \ \ \ \ \ \*\  { mso-outline-level: 8; target-name: "<p class='MsoHeading8'/>"}
\ \ \ \ \ \ \ \ \*\  { mso-outline-level: 9; target-name: "<p class='MsoHeading9'/>"} 

Even HTML Horizontal Lines <hr/> and Line Breaks <br/> are defined using simple Rules in CSS. They both need to be escaped; the Line Break Character is encoded with it's hexadecimal Value 10 = 'a':

• \a {target-name: "<br/>"}
  
• \--- { color: red; font-weight: bold; font-size: 200%; target-name: "<hr/>"; content: "---------"}