JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index

Elements
Classes

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:



Defined in: text.js.
Extends JXG.Text.

Element Summary
Constructor Attributes Constructor Name and Description
 
Attributes Summary
Field Attributes Field Name and Description
 
Anchor element Point, Text or Image of the text.
 
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
Element Detail
Text
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});


				
                
Attribute Detail
{Object} anchor
Anchor element Point, Text or Image of the text. If it exists, the coordinates of the text are relative to this anchor element. In this case, only numbers are possible coordinates, functions are not supported.
Defined in: options.js.
Default Value:
null

{String} anchorX
The horizontal alignment of the text. Possible values include 'auto', 'left', 'middle', and 'right'.
Defined in: options.js.
Default Value:
'left'

{String} anchorY
The vertical alignment of the text. Possible values include 'auto, 'top', 'middle', and 'bottom'. For MathJax or KaTeX, 'top' is recommended.
Defined in: options.js.
Default Value:
'middle'

{Array} attractors
List of attractor elements. If the distance of the text is less than attractorDistance the text is made to glider of this element.
Defined in: options.js.
Default Value:
empty

{String} cssClass
Apply CSS classes to the text in non-highlighted view. It is possible to supply one or more CSS classes separated by blanks.
Defined in: options.js.
Default Value:
'JXGtext'

{String} cssDefaultStyle
Default CSS properties of the HTML text element.

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

  1. JXG.Options.text.cssStyle
  2. JXG.Options.text.cssDefaultStyle
  3. JXG.Options.text.cssClass

Defined in: options.js.
If all texts should get its font-family from the default CSS class
before initializing the board
  JXG.Options.text.cssDefaultStyle = '';
  JXG.Options.text.highlightCssDefaultStyle = '';
should be called.
See:
Text#highlightCssDefaultStyle
Text#cssStyle
Text#highlightCssStyle
Default Value:
'font-family: Arial, Helvetica, Geneva, sans-serif;'

{String} cssStyle
CSS properties of the HTML text element.

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.

See:
Text#cssDefaultStyle
Text#highlightCssDefaultStyle
Text#highlightCssStyle
Default Value:
''

{Number} digits
Used to round texts given by a number.
Defined in: options.js.
Default Value:
2

{String} display
Determines the rendering method of the text. Possible values include 'html' and 'internal.
Defined in: options.js.
Default Value:
'html'

{String} dragArea
Sensitive area for dragging the text. Possible values are 'all', or something else. If set to 'small', a sensitivity margin at the right and left border is taken. This may be extended to left, right, ... in the future.
Defined in: options.js.
Default Value:
'all'

{Number} fontSize
The font size in pixels.
Defined in: options.js.
See:
Text#fontUnit
Default Value:
12

{String} fontUnit
CSS unit for the font size of a text element. Usually, this will be the default value 'px' but for responsive application, also 'vw', 'vh', vmax', 'vmin' or 'rem' might be useful.
Defined in: options.js.
var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'});


					
					

						
						
						
							
See:
Text#fontSize
Default Value:
'px'

{Boolean} formatNumber
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.

Otherwise, display the raw number.
Defined in: options.js.

Default Value:
false

{String} highlightCssClass
Apply CSS classes to the text in highlighted view. It is possible to supply one or more CSS classes separated by blanks.
Defined in: options.js.
Default Value:
'JXGtext'

{String} highlightCssDefaultStyle
Default CSS properties of the HTML text element in case of highlighting.

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 board
  JXG.Options.text.cssDefaultStyle = '';
  JXG.Options.text.highlightCssDefaultStyle = '';
should be called.
See:
Text#cssDefaultStyle
Text#cssStyle
Text#highlightCssStyle
Default Value:
'font-family: Arial, Helvetica, Geneva, sans-serif;'

{String} highlightCssStyle
CSS properties of the HTML text element in case of highlighting.

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.

See:
Text#cssDefaultStyle
Text#highlightCssDefaultStyle
Text#cssStyle
Default Value:
''

{object} intl
Internationalization support for texts consisting of a number only.

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
   }
}

{Boolean} isLabel
If enabled, the text will be handled as label. Intended for internal use.
Defined in: options.js.
Default Value:
false

{Object} katexMacros
Object or function returning an object that contains macros for KaTeX.
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:
{}

{Boolean} parse
If set to true, the text is parsed and evaluated. For labels parse==true results in converting names of the form k_a to subscripts. If the text is given by string and parse==true, the string is parsed as JessieCode expression.
Defined in: options.js.
Default Value:
true

{Number} rotate
Text rotation in degrees. Works for non-zero values only in combination with display=='internal'.
Defined in: options.js.
Default Value:
0

{Number} snapSizeX
Defines together with Text#snapSizeY the grid the text snaps on to. The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. If this value is equal to or less than 0, it will use the grid displayed by the major ticks of the default ticks of the default x axes of the board.
Defined in: options.js.
See:
Point#snapToGrid
Text#snapSizeY
JXG.Board#defaultAxes
Default Value:
1

{Number} snapSizeY
Defines together with Text#snapSizeX the grid the text snaps on to. The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. If this value is equal to or less than 0, it will use the grid displayed by the major ticks of the default ticks of the default y axes of the board.
Defined in: options.js.
See:
Point#snapToGrid
Text#snapSizeX
JXG.Board#defaultAxes
Default Value:
1

{Boolean} toFraction
Display number as integer + nominator / denominator. Works together with MathJax, KaTex or as plain text.
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

{Boolean} useASCIIMathML
If true, the input will be given to ASCIIMathML before rendering.
Defined in: options.js.
Default Value:
false

{Boolean} useCaja
If set to true and caja's sanitizeHTML function can be found it will be used to sanitize text output.
Defined in: options.js.
Default Value:
false

{Boolean} useKatex
If true, KaTeX will be used to render the input string. For this feature, katex.min.js and katex.min.css have to be included.

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

{Boolean} useMathJax
If true, MathJax will be used to render the input string. Supports MathJax 2 as well as Mathjax 3. It is recommended to use this option together with the option "parse: false". Otherwise, 4 backslashes (e.g. \\\\alpha) are needed instead of two (e.g. \\alpha).
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

{Boolean} visible

Defined in: options.js.
Default Value:
true

Attributes borrowed from other Elements
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 other Elements
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 other Elements
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 other Elements
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
Documentation generated by JsDoc Toolkit 2.4.0 on Wed Oct 23 2024 15:44:16 GMT+0200 (Mitteleuropäische Sommerzeit)