Individuen: Dinge, Eigenschaften und Verbindungen

Styling and extending STX with Cascading Style Sheets (CSS)

The STX Language is designed to be styled, i.e. to separate Content from Formatting. The Formatting of all STX Tags and most other Markup Elements is defined by corresponding Styles in a Language-specific Stylesheet, just like HTML. You can modify these *.css Files to change or create new Styles and Key-Words. This is the preferred way of styling a Document, because you don't have to edit individual Content. Instead you mark it using an extensible Set of CSS Styles/Classes and later modify only these Classes. This modifies ALL occurrences of the Class in the whole Document.

Because STX defines a generalized Markup Language like e.g. XML, you can easily extend it by using your own Set of Tags and define the corresponding Styles. We recommend that you open the Spoc-Text Editor and start experimenting with the Features described in the following Sections.

Cascading Style Sheets: Why and what?

Style sheets have been used by editors and typographers for centuries to ensure Style and Consistency. Unlike most WYSIWYG Text Editors, STX relies primarily on Styles in separate CSS Files to format its Content. This separates Content and Styling, making it easy to write concise and consistently formatted Documents with STX. It also allows to adjust the Appearance of Documents to the current Situation by exchanging the Stylesheet, also known as "Theming".

CSS is a well-known W3C Standard and Spoc-Text uses the same Names and Semantics to define the Text Formatting. This allows you to use any Search Engine to draw on the vast Knowledge Base of HTML/CSS Developers on the Internet.

STX Styling encourages Semantic Markup

Semantic Markup emphasizes to mark Document Parts "semantically", i.e. name Parts by their Meaning (e.g. 'important') rather than "presentational" (how they look like, e.g. 'bold'). WYSIWYG Editors like MS Word usually encourage presentational Markup, because the User can directly mark any Text Section and mangle it until it looks the way it should. The Result is often an unmanageable Hodgepodge of manually aligned and formatted Text Blocks.Typical Effects of this Style are:

fragmented Texts with multiple overlapping, often cancelling Format Instructions
Formatting repeated over and over thus bloating the Document and hampering Maintenance

These Effects are hidden in File Formats like MS Word and usually manifest only when you try to edit it. But when you import or paste such a Document into Spoc-Text, it gets converted into STX and the Mess becomes obvious. The Difference between a manually formatted HTML or Word Document and one that uses Styles resp. CSS can be enormous and bloat a Document by a Factor of 10 and more! This makes STX Documents usually smaller and much easier to manage than the corresponding MS Office Files.

A very good Example of semantic Markup is the following Transcript into STX: This is a Dialog between two Persons named 'Nutts' and 'Smeems', in the Novel "Unseen Academials" by Terry Pratchett:

    ‘{Nutts: I thought I wasn’t paid to think, master.}’
    ‘{Smeems: Don’t you try to be smart!}’
    ‘{Nutts: Can I try to be smart enough to get you down safely, master?}’

As you can see, the Sentences are surrounded ("marked up") with Styles named after the of the speaking Persons. These Styles are defined in a separate 'CSS' File and can be modified in any way, e.g. using distinct Text Colors, Fonts or Voices. This enhances Readability, but even more, Text Processors can now 'understand' which Person says what. Spoc-Text for example will try to read out each passage with a distinct Voice (when multiple Voices are installed).

CSS Format: selector {property1: value1; property2: value2; ... property: value}

The CSS Format is a very simple Text Format to describe the styling of HTML or SVG Elements. STX Tags usually mark their content semantically (i.e with a distinct Tag for each Content-Type) and CSS can apply Formatting to these Tags.

A CSS File is simply a List of CSS Rules, often one Rule per Line.

A CSS Rule consists of

a 'Selector', e.g. .Nutt that must match with the STX Tag Name e.g. {Nutt ...}
and (multiple) Property:Value Pairs with well-known CSS Property Names and their Values e.g. {color: olive}

A common Form of Selectors starts with a Dot, followed by the Name of a Style. These Styles match STX Tags with the same Name

The Dialog Example from above is formed as the Result of applying the two CSS Rules to the given STX Text:

STX-File

‘{Nutts: I thought I wasn’t paid to think, master.}’

‘{Smeems: Don’t you try to be smart!}’

‘{Nutts: Can I try to be smart enough to get you down safely, master?}’

Result

    ‘{Nutt: I thought I wasn’t paid to think, master.}’
    ‘{Smeems: Don’t you try to be smart!}’
    ‘{Nutt: Can I try to be smart enough to get you down safely, master?}’

CSS-File

.Nutt {color: olive}
.Smeems {color: crimson}

Parameterizing Styles

The STX {StyleName ...} selects a Style that is applied to the inner Section. The Tag can also accept Parameters and thus modify the Styling. These Parameters can be written

as CSS Property-Value Pairs like in CSS (similar to the HTML style-Attribute) or
as positional Parameters without a Name, therefore much briefer

Positional Parameters are matched by Position with the CSS Properties in the Style from the *.css File or <Style> Rule. This is how e.g. Font-Size is parameterized:

CSS-Style: .\* { font-size: 125%; content: "{* Larger} Font {*4 with Power}"}
STX-Tag: {* Larger Font with Default 125%} {*4 Even larger with greater Values}

As you can see, a single numeric Parameter can directly be appended to the Tag. Multiple Parameters or Values with Spaces need Brackets to keep them separate from the Text Content as in the following Examples:

CSS-Style: .f { font-family: Georgia; content: "{f Serif Font} for Readability on high Resolution Displays;" }
STX-Tag w. default Font: {f Serif Font for Readability at large Font Size}
STX-Tag w. Font Parameter: {fPapyrus any other Font}
Brackets are needed for Values with Spaces: {f(Brush Script) apply brackets on Parameters with Spaces}

Make sure you never change the Order of positional CSS Properties though, or you have to adjust all Usages in all Files!

Direct Formatting: Adding more CSS Parameters to styled Sections

You can not only modify the CSS Properties defined in the Style File, you can also add new CSS Property-Value Pairs to a tagged Section. This adds so-called 'direct formatting' to it, but this is not a good Practice, because it litters the Text with hard-to-maintain ad-hoc Formatting. Most WYSIWYG Editors encourage it though, by letting the User select some Text and change any Aspect like Font, Color etc.

But since STX Tags are very brief, it is almost always better to define an additional Style in the CSS File and apply it to the same Section.

Here is a simple Example for direct Formatting and the Styling Alternative:

CSS-Style: .f { font-family: Georgia; content: "{f Serif Font} for Readability on high Resolution Displays;" }
STX-Tag w. default Font, but additional Styling: {f(color=red) Serif Font AND changed Color}

STX-Tag w. Font and additional Styling: {f(Impact, color=green) Font Impact ...} ...
The same, but cleaner with two Styles: {fImpact {tGreen Font Impact ...}} ...

As you can see, nesting Styles is not only better manageable, but can also be briefer than named CSS Parameters!

Supported CSS Properties

This is the List of CSS Properties supported for direct/inline Styling in SpocText Version 1:

CSS Property	Tag	Purpose
color	{t ...}	The Text Color. You can use any of the well-defined Web-Colors as well as 'text' and 'paper' to use the Theme Colors.
background	{p ...}	The Background Color for the marked-up Text. Usually for highlighting a Section.
font-family	{f ...}	The Font Name to apply. Choose Standard Fonts, because there is no Fallback built in, so the Text stays unformatte when the Font cannot be found on the current Computer.
font-size	{* ...}	Relative or absolute Font Size.
font-weight	{b ...}	Boldness of the Font used for this Section.
font-style	{i ...}	Only 'italic' or 'normal' are supported.
text-decoration	{- ...}	Used for Underline, Overline and Strikethrough
visibility	{! ...}	Hides the Selection together with the Markup; used for non-printable Comments.
voice-family		Choose 'male', 'female' or one of the named Voices installed on your Computer.
voice-age		The Speaker's age can be modified to support Narration with distinct Voices.
lang	{l ...}	Changes the Language for the marked up Content for both Spell-Checking and to select the proper Voice for Text-to-Speecs.
play-during	{m ...}	Plays the given Audio File while the Cursor is in the marked Section and playing is enabled.
icon	{g ...}	Embeds the given Graphic into the Text.
bookmark-level	...	STX Classes '.Heading', '.Bullet' and '.Numbering' use this Property and thus are styled as Headings/Outline. Their Heading-Level is determined by their relative Indent. The Outline also defines Folding Sections in STX to manage it.