Using CSS styles: Difference between revisions

From JSXGraph Wiki
(Created page with "<html> <h1>Test</h1> </html> <jsxgraph width="600" height="600"> var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5,5,5,-5], keepaspectratio: true, axis:fals...")
 
No edit summary
 
(27 intermediate revisions by the same user not shown)
Line 1: Line 1:
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():
<source lang="javascript">
    JXG.Options.text.cssClass = 'myDefaultFont';
</source>
After initBoard() has been called the default class may be changed by calling
<source lang="javascript">
    board.options.text.cssClass = 'myDefaultFont';
</source>
Highlighted text uses the CSS class highlightCssClass.
<source lang="javascript">
    JXG.Options.text.highlightCssClass = 'myDefaultFont';
</source>
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.
<html>
<html>
<h1>Test</h1>
<style type="text/css">
.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;
}
 
#par {
    font-size:120%;
    color:blue;
}
 
</style>
</html>
</html>
<jsxgraph width="600" height="600">
<jsxgraph width="600" height="300">
var board = JXG.JSXGraph.initBoard('jxgbox', {
JXG.Options.text.cssDefaultStyle = '';
    boundingbox: [-5,5,5,-5],
JXG.Options.text.highlightCssDefaultStyle = '';
    keepaspectratio: true, axis:false, grid:true
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]);
 
</jsxgraph>
</jsxgraph>


===The JavaScript code===
===The JavaScript code===
<source lang="css">
.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;
}
</source>
<source lang="javascript">
<source lang="javascript">
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]);
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Text]]

Latest revision as of 10:14, 9 November 2020

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]);