Difference between revisions of "Rotate text"

From JSXGraph Wiki
Jump to navigationJump to search
Line 14: Line 14:
 
var t = brd.create('text',[0,2,function(){return 'text = '+s.Value().toFixed(3);}],{id:'my_t'});
 
var t = brd.create('text',[0,2,function(){return 'text = '+s.Value().toFixed(3);}],{id:'my_t'});
 
</jsxgraph>
 
</jsxgraph>
 +
 +
===The CSS/JavaScript source code===
 +
<source lang="css">
 +
#my_t {
 +
        -webkit-transform: rotate(-90deg);
 +
        -moz-transform: rotate(-90deg);
 +
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 +
}
 +
</source>
 +
 +
<source lang="javascript">
 +
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5], grid:true});
 +
var s = brd.create('slider',[[-3,0],[3,0],[0,1,10]], {name:'s'});
 +
var t = brd.create('text',[0,2,function(){return 'text = '+s.Value().toFixed(3);}],{id:'my_t'});
 +
</source>
 +
 +
[[Category:Examples]]

Revision as of 12:30, 15 December 2009

Text can be rotated with CSS transformations. In that case JSXGraph text elements have to be realized with HTML div elements, which is the default case.

The CSS/JavaScript source code

#my_t {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5], grid:true});
var s = brd.create('slider',[[-3,0],[3,0],[0,1,10]], {name:'s'});
var t = brd.create('text',[0,2,function(){return 'text = '+s.Value().toFixed(3);}],{id:'my_t'});