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.

Element Summary
Constructor Attributes	Constructor Name and Description
	Text

Attributes Summary
Field Attributes	Field Name and Description
	anchor Anchor element Point, Text or Image of the text.
	anchorX The horizontal alignment of the text.
	anchorY The vertical alignment of the text.
	attractors List of attractor elements.
	cssClass CSS class of the text in non-highlighted view.
	cssDefaultStyle Default CSS properties of the HTML text element.
	cssStyle CSS properties of the HTML text element.
	digits Used to round texts given by a number.
	display Determines the rendering method of the text.
	dragArea Sensitive area for dragging the text.
	fontSize The font size in pixels.
	fontUnit CSS unit for the font size of a text element.
	highlightCssClass CSS class of the text in highlighted view.
	highlightCssDefaultStyle Default CSS properties of the HTML text element in case of highlighting.
	highlightCssStyle CSS properties of the HTML text element in case of highlighting.
	isLabel If enabled, the text will be handled as label.
	parse If set to true, the text is parsed and evaluated.
	rotate Text rotation in degrees.
	snapSizeX Defines together with Text#snapSizeY the grid the text snaps on to.
	snapSizeY Defines together with Text#snapSizeX the grid the text snaps on to.
	useASCIIMathML If true, the input will be given to ASCIIMathML before rendering.
	useCaja If set to true and caja's sanitizeHTML function can be found it will be used to sanitize text output.
	useKatex If true, KaTeX will be used to render the input string.
	useMathJax 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

Element Detail

Text

Possible parent array combinations are:

{number|function} z Optional
{number|function} x
{number|function} y
{String|function} str

JXG.Board#create

Parent elements for text elements.

Parent elements can be two or three elements of type number, a string containing a GEONE_xT 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:

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

CSS class of the text in non-highlighted view.
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

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

{String} highlightCssClass

CSS class of the text in highlighted view.
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:: ''

{Boolean} isLabel

If enabled, the text will be handled as label. Intended for internal use.
Defined in: options.js.

Default Value:: false

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

Attributes borrowed from other Elements

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

JSXGraph 1.5.0 Reference

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.

Element Text