Using CSS styles

From JSXGraph Wiki
Revision as of 10:14, 9 November 2020 by A WASSERMANN (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

It is possible to use CSS classes for texts in a JSXGraph construction. A CSS class can be used as default text style by setting before the call of initBoard():

    JXG.Options.text.cssClass = 'myDefaultFont';

After initBoard() has been called the default class may be changed by calling

    board.options.text.cssClass = 'myDefaultFont';

Highlighted text uses the CSS class highlightCssClass.

    JXG.Options.text.highlightCssClass = 'myDefaultFont';

As with all JSXgraph options, CSS class can also be set while creating a text element. See the example below.

Attention: The CSS properties color and font-size are overwritten by the JSXGraph properties strokeWidth and fontSize.

The JavaScript code

.myFont {
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    border: 1px solid black;
    padding: 5px;
    border-radius:5px;
}

.myFontHigh {
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    border: 1px dashed black;
    padding: 5px;
    border-radius:5px;
}


.myDefaultFont {
    border: 1px solid black;
    padding: 1px;
    border-radius:3px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}

/* Different color for parenthesis */
#par {
    font-size:120%;
    color:blue;
}
JXG.Options.text.cssClass = 'myDefaultFont';

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5]});

var txt = board.create('text', [1,2, " <span id='par'>(</span> Hello world <span id='par'>)</span>"], 
          {
            cssClass:'myFont', strokeColor:'red',
            highlightCssClass: 'myFontHigh',
            fontSize:20
          });

var p = board.create('point', [0,0]);