Aligning text: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 11: Line 11:
     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});


     brd.create('line', [-3, 1, 0], {strokeWidth:1, dash:2});
    // 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, 8, "Default"], {cssClass:'mytext'});
     brd.create('text', [3, 7, "anchorX left"], {anchorX:'left', cssClass:'mytext'});
     brd.create('text', [3, 7, "anchorX left"], {anchorX:'left', cssClass:'mytext'});
Line 17: Line 18:
     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=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', [1, 2, "Multiline text<br>default"], {cssClass:'mytext'});

Revision as of 07:55, 19 October 2012

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'.

The underlying JavaScript code

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

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

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