Difference between revisions of "Rotate text"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) (New page: Text can be reotated with CSS transformations. In that case JSXGraph text elements have to be realized with HTML div elements, which is the default case. <jsxgraph> var brd = JSX.JSXGraph....) |
|||
| (13 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | Text can be | + | '''Update:''' This entry is obsolete and superseded by [[Texts and Transformations]]. |
| + | |||
| + | 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. | ||
| + | <html> | ||
| + | <style> | ||
| + | #my_t { | ||
| + | -webkit-transform: rotate(-90deg); | ||
| + | -moz-transform: rotate(-90deg); | ||
| + | -o-transform: rotate(-90deg); | ||
| + | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); | ||
| + | } | ||
| + | </style> | ||
| + | </html> | ||
<jsxgraph> | <jsxgraph> | ||
| − | var brd = | + | 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'}); | ||
</jsxgraph> | </jsxgraph> | ||
| + | |||
| + | ===The CSS/JavaScript source code=== | ||
| + | <source lang="css"> | ||
| + | #my_t { | ||
| + | -webkit-transform: rotate(-90deg); | ||
| + | -moz-transform: rotate(-90deg); | ||
| + | -o-transform: rotate(-90deg); | ||
| + | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); | ||
| + | } | ||
| + | </source> | ||
| + | The CSS and the JavaScript code is linked via the id ''my_t'' of the text element. | ||
| + | <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:Austragungsstueberl]] | ||
| + | Category:Examples | ||
Latest revision as of 14:40, 8 June 2011
Update: This entry is obsolete and superseded by Texts and Transformations.
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'});
Category:Examples
