Jsxgraph Rotation and LaTex text

Question

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

Answer 1

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/