Superscript and subscript functionality is essential for rendering mathematical and chemical exprestions, such as exponents and element symbols, within canvas-based applications. In Fabric.js, text manipulation is primarily handled through Text, IText, and Textbox objects. This explanation focuses on implementing these typographic features within IText elements, with the same principles applying to the other text types.

Superscript Example

const mathExpression = new fabric.IText('32=9', {
  styles: {
    0: { // First line (index 0)
      1: { // Second character (index 1)
        deltaY: -14, // Move baseline upward
        fontSize: 24 // Reduce font size
      }
    }
  }
});

This code renders "3²=9". The deltaY property adjusts the text baseline; a negative value shifts it upward. The styles object targets specific characters using zero-based indices for line and character position.

Subscript Example

const chemicalFormula = new fabric.IText('H2O', {
  styles: {
    0: { // First line
      1: { // Second character ('2')
        deltaY: 0, // Baseline remains unchanged
        fontSize: 24 // Reduce font size only
      }
    }
  }
});

For the water molecule formula, the subscript is achieved solely by reducing the font size, as a downward baseline shift might not be visually optimal in this context.

Implementation Workflow

Creating superscript or subscript involves three key steps:

1. Identify the target character using its line and character indices.
2. Adjust the deltaY property to shift the character's baseline (upward for superscript, optionally downward for subscript).
3. Modify the fontSize property to make the character visually smaller than the surrounding text.

Character targeting within the styles object follows the pattern styles[lineIndex][characterIndex]. This method provides granular control over individual character styling.