Element Text
JXG.CoordsElement,JXG.GeometryElement
↳ JXG.Text
↳ Text
Construct and handle texts. The coordinates can either be abslute (i.e. respective to the coordinate system of the board) or be relative to the coordinates of an element given in Text#anchor.
HTML, MathJaX, KaTeX and GEONExT syntax can be handled.
There are two ways to display texts:
- using the text element of the renderer (canvas or svg). In most cases this is the suitable approach if speed matters. However, advanced rendering like MathJax, KaTeX or HTML/CSS are not possible.
- using HTML <div>. This is the most flexible approach. The drawback is that HTML can only be display "above" the geometry elements. If HTML should be displayed in an inbetween layer, conder to use an element of type ForeignObject (available in svg renderer, only).
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.
|
|
Apply CSS classes to 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.
|
|
If the text content is solely a number and
this attribute is true (default) then the number is either formatted
according to the number of digits
given by the attribute 'digits' or converted into a fraction if 'toFraction'
is true.
|
|
Apply CSS classes to 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.
|
|
Internationalization support for texts consisting of a number only.
|
|
If enabled, the text will be handled as label.
|
|
Object or function returning an object that contains macros for KaTeX.
|
|
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.
|
|
Display number as integer + nominator / denominator.
|
|
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, bounds, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, escapeTicks, expandShortMath, generateTerm, getAnchorX, getAnchorY, getNumberOfConflicts, getSize, hasPoint, notifyParents, poorMansTeX, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, unescapeTicks, update, updateRenderer, updateSize, updateText, utf8_decode, valueTagToJessieCode
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
- Methods borrowed from class JXG.CoordsElement:
- _anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, 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 beside the last 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' an HTML division tag is created to display the text. In this case it is also possible to use MathJax, KaTeX, or ASCIIMathML. If neither of these is used, basic Math rendering is applied.
In case of 'internal', an SVG 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'
Otherwise, display the raw number.
Defined in: options.js.
- Default Value:
- false
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:
- ''
Setting the local overwrites the board-wide locale set in the board attributes. The JSXGraph attribute digits is overruled by the Intl attributes "minimumFractionDigits" and "maximumFractionDigits". See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat for more information about possible options.
See below for an example where the text is composed from a string and a locale formatted number.
Defined in: options.js.
var t = board.create('text', [1, 2, -Math.PI*100], { digits: 2, intl: { enabled: true, options: { style: 'unit', unit: 'celsius' } } });
var t = board.create('text', [0.05, -0.2, ''], { intl: { enabled: true, locale: 'it-IT', options: { style: 'unit', unit: 'kilometer-per-hour', unitDisplay: 'narrow', maximumFractionDigits: 2 } } }); // Set dynamic text consisting of text and number. t.setText(function() { var txt = 'Speed: ', number = t.X(); // Add formatted number to variable txt // with fallback if locale is not supported. if (t.useLocale()) { txt += t.formatNumberLocale(number); } else { txt += JXG.toFixed(number, 2); } return txt; });
- See:
- JXG.Board#intl
- Default Value:
-
{ enabled: 'inherit', options: { minimumFractionDigits: 0, maximumFractionDigits: 2 } }
Defined in: options.js.
- Default Value:
- false
Defined in: options.js.
// to globally apply macros to all text elements use: JXG.Options.text.katexMacros = {'\\jxg': 'JSXGraph is awesome'}; const board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-2, 5, 8, -5], axis:true }); // This macro only get applied to the p ('text') element var p = board.create('text', [1, 0, '\\jsg \\sR '], { katexMacros: {'\\sR':'\\mathbb{R}'} });
- Default Value:
- {}
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.
board.create('text', [2, 2, 2 / 7], { anchorY: 'top', toFraction: true, useMathjax: true }); board.create('text', [2, -2, 2 / 19], { toFraction: true, useMathjax: false });
- See:
- JXG#toFraction
- Default Value:
- false
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
Defined in: options.js.
- Default Value:
- true
- Attributes borrowed from class JXG.GeometryElement:
- dash, dashScale, draft, dragToTopOfLayer, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, layer, lineCap, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, viewport, 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, bounds, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, escapeTicks, expandShortMath, generateTerm, getAnchorX, getAnchorY, getNumberOfConflicts, getSize, hasPoint, notifyParents, poorMansTeX, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, unescapeTicks, update, updateRenderer, updateSize, updateText, utf8_decode, valueTagToJessieCode
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
- Methods borrowed from class JXG.CoordsElement:
- _anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, X, XEval, Y, YEval, Z, ZEval