Hlavní navigace

Novinky v HTML5: základy specifikace MathML 3.0

14. 11. 2012
Doba čtení: 5 minut

Sdílet

Pojďme se podívat, jak vytvořit první příklady na webové stránce pomocí MathML 3.0. Ukážeme si základní tagy, kterými lze jednotlivé části matematických vzorců zapisovat a vysvětlíme si některé základní zápisy zlomků, odmocnin, horních a dolních indexů, sčítání odčítání, definici jmenného prostoru a podobně…

V minulém díle jsme si nastínili, co vlastně MathML je a k čemu ho lze využívat. Dnes se podíváme na základní sémantiku jazyka. Naučíme se se základními tagy a vyzkoušíme si zápis několika příkladů z elementární matematiky.

Nejprve si vytvoříme tzv. Document Type Definition, neboli definici typu dokumentu DTD:

<!DOCTYPE math 
	PUBLIC "-//W3C//DTD MathML 3.0//EN" 
		   "http://www.w3.org/Math/DTD/mathml3/mathml3.dtd">

Poté co definujeme typ dokumentu, definujeme jmenný prostor. Použijeme pro to atribut xmlns, který zapíšeme do základního tagu <math>:

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mrow>...</mrow>
</math>

Jak je patrné z ukázky definice jmenného prostoru, základním prvkem MathML jazyka je párový tag <math></math>, do kterého zapisujeme veškerý matematický obsah. Dalším tagem je <mrow></mrow>, který obaluje řádek matematického obsahu. Standardně obaluje celý vzorec. Pokud zapisujeme zlomek, jmenovatel i čitatel je také samostatně obalen do tagů řádky.

Než ukážu, jak vypadá kód takového zlomku, vysvětlím zlomek. Vše, co zlomek obsahuje, obalujeme tagem <mfrac></mfrac>. Takže pokud zapisujeme zlomek, nejprve zapíšeme řádku, do ní zlomek a do zlomku první řádek (čitatel) a druhý řádek (jmenovatel), takto:

<mrow> 	//řádek obalující celý náš zlomek 

    <mfrac> 	//tag zlomku obalující řádek s čitatelem i jmenovatelem 
 
        <mrow> 	//první řádek (čitatel)
        	<mn>621</mn> 	//obsah řádky (v tomto případě je v čitateli číslo 621) <mn> je tag pro zápis čísla
        </mrow>

        <mrow> 	//druhá řádka (jmenovatel)
        	<mn>53</mn> 	//číselný obsah řádky 
        </mrow>

    </mfrac>

</mrow>
621 53

V minulém díle jsem naznačil pár tagů, pro zápis čísel, identifikátorů a operátorů. Pro úplnost je zopakuji i dnes.

  • <mi></mi> - Math identifier - Tímto tagem obalujeme veškeré identifikátory (proměnné, neznámé apod...).
  • <mo></mo> - Math operator - Do tagu zapisujeme operátory jako je násobení, sčítání odčítání případně dělení, pokud ho zapisujeme lomítkem nebo dvojtečkou, pokud zapisujeme zlomkem, používáme <mfrac>.
  • <mn></mn> - Math number - Slouží k zápisu čísel v příkladu, veškeré číslice obalujeme do tohoto tagu.

Bylo by patřičné ukázat zápis i jednořádkových matematických úkonů, jako je sčítání, odčítání a podobně. Pokud chceme zapsat například sčítání dvou čísel, jednoduše otevřeme řádek. Do <mrow></mrow> zapíšeme první číslo obalené do <mn></mn>, znaménko, které obalíme do Math operator <mo></mo> a druhé číslo opět do <mn></mn>. Takto lze zapsat dělení pomocí dvojtečky nebo lomítka, násobení, kde se znaménko vynechává nebo pokud chceme zapsat hvězdičku, sčítání a odčítání. Pouze měníme znaménko.

6378 - 128
6378 + 128
6378 / 128
6378 : 128
6378 * 128
<mrow>
    <mn>6378</mn>	//první číslo 
    <mo>-</mo> //matematické znaménko 
    <mn>128</mn> //druhé číslo
</mrow>

Dále se posuneme k zápisu odmocnin, které používají tagy <msqrt> nebo <mroot>. Pokud chceme zapisovat odmocninu druhou, použijeme <msqrt></msqrt>.

<mrow>
    <msqrt>	//druhá odmocnina
        <mrow> 	//řádek 
       	 <mn>12829</mn> 	//číselný obsah odmocniny
        </mrow>
    </msqrt>
</mrow>
12829

Pokud zapisujeme jinou než druhou odmocninu, musíme použít tag <mroot></mroot>. Do tohoto tagu pak použijeme dvě řádky. První obsahuje číslo pod odmocninou a druhá, o jakou odmocninu se jedná.

<mrow>
    <mroot>	//druhá odmocnina
        <mrow> 	//řádek s číslem pod odmocninou 
       	 <mn>12829</mn> 	//číselný obsah odmocniny
        </mrow>
		  <mrow> 	//řádek s odmocninou 
       	 <mn>3</mn> 	// třetí odmocnina
        </mrow>
    </mroot>
</mrow>
12829 3

V tuto chvíli umíme již sčítat, odečítat, násobit a dělit, případně používat zlomky a odmocniny. Ještě bychom se mohli v tomto dílu seznámit s indexy. Horní index bývá v matematice většinou používán jako zápis exponentu. Dolní k označení nebo rozlišení jednotlivých proměnných. Pokud chceme tedy zapisovat horní index, použijeme tag <msup></msup> sup - jako latinské super/supra (nad). <msup> a <msub> funguje trochu jinak než html tagy <sup>, <sub>. U html obalujeme do tagů pouze samotné indexy, naopak v MathML obalujeme do tagů jak indexovaný základ, tak i samotný index. Zde je malá ukázka:

<mrow>
	<msup>	//otevřeme tag horního indexu 
      <mi> b </mi> //zapíšeme to co bude označeno horním indexem 
		<mn> 2 </mn> //jako druhý tag teprve zapíšeme samotný index
	</msup>
</mrow>
b 2

Dolní index funguje naprosto stejně jako horní, pouze použijeme tagy <msub></msub>:

CS24_early

<mrow>
	<msub>	//otevřeme tag horního indexu 
      <mi> b </mi> //zapíšeme to, co bude označeno horním indexem 
		<mn> max </mn> //jako druhý tag teprve zapíšeme samotný index
	</msub>
</mrow>
b max

Na závěr se podíváme ještě na zápis horního i dolního indexu jedním zápisem, slouží k tomu tag <msubsup></msubsup>. Jako u předešlých indexů, zapíšeme nejprve indexovaný základ a poté, jak už napovídá název, nejprve dolní index a až následně horní index. Takto:

<mrow>
	<msubsup>
		<mo> &#x222B; </mo> //znak integrálu
		<mn> 0 </mn> //dolní index
		<mn> 1 </mn> //horní index
		</msubsup>
</mrow>
0 1

Zde bych chtěl vyložit nejpodstatnější tagy jazyka MathML tak, aby následující tabulka sloužila jako shrnutí vysvětlených pojmů:

<math></math> Základní tag, obalující MathML
<mi></mi> Matematický identifikátor
<mo></mo> Matematický operátor
<mrow></mrow> Řádek

<mn></mn>

Číslo
<mfrac></mfrac> Zlomek
<msqrt></msqrt> Druhá odmocnina
<mroot></mroot> N-tá odmocnina
<msub></msub> Dolní index - subscript
<msup></msup> Exponent (horní index) - superscript
<msubsup></msubsup> Zápis dolního i horního indexu současně

Byl pro vás článek přínosný?

Autor článku

Martin Smola je studentem ČVUT, věnuje se programování, web-designu, grafice a psaní článků. Pracuje na vlastním projektu 4dgraph.com, který umožňuje sdílet fotky, grafiku a textury.