Aligning text: Difference between revisions

From JSXGraph Wiki
No edit summary
m (Changed code style from italics to monospace font)
 
(11 intermediate revisions by one other user not shown)
Line 7: Line 7:
</style>
</style>
</html>
</html>
Texts can be aligned with the attributes ''anchorX'' and ''anchorY''. Possible values for ''anchorX'' are 'left', 'middle', right'. Possible values for ''anchorY'' are 'bottom', 'middle', 'top'.
Texts can be aligned with the attributes <code>anchorX</code> and <code>anchorY</code>. Possible values for <code>anchorX</code> are <code>'left'</code>, <code>'middle'</code>, and <code>'right'</code>. Possible values for <code>anchorY</code> are <code>'bottom'</code>, <code>'middle'</code>, and <code>'top'</code>.


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.
Text can be rotated if it is declared as <code>display: 'internal'</code>. For SVG this means, instead of an HTML div the SVG text is taken as text node.
<jsxgraph width="600" height="600">
<jsxgraph width="600" height="600">
     var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-1,10,7,-1], axis:true, keepaspectratio:false});
     var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-1,10,7,-1], axis:true, keepaspectratio:false});
Line 19: Line 19:
     brd.create('text', [3, 6, "anchorX middle"], {anchorX:'middle', cssClass:'mytext'});
     brd.create('text', [3, 6, "anchorX middle"], {anchorX:'middle', cssClass:'mytext'});
     brd.create('text', [3, 5, "anchorX right"], {anchorX:'right', cssClass:'mytext'});
     brd.create('text', [3, 5, "anchorX right"], {anchorX:'right', cssClass:'mytext'});
    // Horizontal line at y=3
    brd.create('line', [-3, 0, 1], {strokeWidth:1, dash:2});
    brd.create('text', [1, 3, "Multiline text<br>default"], {cssClass:'mytext'});
    brd.create('text', [2.2, 3, "Multiline text<br>anchorY bottom"], {anchorY:'bottom', cssClass:'mytext'});
    brd.create('text', [3.4, 3, "Multiline text<br>anchorY middle"], {anchorY:'middle', cssClass:'mytext'});
    brd.create('text', [4.6, 3, "Multiline text<br>anchorY top"], {anchorY:'top', cssClass:'mytext'});


     // Horizontal line at y=2
     // Horizontal line at y=2
     brd.create('line', [-2, 0, 1], {strokeWidth:1, dash:2});
     brd.create('line', [-2, 0, 1], {strokeWidth:1, dash:2});
     brd.create('text', [1, 2, "Multiline text<br>default"], {cssClass:'mytext'});
     brd.create('text', [3, 2, "Multiline text<br>anchorX right<br>anchorY top"], {anchorX:'right', anchorY:'top', cssClass:'mytext'});
    brd.create('text', [2.2, 2, "Multiline text<br>anchorY bottom"], {anchorY:'bottom', cssClass:'mytext'});
    brd.create('text', [3.4, 2, "Multiline text<br>anchorY middle"], {anchorY:'middle', cssClass:'mytext'});
    brd.create('text', [4.6, 2, "Multiline text<br>anchorY top"], {anchorY:'top', cssClass:'mytext'});


     brd.create('text', [0,0,'Rotate'], {display:'internal', rotate:30});
     brd.create('text', [0.0,0.0,'Rotate'], {display:'internal', rotate:30});
</jsxgraph>
</jsxgraph>


Line 48: Line 52:
     brd.create('text', [4.6, 2, "Multiline text<br>anchorY top"], {anchorY:'top', cssClass:'mytext'});
     brd.create('text', [4.6, 2, "Multiline text<br>anchorY top"], {anchorY:'top', cssClass:'mytext'});


    // Horizontal line at y=2
    brd.create('line', [-2, 0, 1], {strokeWidth:1, dash:2}); 
    brd.create('text', [3, 2, "Multiline text<br>anchorX right<br>anchorY top"], {anchorX:'right', anchorY:'top', cssClass:'mytext'});
    brd.create('text', [0.0,0.0,'Rotate'], {display:'internal', rotate:30});
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Text]]

Latest revision as of 18:20, 16 November 2020

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.

123456123456789Rotate
Default
anchorX left
anchorX middle
anchorX right
Multiline text
default
Multiline text
anchorY bottom
Multiline text
anchorY middle
Multiline text
anchorY top
Multiline text
anchorX right
anchorY top

The underlying JavaScript code

    var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-1,10,7,-1], axis:true, keepaspectratio:false});

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

    // Horizontal line at y=2
    brd.create('line', [-2, 0, 1], {strokeWidth:1, dash:2});
    brd.create('text', [1, 2, "Multiline text<br>default"], {cssClass:'mytext'});
    brd.create('text', [2.2, 2, "Multiline text<br>anchorY bottom"], {anchorY:'bottom', cssClass:'mytext'});
    brd.create('text', [3.4, 2, "Multiline text<br>anchorY middle"], {anchorY:'middle', cssClass:'mytext'});
    brd.create('text', [4.6, 2, "Multiline text<br>anchorY top"], {anchorY:'top', cssClass:'mytext'});

    // Horizontal line at y=2
    brd.create('line', [-2, 0, 1], {strokeWidth:1, dash:2});  
    brd.create('text', [3, 2, "Multiline text<br>anchorX right<br>anchorY top"], {anchorX:'right', anchorY:'top', cssClass:'mytext'});

    brd.create('text', [0.0,0.0,'Rotate'], {display:'internal', rotate:30});
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Aligning_text&oldid=7051"