1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

MathMLの数式の要素内にハイパーリンクを入れる方法

Last updated at Posted at 2020-11-01

#背景

現在HTML5になって、HTMLとMathMLが混在できるようになっていますが、
Microsoft EdgeやGoogle ChromeではMathMLの中にHTMLのaタグを入れるとエラーになるため、
MathMLの数式にリンクを入れる方法を探しました。

#実装方法

MathML2→3の変更点 https://www.w3.org/TR/MathML3/appendixf.html
日本語訳 http://washitake.com/MathML/ver3/appendixf.html

MathMLの仕様によると、MathML3になってからMathMLのタグすべてにhref属性が追加されたので、__MathMLの個々のタグのhref属性にリンクを入れる__ことでハイパーリンクを実装することができます。MathJaxのCDNを付ければ、MathJaxでも動作します。

MathMLの要素リンク
<math>
	<mfrac>
		<mi href="http://washitake.com/MathML/ver3/appendixf.html">y</mi>
		<mi>x</mi>
	</mfrac>
</math>

MDN web docsのブラウザー互換性の項目によると、MathMLの全てのタグにhref属性を実装しきれていないブラウザーがある(例:miタグ)とされていますが、実際に対応していないとされるiPhoneのSafariで試してみると動作しました。徐々に対応しているのかもしれません。

##互換性対策

ただもし実装状況が気になるのであれば、mrowタグのhref属性に関してはほぼすべてのMathML対応ブラウザー(FirefoxとSafariのみ)が対応しているようですので、__リンクを付けたいMathMLタグの外側にhref属性付きmrowタグで囲む__方法で対応すれば無難です。MathJaxのCDNを付ければ、MathJaxでも動作します。

MathML(mrowで囲む)
<math>
	<mfrac>
		<mrow href="http://washitake.com/MathML/ver3/appendixf.html">
			<mi>y</mi>
		</mrow>
		<mi>x</mi>
	</mfrac>
</math>

ただ本来はMathMLの全てのタグにhref属性があることが仕様なので、仕様通りに実装されることが望ましいので、互換性対策だけのためにmrowで囲むことは必要なくなってくると考えられますが、元々mrowタグは複数タグを一つのグループにまとめるための要素なので、その用途上MathMLのタグの中では比較的使用頻度が高いタグです。

特に分数や上付き下付き文字にはほぼ不可欠と言っても過言ではないタグですので、互換性用途以外でhref属性付きmrowタグで囲む場面は出てくると考えられます。

#複数要素に対するハイパーリンク

MathML(複数要素を対象にしたハイパーリンク)
<math>
	<mfrac>
		<mrow href="http://washitake.com/MathML/ver3/appendixf.html">
			<mo>d</mo>
			<msup>
				<mi>e</mi>
				<mrow><mi>-i</mi><mo>&x2062;</mo><mi>x</mi></mrow>
			</msup>
		</mrow>
		<mrow><mo>d</mo><mi>x</mi></mrow>
	</mfrac>
</math>

__href属性付きmrowタグで囲めば動作します。__MathJaxのCDNを付ければ、MathJaxでも動作します。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?