2009年1月19日月曜日

XHTML+SVG+MathMLをValidateする

コード(Test.java)はこちら

xhtml_svg_mathml.xml (w3.orgからDTDの指定を抜いてある)
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style/graph.css"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>XHTML と MathML と SVG の混在例</title>
</head>
<body>
<h1><a href="http://www.w3.org/TR/XHTMLplusMathMLplusSVG/"><abbr xml:lang="en"
title="Extensible HyperText Markup Language">XHTML</abbr> と
<abbr xml:lang="en" title="Mathematical Markup Language">MathML</abbr> と
<abbr xml:lang="en" title="Scalable Vector Graphics">SVG</abbr> の混在</a>例</h1>

<div class="desc">
<p>右図は
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>y</mi>
<mo>=</mo>
<mrow>
<mi>a</mi>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mi>b</mi>
<mi>x</mi>
<mo>+</mo>
<mi>c</mi>
</mrow>
</math>
のグラフである。</p>

<p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>x</mi>
</math>
軸とグラフの交点の
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>x</mi>
</math>
座標は2次方程式
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>a</mi>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mi>b</mi>
<mi>x</mi>
<mo>+</mo>
<mi>c</mi>
</mrow>
<mo>=</mo>
<mn>0</mn>
</math>
の解であり、その座標は次のようになる。</p>

<div class="mathexp">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>A</mi>
<mfenced>
<mfrac>
<mrow>
<mo>-</mo>
<mi>b</mi>
<mo>-</mo>
<msqrt>
<mrow>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi>a</mi>
</mrow>
</mfrac>
<mn>0</mn>
</mfenced>
</math>

<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>B</mi>
<mfenced>
<mfrac>
<mrow>
<mo>-</mo>
<mi>b</mi>
<mo>+</mo>
<msqrt>
<mrow>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi>a</mi>
</mrow>
</mfrac>
<mn>0</mn>
</mfenced>
</math>
</div>
</div>

<div class="graph">
<svg:svg xmlns:svg="http://www.w3.org/2000/svg"
width="8cm" height="8cm" viewBox="0 0 100 100">
<svg:g style="stroke: black; stroke-width: 1; font-size: 10px">
<svg:path d="M 10,80 L 90,80" />
<svg:path d="M 20,90 L 20,10" />
<svg:text x="88" y="88">x</svg:text>
<svg:text x="15" y="10">y</svg:text>
</svg:g>
<svg:g style="stroke: red; stroke-width: 1; fill: none">
<svg:path d="M 10,10 Q 50,170 90,10" />
</svg:g>
<svg:g style="font-size: 10px ; fill: blue">
<svg:text x="30" y="90">A</svg:text>
<svg:text x="65" y="90">B</svg:text>
</svg:g>
</svg:svg>
</div>

<p class="bottom">2次関数のグラフ</p>

</body>
</html>

Safari 3.2.1
)Firefox 3.0.5


MathMLのXSD(mathml2/mathml2.xsd)
MathMLのXMLSchemaについてのサイトにあるtgz archiveよりdownload
他の.xsdファイル
以前のエントリ(1, 2)を参照してください.編集が必要です.


で,xsdのredefineで混ぜる.
xhtml_svg_mathml.xsd
<?xml version="1.0" encoding="UTF-8" ?>
<xsd:schema
targetNamespace="http://www.w3.org/1999/xhtml"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:math="http://www.w3.org/1998/Math/MathML"
xmlns:xsd="http://www.w3.org/2001/XMLSchema">

<xsd:import
namespace="http://www.w3.org/2000/svg"
schemaLocation="svg.xsd"/>

<xsd:import
namespace="http://www.w3.org/1998/Math/MathML"
schemaLocation="mathml2/mathml2.xsd"/>

<xsd:redefine
schemaLocation="xhtml.xsd">
<xsd:group
name="inline">
<xsd:choice>
<xsd:element
ref="svg:svg"/>
<xsd:element
ref="math:math"/>
<xsd:group
ref="xhtml:inline"/>
</xsd:choice>
</xsd:group>
</xsd:redefine>


</xsd:schema>


> java Test xhtml_svg_mathml.xsd xhtml_svg_mathml.xml


間違い等あればコメントいただければ幸いです.

0 件のコメント: