<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="xhtml-default.css" type="text/css"?>
<?xml-stylesheet href="ruby-inlinetable.css" type="text/css"?>
<!DOCTYPE html PUBLIC "-//mimasa//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"DTD/xhtml-math-svg.dtd">
<!--"http://www.w3.org/People/mimasa/test/schemas/DTD/xhtml-math-svg.dtd"-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
  <title xml:lang="en">Sample XHTML + MathML + SVG document</title>
  <link rev="made" href="mailto:mimasa@w3.org" />
  <link href="xhtml-default.css" type="text/css" rel="stylesheet" />
  <link href="ruby-inlinetable.css" type="text/css" rel="stylesheet"  />
  <meta xml:lang="en" name="keywords" content="XHTML, MathML, SVG, sample" />
</head>
<body>

<h1 id="title" class="title" title="document title">Sample XHTML 1.1 plus
MathML 2.0 plus SVG 1.1 document</h1>

<h2 id="ToC">Contents</h2>

<ul>
  <li><a href="#ruby">XHTML 1.1 sample (Ruby)</a></li>
  <li><a href="#math">MathML sample</a></li>
  <li><a href="#svg">SVG sample</a></li>
</ul>

<h2 id="ruby">XHTML 1.1 sample (Ruby)</h2>

<h3>Simple ruby, with <code>rp</code> fall-back</h3>

<p>
<ruby xml:lang="ja"
><rb>斎藤信男</rb>
<rp>(</rp><rt>さいとうのぶお</rt><rp>)</rp
></ruby>
</p>

<h3>Simple ruby, without <code>rp</code> fall-back</h3>

<p>
<ruby xml:lang="ja"><rb>斎藤信男</rb>
<rt>さいとうのぶお</rt></ruby>
</p>

<h3>Complex ruby</h3>

<p>
<ruby xml:lang="ja"><rbc><rb>斎</rb><rb>藤</rb><rb>信</rb><rb>男</rb></rbc>
<rtc><rt>さい</rt><rt>とう</rt><rt>のぶ</rt><rt>お</rt></rtc></ruby>
</p>

<h3>Complex ruby, with multiple ruby texts</h3>

<p>
<ruby>
  <rbc>
    <rb>10</rb>
    <rb>31</rb>
    <rb>2002</rb>
  </rbc>
  <rtc>
    <rt><abbr title="Month">Mon.</abbr></rt>
    <rt>Day</rt>
    <rt>Year</rt>
  </rtc>
  <rtc>
    <rt rbspan="3">Expiration Date</rt>
  </rtc>
</ruby>
</p>

<p>Multilingual ruby example, Hebrew base (right-to-left)
with Japanese katakana ruby (right-to-left, quite unusual but
occasionally used) and English ruby (left-to-right)</p>

<p>
<ruby>
  <rbc>
    <rb xml:lang="he" dir="rtl">&#x05D0;&#x05D3;&#x05DD;</rb>
  </rbc>
  <rtc>
    <rt xml:lang="ja"><bdo dir="rtl">アーダーム</bdo></rt>
  </rtc>
  <rtc>
    <rt xml:lang="en" dir="ltr">Adam</rt>
  </rtc>
</ruby>
</p>


<h2 id="math">MathML sample</h2>

<p>Math expression in a display style:</p>

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mrow>
    <mi>y</mi>
    <mo>=</mo>
    <mfrac>
      <mn>1</mn>
      <msqrt>
        <mrow>
          <msup>
            <mi>x</mi>
            <mn>2</mn>
          </msup>
          <mo>+</mo>
          <mn>1</mn>
        </mrow>
      </msqrt>
    </mfrac>
  </mrow>
</math>

<p xmlns="http://www.w3.org/1999/xhtml">
Math expression
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mrow>
    <mi>y</mi>
    <mo>=</mo>
    <mfrac>
      <mn>1</mn>
      <msqrt>
        <mrow>
          <msup>
            <mi>x</mi>
            <mn>2</mn>
          </msup>
          <mo>+</mo>
          <mn>1</mn>
        </mrow>
      </msqrt>
    </mfrac>
  </mrow>
</math>
inside an XHTML paragraph</p>

<h2 id="svg">SVG sample</h2>

<p>
  <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="8cm" height="8cm"
     version="1.1">
	<svg:style type="text/css" xml:space="preserve"></svg:style>
    <svg:g transform="scale(0.6)">
      <svg:polygon style="fill:red; stroke:blue; stroke-width:10"
             points="350, 75 379,161 469,161 397,215
                     423,301 350,250 277,301 303,215
                     231,161 321,161" />
    </svg:g>
  </svg:svg> 
</p>

<p>XHTML and MathML inside SVG (via <code>foreignObject</code>):</p>

<p>
  <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="12cm" height="15cm"
     viewBox="0 0 1200 1500" version="1.1">
    <svg:g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
      <svg:rect x="20" y="20" width="400" height="450"
        style="fill:green;stroke:blue;stroke-width:2"/>

      <svg:rect x="70" y="60" width="300" height="370"
        style="fill:white;stroke:red;stroke-width:3"/>

      <svg:switch>
        <svg:foreignObject x="80" y="70" width="280" height="350">
<p xmlns="http://www.w3.org/1999/xhtml">
Inside the <code>foreignObject</code> element, you can put a
math expression
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
      <mi>y</mi>
      <mo>=</mo>
      <mfrac>
        <mn>1</mn>
        <msqrt>
          <mrow>
            <msup>
              <mi>x</mi>
              <mn>2</mn>
            </msup>
            <mo>+</mo>
            <mn>1</mn>
          </mrow>
        </msqrt>
      </mfrac>
    </mrow>
  </math>
inside an XHTML paragraph and of course ruby like
<ruby>
<rb>WWW</rb>
<rt>World Wide Web</rt>
</ruby>
</p>

<p xmlns="http://www.w3.org/1999/xhtml">The base direction of the following
paragraph is <code>rtl</code>.</p>

<p xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<ruby>
  <rbc>
    <rb xml:lang="he" dir="rtl">&#x05D0;&#x05D3;&#x05DD;</rb>
  </rbc>
  <rtc>
    <rt xml:lang="ja"><bdo dir="rtl">アーダーム</bdo></rt>
  </rtc>
  <rtc>
    <rt xml:lang="en" dir="ltr">Adam</rt>
  </rtc>
</ruby>
</p>
        </svg:foreignObject>
      </svg:switch>
    </svg:g>
  </svg:svg> 
</p>

<hr />

<address title="author">
  <a href="mailto:mimasa@w3.org">Masayasu Ishikawa</a>
</address>

</body>
</html>
