termlib.js home | multiple terminals | parser | faq | documentation | samples
Style Settings Sample
> open terminal  

> show sample text 

(c) mass:werk,
N. Landsteiner 2005-2007

Introducing Style Settings

Version 1.4 of "termlib.js" introduces configurations for styles and associated markup.

The method TermGlobals.assignStyle() allows you to install a custom style and associated mark up with a single method call.

TermGlobals.assignStyle() takes four arguments:

<style-code> The code to be used in the style vector for this style.
<style-code> must be a power of 2 between 0 and 256 (<style-code> = 2^n, 0 <= n <= 7)
<markup> The one letter markup to be associated with this style (case insensitive).
"p" and "c" are reserved.
<HTMLopen> The opening HTML clause to be written before a range in this style.
(This is used as a line of text is rendered to the terminal display.)
<HTMLclose> The closing HTML clause to be written after a range in this style.
(This is used as a line of text is rendered to the terminal display.)

As an example we will install a style "b" for bold and use style #16 (2^4) for this.
To have this all ready before needed, you would want to do this before opening any instance of Terminal:

  TermGlobals.assignStyle( 16, 'b', '<b>', '</b>' );


Now we can use our new style and markup in any write() statement like this:

  myTerm.write('This is %+bBOLD%-b.');

Now as we have installed our new "bold" style, we see that any bold letters are running wider then any plain text using the same letters. Since we want a well behaved terminal output, we'll have definitely to fix this.

We will apply some kerning to provide the extra space required for bold letters. To do this, we'll add a "letter-spacing" definition to our CSS rule ".term" (if it's not already there):

     font-family: "Courier New",courier,fixed,monospace;
     font-size: 12px;

     /* ... any other definitions ... */

     letter-spacing: 1px;


(As we can now see, installing a bold style involves some synchronized CSS and HTML coding. This is also the reason why bold is not in the standard set of termlib.js styles.)


As a second example we'll install a small style "m" ("minature", "s" is already in use for strike) with style code 32 (2^5).

This should be rendered with font-size: 10px.
To preserve our mono-spced appearance we'll have to adjust the kerning for the smaller character-width.
So we'll use a custom HTML span with a style attribute for this:

                           '<span style="font-size:10px; letter-spacing:2px;">',

As above we can now use this in a write() statement like this:

  myTerm.write('This is %+mSMALL%-m.');


Finally you could define a style as some kind of makro using the HTMl-parts (3rd and 4th argument) for visible information:

  TermGlobals.assignStyle( 64, 'e', 'ERROR: ', '!' );
  myTerm.write('%+eYou did not enter enter a valid number%-e');
  // "ERROR: You did not enter enter a valid number!"


With version 1.4 TermGlobals is just a reference to Terminal.prototype.globals.
Since the term "TermGlobals" is handy outside any handler, we used this as a shortcut.

Unlike any other methods TermGlobals.assignStyle() alerts any errors. (Since these alerts should only occure in development phase, this provides an easy debugging facillity without any notice to application users.)

You usually would not want to change style #1 (reverse) since this style is used by the cursor in block mode.