Element Text
JXG.CoordsElement,JXG.GeometryElement
↳ JXG.Text
↳ Text
Construct and handle texts.
The coordinates can be relative to the coordinates of an element
given in JXG.Options#text.anchor.
MathJaX, HTML and GEONExT syntax can be handled.
Defined in: text.js.
Extends
JXG.Text.
Constructor Attributes | Constructor Name and Description |
---|---|
Field Attributes | Field Name and Description |
---|---|
The horizontal alignment of the text.
|
|
The vertical alignment of the text.
|
|
List of attractor elements.
|
|
CSS class of the text in non-highlighted view.
|
|
Default CSS properties of the HTML text element.
|
|
CSS properties of the HTML text element.
|
|
Used to round texts given by a number.
|
|
Determines the rendering method of the text.
|
|
Sensitive area for dragging the text.
|
|
The font size in pixels.
|
|
CSS unit for the font size of a text element.
|
|
CSS class of the text in highlighted view.
|
|
Default CSS properties of the HTML text element in case of highlighting.
|
|
CSS properties of the HTML text element in case of highlighting.
|
|
If enabled, the text will be handled as label.
|
|
If set to true, the text is parsed and evaluated.
|
|
Text rotation in degrees.
|
|
Defines together with Text#snapSizeY the grid the text snaps on to.
|
|
Defines together with Text#snapSizeX the grid the text snaps on to.
|
|
If true, the input will be given to ASCIIMathML before rendering.
|
|
If set to true and caja's sanitizeHTML function can be found it
will be used to sanitize text output.
|
|
If true, KaTeX will be used to render the input string.
|
|
If true, MathJax will be used to render the input string.
|
- Methods borrowed from class JXG.Text:
- _createFctUpdateText, _setText, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, expandShortMath, generateTerm, getNumberofConflicts, getSize, hasPoint, notifyParents, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, update, updateRenderer, updateSize, updateText, utf8_decode
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, labelColor, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility
- Methods borrowed from class JXG.CoordsElement:
- _anim, addAnchor, addConstraint, Dist, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, X, XEval, Y, YEval, Z, ZEval
- Events borrowed from class JXG.GeometryElement:
- attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
-
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create
with type "text".
- Possible parent array combinations are:
-
{number|function} z Optional
{number|function} x
{number|function} y
{String|function} str
- Parent elements for text elements.
Parent elements can be two or three elements of type number, a string containing a GEONExT constraint, or a function which takes no parameter and returns a number. Every parent element determines one coordinate. If a coordinate is given by a number, the number determines the initial position of a free text. If given by a string or a function that coordinate will be constrained that means the user won't be able to change the texts's position directly by mouse because it will be calculated automatically depending on the string or the function's return value. If two parent elements are given the coordinates will be interpreted as 2D affine Euclidean coordinates, if three such parent elements are given they will be interpreted as homogeneous coordinates.
The text to display may be given as string or as function returning a string. There is the attribute 'display' which takes the values 'html' or 'internal'. In case of 'html' a HTML division tag is created to display the text. In this case it is also possible to use ASCIIMathML. Incase of 'internal', a SVG or VML text element is used to display the text.
- See:
- JXG.Text
- Examples:
// Create a fixed text at position [0,1]. var t1 = board.create('text',[0,1,"Hello World"]);
// Create a variable text at a variable position. var s = board.create('slider',[[0,4],[3,4],[-2,0,2]]); var graph = board.create('text', [function(x){ return s.Value();}, 1, function(){return "The value of s is"+JXG.toFixed(s.Value(), 2);} ] );
// Create a text bound to the point A var p = board.create('point',[0, 1]), t = board.create('text',[0, -1,"Hello World"], {anchor: p});
Defined in: options.js.
- Default Value:
- null
Defined in: options.js.
- Default Value:
- 'left'
Defined in: options.js.
- Default Value:
- 'middle'
Defined in: options.js.
- Default Value:
- empty
Defined in: options.js.
- Default Value:
- 'JXGtext'
The CSS properties which are set here, are handed over to the style property of the HTML text element. That means, they have higher property than any CSS class.
If a property which is set here should be overruled by a CSS class then this property should be removed here.
The reason, why this attribute should be kept to its default value at all, is that screen dumps of SVG boards with board.renderer.dumpToCanvas() will ignore the font-family if it is set in a CSS class. It has to be set explicitly as style attribute.
In summary, the order of priorities from high to low is
- JXG.Options.text.cssStyle
- JXG.Options.text.cssDefaultStyle
- JXG.Options.text.cssClass
Defined in: options.js.
If all texts should get its font-family from the default CSS class before initializing the boardJXG.Options.text.cssDefaultStyle = ''; JXG.Options.text.highlightCssDefaultStyle = '';should be called.
- Default Value:
- 'font-family: Arial, Helvetica, Geneva, sans-serif;'
The CSS properties which are set here, are handed over to the style property
of the HTML text element. That means, they have higher property than any
CSS class.
Defined in: options.js.
- Default Value:
- ''
Defined in: options.js.
- Default Value:
- 2
Defined in: options.js.
- Default Value:
- 'html'
Defined in: options.js.
- Default Value:
- 'all'
Defined in: options.js.
- See:
- Text#fontUnit
- Default Value:
- 12
Defined in: options.js.
var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'});
- See:
- Text#fontSize
- Default Value:
- 'px'
Defined in: options.js.
- Default Value:
- 'JXGtext'
The CSS properties which are set here, are handed over to the style property
of the HTML text element. That means, they have higher property than any
CSS class.
Defined in: options.js.
If all texts should get its font-family from the default CSS class before initializing the boardJXG.Options.text.cssDefaultStyle = ''; JXG.Options.text.highlightCssDefaultStyle = '';should be called.
- Default Value:
- 'font-family: Arial, Helvetica, Geneva, sans-serif;'
The CSS properties which are set here, are handed over to the style property
of the HTML text element. That means, they have higher property than any
CSS class.
Defined in: options.js.
- Default Value:
- ''
Defined in: options.js.
- Default Value:
- false
Defined in: options.js.
- Default Value:
- true
Defined in: options.js.
- Default Value:
- 0
Defined in: options.js.
- Default Value:
- 1
Defined in: options.js.
- Default Value:
- 1
Defined in: options.js.
- Default Value:
- false
Defined in: options.js.
- Default Value:
- false
The example below does not work, because there is a conflict with the MathJax library which is used below.
Defined in: options.js.
JXG.Options.text.useKatex = true; const board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-2, 5, 8, -5], axis:true }); var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { suffixlabel:'t_1=', unitLabel: ' \\text{ ms}', snapWidth:0.01}); func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); text1 = board.create('text', [5, 1, function(){ return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}'; }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'});
- Default Value:
- false
Defined in: options.js.
// Before loading MathJax, it has to be configured something like this: window.MathJax = { tex: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], packages: ['base', 'ams'] }, options: { ignoreHtmlClass: 'tex2jax_ignore', processHtmlClass: 'tex2jax_process' } }; // Display style board.create('text',[ 2,2, function(){return '$$X=\\frac{2}{x}$$'}], { fontSize: 15, color:'green', useMathJax: true}); // Inline style board.create('text',[-2,2, function(){return '$X_A=\\frac{2}{x}$'}], { fontSize: 15, color:'green', useMathJax: true}); var A = board.create('point', [-2, 0]); var B = board.create('point', [1, 0]); var C = board.create('point', [0, 1]); var graph = board.create('ellipse', [A, B, C], { fixed: true, withLabel: true, strokeColor: 'black', strokeWidth: 2, fillColor: '#cccccc', fillOpacity: 0.3, highlightStrokeColor: 'red', highlightStrokeWidth: 3, name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$', label: {useMathJax: true} }); var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'], { fontSize: 24, parse: false }); var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}], { fontSize: 24, useMathJax: true });
// Load MathJax: // <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"<</script> // function and its derivative var f1 = function(x) { return x * x * x; }, graph1 = board.create('functiongraph', [f1, -0.1, 1.1]), A = board.create('glider', [0.5, f1(0.5), graph1], { name: 'f(x)', color: 'black', face:'x', fixed: true, size: 3, label: {offset: [-30, 10], fontSize: 15} }), B = board.create('glider', [0.7, f1(0.7), graph1], { name: 'f(x+Δx)', size: 3, label: {offset: [-60, 10], fontSize: 15} }), secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}), a_h_segment = board.create('segment', [A, [ function(){ return B.X() > A.X() ? B.X() : A.X()}, function(){ return B.X() > A.X() ? A.Y() : B.Y()} ]],{ name: 'Δx', dash: 1, color: 'black'}); b_v_segment = board.create('segment', [B, [ function(){ return B.X() > A.X() ? B.X() : A.X()}, function(){ return B.X() > A.X() ? A.Y() : B.Y()} ]],{ name: 'Δy', dash: 1, color: 'black'}), ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2 ], {visible: false}); board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], { anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top' }); mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false}); board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], { anchor: mb, useMathJax: true, fixed: true, color: 'green' }); dval = board.create('text',[0.1, 0.8, function(){ return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) + '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]'; }],{fontSize: 15, useMathJax: true});
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true}); board.options.text.useMathjax = true; a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], { suffixlabel:'\\(t_1=\\)', unitLabel: ' \\(\\text{ ms}\\)', snapWidth:0.01}), func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"}); text1 = board.create('text', [5, 1, function(){ return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)'; }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false});
- See:
- Text#parse
- Default Value:
- false
- Attributes borrowed from class JXG.GeometryElement:
- dash, draft, dragToTopOfLayer, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, needsRegularUpdate, precision, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, visible, withLabel
- Fields borrowed from class JXG.Text:
- size
- Fields borrowed from class JXG.GeometryElement:
- _org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc
- Fields borrowed from class JXG.CoordsElement:
- coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects
- Methods borrowed from class JXG.Text:
- _createFctUpdateText, _setText, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, expandShortMath, generateTerm, getNumberofConflicts, getSize, hasPoint, notifyParents, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, update, updateRenderer, updateSize, updateText, utf8_decode
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, labelColor, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility
- Methods borrowed from class JXG.CoordsElement:
- _anim, addAnchor, addConstraint, Dist, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, X, XEval, Y, YEval, Z, ZEval