Interface EQN_Lines

Equation lines.

Options can be an object, or an array in the property order below

The equation lines function can split an equation into multiple lines. This might be because one line is too long, or it might be convenient to display different forms of the same equation simultaneously on different lines and then animate between them.

Lines can be justified to the left, center or right, or lines can be aligned with a specific element from each line (for instance an equals sign). To justify to a specific element, use justify: 'element' and then define the element name in the justify property of each line.

Lines can be aligned in y with either the top most part of the top line, the bottom most part of the bottom line, the middle of the lines or any of the line's baselines.

Spacing between lines is defined as either the space between the lowest point (descent) of one line to the highest point (ascent) of the next, or as the space between line baselines.

content TypeEquationPhrase | EQN_Line[] — Array of equation phrases or equation line objects
justify left | right | center | element — how to align the lines in x. Use 'element' to align the lines with a specific element from each line (that is defined with the justify property in each line) ('left')
baselineSpace number | null — default space between baselines of lines. If not null then will override space (null).
space number — default space between descent of one line and ascent of the next line (0).
yAlign number | top | bottom | middle — How to align the lines in y. number can be any line index, and it will align the baseline of that line. So, using 0 will align the first line's baseline. (0)
fullContentBounds boolean — use full bounds of content, overriding any inSize=false properties in the content (false)

See

To test examples, append them to the boilerplate

Example

// Two lines, array definition
figure.add({
  name: 'eqn',
  make: 'equation',
  forms: {
    0: {
      lines: [
        [
          ['a', '_ = ', 'b', '_ + _1', 'c', '_ - _1', 'd'],
          ['_ + _2', 'e', '_ - _2', 'f'],
        ],
        'right',
        0.2,
      ],
    },
  },
});

Example

// Two lines animating to 1
figure.add({
  name: 'eqn',
  make: 'equation',
  elements: {
    equals1: ' = ',
    equals2: ' = ',
  },
  forms: {
    0: {
      lines: {
        content: [
          {
            content: ['a_1', 'equals1', 'b', '_ + ', 'c'],
            justify: 'equals1',
          },
          {
            content: ['d', '_ - ', 'e', 'equals2', 'a_2'],
            justify: 'equals2',
          },
        ],
        space: 0.08,
        justify: 'element',
      },
    },
    1: ['d', '_ - ', 'e', 'equals1', 'b', '_ + ', 'c'],
  },
});

figure.getElement('eqn').showForm(0);
figure.getElement('eqn').animations.new()
  .goToForm({
    delay: 1, target: '1', duration: 1, animate: 'move',
  })
  .start();
@interface

Interface EQN_Lines

See

Example

Example

Settings