Introdução ao MathML

O HTML5 incorpora o padrão MathML. Trata-se de uma linguagem de marcação, baseada em XML, para representação de fórmulas matemáticas. Você pode ler mais sobre MathML em http://www.w3.org/Math/. Para incorporar código MathML em seu documento HTML5, não preciso fazer declarações especiais. Basta escrever normalmente o código, iniciando com um elemento math. Veja este exemplo:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>MathML</title>
 	</head>
 	<body>
		<math xmlns="http://www.w3.org/1998/Math/MathML">
			<mrow>
				<mi>x</mi>
				<mo>=</mo>
				<mfrac>
					<mrow>
						<mo form="prefix">&minus;</mo>
						<mi>b</mi>
						<mo>&PlusMinus;</mo>
						<msqrt>
							<msup>
								<mi>b</mi>
								<mn>2</mn>
							</msup>
							<mo>&minus;</mo>
							<mn>4</mn>
							<mo>&InvisibleTimes;</mo>
							<mi>a</mi>
							<mo>&InvisibleTimes;</mo>
							<mi>c</mi>
						</msqrt>
					</mrow>
					<mrow>
						<mn>2</mn>
						<mo>&InvisibleTimes;</mo>
						<mi>a</mi>
					</mrow>
				</mfrac>
			</mrow>
		</math>
	</body>
</html>

Veja como esse exemplo é renderizado no navegador:

Exemplo de MathML

Mesmo que você nunca tenha visto MathML, e este código pareça um pouco assustador, dê uma olhada com calma no código, comparando com a imagem do resultado, e você vai perceber que é muito simples. Talvez algo que possa deixá-lo confuso é a entidade &InvisibleTimes;, que aparece algumas vezes no código. Ela está lá para separar os fatores 4ac, por exemplo. Esses valores são multiplicados, é o que a fórmula representa, mas não queremos colocar um operador de multiplicação entre eles, porque por convenção se simplesmente escrevemos 4ac qualquer leitor saberá que isso é uma multiplicação.

Por que então se preocupar em inserir &InvisibleTimes;? Você vai notar que se remover a entidade e a tag mo correspondente o resultado visual será o mesmo. Colocamos &InvisibleTimes; porque MathML não é só visual, é semântica. Um outro agente de usuário pode ter recursos de importar essa fórmula para uma ferramenta de cálculo, por exemplo.

Artigo Original: MathML e SVG

Sobre... CSS3 HTML5.1 JavaScript