Creates a new MathElement instance.
The MathML markup as a string.
Should contain valid MathML elements that describe the mathematical expression.
The content will be wrapped in a math element with the MathML namespace.
Common MathML elements include:
- <mi>: Identifier (variables like x, y)
- <mn>: Number
- <mo>: Operator (+, -, =, etc.)
- <mrow>: Group of elements
- <mfrac>: Fraction
- <msqrt>: Square root
- <msup>: Superscript (powers)
- <msub>: Subscript
- <mroot>: Root with index
// Simple addition
const addition = new MathElement(
'<mrow><mn>2</mn><mo>+</mo><mn>2</mn></mrow>'
);
// Variable expression
const variable = new MathElement(
'<mrow><mi>y</mi><mo>=</mo><mi>m</mi><mi>x</mi><mo>+</mo><mi>b</mi></mrow>'
);
// Fraction
const fraction = new MathElement(
'<mfrac><mn>1</mn><mn>2</mn></mfrac>'
);
// Square root
const sqrt = new MathElement(
'<msqrt><mn>16</mn></msqrt>'
);
// Power/exponent
const power = new MathElement(
'<msup><mi>x</mi><mn>2</mn></msup>'
);
// Complex formula (Pythagorean theorem)
const pythagorean = new MathElement(`
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
`);
// Integral
const integral = new MathElement(`
<mrow>
<msubsup>
<mo>∫</mo>
<mn>0</mn>
<mi>∞</mi>
</msubsup>
<mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo>
<mi>d</mi><mi>x</mi>
</mrow>
`);
ProtectedescapeProtectedEscapes special XML characters in text content to ensure valid XML output.
This method replaces XML special characters with their corresponding entity references to prevent XML parsing errors and potential security issues (XML injection). It should be used whenever inserting user-provided or dynamic text content into XML elements.
The following characters are escaped:
& becomes & (must be escaped first to avoid double-escaping)< becomes < (prevents opening of unintended tags)> becomes > (prevents closing of unintended tags)" becomes " (prevents breaking out of attribute values)' becomes ' (prevents breaking out of attribute values)This method is marked as protected so it's only accessible to classes that extend
SSMLElement, ensuring proper encapsulation while allowing all element implementations
to use this essential functionality.
The text content to escape
The text with all special XML characters properly escaped
// In a render method implementation
class TextElement extends SSMLElement {
private text: string = 'Hello & "world" <script>';
render(): string {
// Escapes to: Hello & "world" <script>
return `<text>${this.escapeXml(this.text)}</text>`;
}
}
// Edge cases handled correctly
this.escapeXml('5 < 10 & 10 > 5');
// Returns: '5 < 10 & 10 > 5'
this.escapeXml('She said "Hello"');
// Returns: 'She said "Hello"'
this.escapeXml("It's a test");
// Returns: 'It's a test'
// Prevents XML injection
this.escapeXml('</voice><voice name="evil">');
// Returns: '</voice><voice name="evil">'
Renders the math element as an SSML XML string.
Generates the <math> element with the MathML namespace and the provided
MathML content. The namespace attribute is required for proper interpretation
of the mathematical markup. The MathML content is inserted directly without
escaping as it should already be valid XML markup.
The XML string representation of the math element in the format:
<math xmlns="http://www.w3.org/1998/Math/MathML">mathML content</math>
// Simple expression
const math1 = new MathElement('<mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow>');
console.log(math1.render());
// Output: <math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow></math>
// Fraction
const math2 = new MathElement('<mfrac><mn>3</mn><mn>4</mn></mfrac>');
console.log(math2.render());
// Output: <math xmlns="http://www.w3.org/1998/Math/MathML"><mfrac><mn>3</mn><mn>4</mn></mfrac></math>
// Complex expression with multiple elements
const math3 = new MathElement(`
<mrow>
<mi>E</mi>
<mo>=</mo>
<mi>m</mi>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
`);
console.log(math3.render());
// Output: <math xmlns="http://www.w3.org/1998/Math/MathML">
// <mrow>
// <mi>E</mi>
// <mo>=</mo>
// <mi>m</mi>
// <msup>
// <mi>c</mi>
// <mn>2</mn>
// </msup>
// </mrow>
// </math>
SSML element for embedding mathematical expressions using MathML.
The
<math>element allows you to include Mathematical Markup Language (MathML) content within SSML documents. This enables text-to-speech engines to correctly pronounce mathematical formulas, equations, and expressions. The speech synthesizer interprets the MathML markup and converts it to natural spoken mathematics, handling complex notation like fractions, superscripts, roots, and mathematical symbols appropriately.MathML is an XML-based language specifically designed for describing mathematical notation and capturing both its structure and content. When embedded in SSML, it ensures that mathematical content is spoken clearly and accurately, making it essential for educational content, scientific applications, and any scenario involving mathematical expressions.
Example
Remarks
See