Using CSS styles: Difference between revisions

From JSXGraph Wiki
No edit summary
Line 38: Line 38:
     border-radius:3px;
     border-radius:3px;
     font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
     font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}
span.myFont {
    text-decoration: underline;
}
}


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


var txt = board.create('text', [1,2, "Hello world"],  
var txt = board.create('text', [1,2, "Hello <span>x</span> world"],  
           {
           {
             cssClass:'myFont', strokeColor:'red',
             cssClass:'myFont', strokeColor:'red',

Revision as of 12:04, 11 October 2012

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;
}
JXG.Options.text.cssClass = 'myDefaultFont';

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

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

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