jsxgraph

Jsxgraph Rotation and LaTex text


board.create('text', [40, 42.5, 'Ligne de certitude'], {highlightStrokeColor: 'red', display: 'internal', rotate: 45,fontSize:8});

This work. But when I replace the text by LaTex mechanism (Mathjax) it fails. Why


Solution

  • In your example, you specified display:'internal' which forces JSXGraph to use SVG text elements for rendering the text. However, SVG text elements can not cope with MathJax. On the other hand, you can rotate them easily. If you want rotated MathJax text, you have to set display:'html' and force the rotation with CSS. Here is an example:

    CSS:

    .rotated {
      transform: rotate(-45deg); 
    }
    

    JavaScript / JSXGraph

    const board = JXG.JSXGraph.initBoard('jxgbox', { 
      boundingbox: [-5, 5, 5, -5], axis:true
    });
    
    // Text using SVG text
    board.create('text', [-2, -3, 'Ligne de certitude'], {
        display: 'internal', 
        rotate: 45,
        fontSize:8});
    
    // Dynamic text element, rotated with MathJax
    var t2 = board.create('text', [-2, 1, () => 'Ligne de certitude $$\\int$$'], {
        display: 'html', 
        CSSClass: 'rotated',
        fontSize:10});
    
    // Static text element, rotated with MathJax
    var t3 = board.create('text', [2, 1, 'Ligne de certitude \\(\\int\\)'], {
        display: 'html', 
        CSSClass: 'rotated',
        parse: false,
        useMathjax: true,
        fontSize:10});        
    

    The example can be seen in action at https://jsfiddle.net/0aq23omf/