Does the CSS example on JSXGraph's website for JSXGraph work?

Question

I tried my best to copy this example here from the JSXGraph website: https://jsxgraph.uni-bayreuth.de/wiki/index.php/Using_CSS_styles

Here's the abbreviated HTML:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Covid Sandbox</title>
  <meta name="description" content="Covid Sandbox">

</head>

<body>

  <script src="third party/jquery-3.5.1.min.js"></script>
  
  <script type="text/javascript" charset="UTF-8" src="https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraphcore.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraph.css" />

    <div id="jsxgbox">
    </div>
</body>
</html>

<style>
  .jsxgDefaultFont {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 18;
  }

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

<script src="js/test.js"></script>

Here's some Javascript I made to test it in test.js:

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

board = JXG.JSXGraph.initBoard('jsxgbox', {
    boundingbox: [-1,15,15,-1],
    showcopyright: false,
    axis: true,
    renderer: 'canvas',
    defaultAxes: {
        x: {
            strokeColor: 'grey',
            ticks: {
                visible: 'inherit',
            }
        },
        y: {
            strokeColor: 'grey',
            ticks: {
                visible: 'inherit',
            }
        },
    },
    zoom: {
        factorX: 1.25,
        factorY: 1.25,
        wheel: true,
        needshift: false,
        eps: 0.1
    },

    showZoom: false,
    showNavigation: false,
});

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

board.update();

The inline HTML doesn't even appear to be interpreted correctly (shows span\ Hello World \span). Not sure what I'm doing wrong here.

score 1 · Accepted Answer · answered Nov 09 '20 at 10:24

Indeed, the example in the wiki is outdated. The priorities of CSS classes, default CSS styles and JSXGraph are a little bit delicate.Please, have a look at the API docs: https://jsxgraph.org/docs/symbols/Text.html#cssDefaultStyle. If you want to overwrite font-family, you have to set cssDefaultStyle to the empty string:

JXG.Options.text.cssDefaultStyle = '';
JXG.Options.text.highlightCssDefaultStyle = '';

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-1,15,15,-1],
    showcopyright: false,
    axis: true,
    // ...
    });

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

See it live at https://jsfiddle.net/2jq8srpv/3/

After trying to implement your fix I still ran into problems, I narrowed it down to an option I failed to include in the original question: ```JXG.Options.text.display = 'internal';``` I read somewhere it was good for webkit / firefox browsers, but it seems to break the user-defined CSS styling for the relevant 'text' objects in JSXGraph. https://jsfiddle.net/de6wjgx3/1/ — idealius, Nov 10 '20 at 16:24

Does the CSS example on JSXGraph's website for JSXGraph work?

1 Answers1