Share JSXGraph: example "Aligning texts"

JSXGraph
Share JSXGraph: example "Aligning texts"
This website is a beta version. The official release will be in **2023**.

Aligning texts

Texts can be aligned with the attributes `anchorX` and `anchorY`. Possible values for `anchorX` are `'left'`, `'middle'`, and `'right'`. Possible values for `anchorY` are `'bottom'`, `'middle'`, and `'top'`. Text can be rotated if it is declared as display: `'internal'`. For SVG this means, instead of an HTML div the SVG text is taken as text node. To avoid jumping of texts when loading large MathJax applications it is recommended to use `anchorX: 'left, anchorY: 'top'`.
<style type="text/css">
.mytext {
   border: 1px solid black;
   padding:2px;
}
</style>
// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-1, 10, 7, -1],
    axis: true,
    keepaspectratio: false
});

// Vertical line at x=3
board.create('line', [-3, 1, 0], {
    strokeWidth: 1,
    dash: 2
});
board.create('text', [3, 8, "Default"], {
    cssClass: 'mytext'
});
board.create('text', [3, 7, "anchorX left"], {
    anchorX: 'left',
    cssClass: 'mytext'
});
board.create('text', [3, 6, "anchorX middle"], {
    anchorX: 'middle',
    cssClass: 'mytext'
});
board.create('text', [3, 5, "anchorX right"], {
    anchorX: 'right',
    cssClass: 'mytext'
});

// Horizontal line at y=2
board.create('line', [-2, 0, 1], {
    strokeWidth: 1,
    dash: 2
});
board.create('text', [1, 2, "Multiline text
default"], { cssClass: 'mytext' }); board.create('text', [2.2, 2, "Multiline text
anchorY bottom"], { anchorY: 'bottom', cssClass: 'mytext' }); board.create('text', [3.4, 2, "Multiline text
anchorY middle"], { anchorY: 'middle', cssClass: 'mytext' }); board.create('text', [4.6, 2, "Multiline text
anchorY top"], { anchorY: 'top', cssClass: 'mytext' }); // Horizontal line at y=2 board.create('line', [-2, 0, 1], { strokeWidth: 1, dash: 2 }); board.create('text', [3, 2, "Multiline text
anchorX right
anchorY top"], { anchorX: 'right', anchorY: 'top', cssClass: 'mytext' }); board.create('text', [0.0, 0.0, 'Rotate'], { display: 'internal', rotate: 30 });