JSXGraph
JSXGraph share

Share

Aligning texts
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.org/share/iframe/aligning-texts" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Aligning texts" 
    allowfullscreen
></iframe>
This code has to 
<style type="text/css">
.mytext {
   border: 1px solid black;
   padding:2px;
}
</style>


<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    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<br>default"], {
        cssClass: 'mytext'
    });
    board.create('text', [2.2, 2, "Multiline text<br>anchorY bottom"], {
        anchorY: 'bottom',
        cssClass: 'mytext'
    });
    board.create('text', [3.4, 2, "Multiline text<br>anchorY middle"], {
        anchorY: 'middle',
        cssClass: 'mytext'
    });
    board.create('text', [4.6, 2, "Multiline text<br>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<br>anchorX right<br>anchorY top"], {
        anchorX: 'right',
        anchorY: 'top',
        cssClass: 'mytext'
    });
    
    board.create('text', [0.0, 0.0, 'Rotate'], {
        display: 'internal',
        rotate: 30
    });
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

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<br>default"], {
    cssClass: 'mytext'
});
board.create('text', [2.2, 2, "Multiline text<br>anchorY bottom"], {
    anchorY: 'bottom',
    cssClass: 'mytext'
});
board.create('text', [3.4, 2, "Multiline text<br>anchorY middle"], {
    anchorY: 'middle',
    cssClass: 'mytext'
});
board.create('text', [4.6, 2, "Multiline text<br>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<br>anchorX right<br>anchorY top"], {
    anchorX: 'right',
    anchorY: 'top',
    cssClass: 'mytext'
});

board.create('text', [0.0, 0.0, 'Rotate'], {
    display: 'internal',
    rotate: 30
});

Aligning texts

Technical
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
});

license

This example is licensed under a Creative Commons Attribution 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.