Rotate text: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary  | 
				A WASSERMANN (talk | contribs) No edit summary  | 
				||
| Line 5: | Line 5: | ||
         -webkit-transform: rotate(-90deg);  |          -webkit-transform: rotate(-90deg);  | ||
         -moz-transform: rotate(-90deg);  |          -moz-transform: rotate(-90deg);  | ||
        -o-transform: rotate(-90deg);  | |||
         filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  |          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  | ||
}  | }  | ||
| Line 20: | Line 21: | ||
         -webkit-transform: rotate(-90deg);  |          -webkit-transform: rotate(-90deg);  | ||
         -moz-transform: rotate(-90deg);  |          -moz-transform: rotate(-90deg);  | ||
        -o-transform: rotate(-90deg);  | |||
         filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  |          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  | ||
}  | }  | ||
Revision as of 17:00, 23 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);
        -o-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
The CSS and the JavaScript code is linked via the id my_t of the text element.
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'});