SPOC-Web Icon, semantic Knowledge Management
Connect to Facebook

Individuen: Dinge, Eigenschaften und Verbindungen

Theming Text Files and custom Languages using CSS

The Spoc-Text Editor and the Markup/Programming Languages it supports are extensible on different Levels. This Section shows how you can adjust the Looks of the Editor to the respective custom Language.

Theming the Spoc-Text Editor

The '.Theme' Style defined in a .CSS File has a special Meaning. Instead of modifying Text, it is intended to modify the Editor, to give it a Base-Style by defining Defaults for most Properties. Therefore this Style can use the following CSS Properties with a similar but different Purpose than for Text:

CSS Property Purpose in the '.Theme' Style
background-color The Background of the whole Editor Window
color The Default Text Color of the Editor Window
font
 The Default Font, Size and Family used in the Editor Window
lang The Default (human) Language of the Text
clear Controls whether left or right (or both) Markup is removed on Printing or Copying
animation-name Determines the Style to define the Content Language.
font-family Alternate Font to be used for Headings / Outline
outline-color Alternate Text Color to be used for Headings / Outline

Of course you can set most of these (except for the Background Color) also globally at the Start of the Document, but that reduces Readability and can accidentally be closed.

 


Language-specific Cascading Style Sheets (CSS-Files)

Each of the Languages defined in the Syntax Sub-folder can have an associated *.CSS File to separate the Grammar and Language Definition from the Styling. The Name is either explicitly given in the 'stylesFile'-Attribute of the grammar or implicitly by the Grammar Name.

This Separation is recommended, because defining a Grammar is considerably harder than Styling and is usually done only once, whereas Styles are constantly varied.

Document-specific CSS-Files

Additional to the Language.CSS File in the Syntax Sub-folder there can be another CSS File with the same Name as the Document. When that is the Case, its Style Definitions modify, amend and supersede those of Language.CSS. Here You should define Styles, Theme and Key-Words that are exclusive to this Document.

You can also modify the Theme in document-specific Ways e.g. change Text and Background Color to match the Mood.

The whole Picture using the *.STX Language

In this Section we want to combine all Features and explain how they interact, so you can align the Document Architecture with this Framework.

  1. First you decide which Language to use. For Rich Text you can choose HTML, but STX is considerably briefer and readable.
  2. After creating your "Document.stx" File it is associated with the "stx.lang" Grammar Definition from the Sub-Directory "_Resources/Syntax" of the Spoc-Text Editor. You should not modify this File, because Changes have a profound Effect on the whole Parsing and Styling Process. Create a new Language File from a Copy if you want to experiment with new Language Structures.
  3. The Grammars defined in "stx.lang" refer to Styles in the global "stx.css" Style Definition in the same Directory. It also defines a Base-Theme for this Language, so you can attune to it e.g. by changing the Editor Colors and Fonts. You can modify this Definition as you like. CSS is very easy to read and write.
  4. Additionally there can be a "Document.css" with specific Style Overrides for this Document.

Now the exact Styling of a Text Run can depend on the following Factors with increasing Specificity/Priority:

  1. Theme Color, Font & Background merged from the following Sources:
    1. Theme Definition in "stx.lang" (should be separated into stx.css)
    2. Theme Definition in "stx.css"
    3. Theme Definition in "Document.css"
  2. When marked up with {Style(Papyrus, orange, font-weight=bold) ...Text...}, the Style Definitions apply to "Text" as follows with increasing Specificity/Priority:
    1. Style Definitions in "stx.lang" (should be separated into stx.css)
    2. Style Definitions in "stx.css", e.g .Style { font-family=serif; color=green; }
    3. Style Definitions in "Document.css". This Styling should be the preferred Practice, because it can globally style the whole Document and yields a more consistent Design than the "manual Formatting" that follows now. Invent any Number of named Styles and apply them consistently in Your Documents. This results in readable and clean Content both during Editing and also when Reading. 
    4. Positional Style Properties like 'Papyrus' and 'orange' are applied to the corresponding CSS Properties in the Definition,
      in this Case 'font-family' and 'color'. When no or empty Parameters are given, the Style Values apply.
    5. Additionally arbitrary direct Styling can be applied using Name=Value Pairs with any CSS Properties like this: font-weight=bold