Novinky v HTML5: základy specifikace MathML 3.0

Martin Smola 14. 11. 2012

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>:

widgety

<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ě
Našli jste v článku chybu?
Vitalia.cz: Voda z Vltavy před a po úpravě na pitnou

Voda z Vltavy před a po úpravě na pitnou

Vitalia.cz: Tohle jsou nejlepší česká piva podle odborníků

Tohle jsou nejlepší česká piva podle odborníků

Lupa.cz: Patička e-mailu závazná jako vlastnoruční podpis?

Patička e-mailu závazná jako vlastnoruční podpis?

120na80.cz: Pálení žáhy: která jídla ne a co nás uzdraví?

Pálení žáhy: která jídla ne a co nás uzdraví?

Lupa.cz: Další Češi si nechali vložit do těla čip

Další Češi si nechali vložit do těla čip

Lupa.cz: Jak se prodává firma za miliardu?

Jak se prodává firma za miliardu?

Podnikatel.cz: Letáky? Lidi zuří, ale ony stále fungují

Letáky? Lidi zuří, ale ony stále fungují

Podnikatel.cz: Tyto pojmy k #EET byste měli znát

Tyto pojmy k #EET byste měli znát

Vitalia.cz: Fyzioterapeutka: Chůze naboso? Rozhodně ano!

Fyzioterapeutka: Chůze naboso? Rozhodně ano!

DigiZone.cz: Digi Slovakia zařazuje stanice SPI

Digi Slovakia zařazuje stanice SPI

DigiZone.cz: Nova opět stahuje „milionáře“

Nova opět stahuje „milionáře“

Vitalia.cz: Tahák, jak vyzrát nad zápachem z úst

Tahák, jak vyzrát nad zápachem z úst

Vitalia.cz: 5 chyb, které děláme při skladování potravin

5 chyb, které děláme při skladování potravin

Podnikatel.cz: Instalatér, malíř a elektrikář. "Vymřou"?

Instalatér, malíř a elektrikář. "Vymřou"?

DigiZone.cz: Technisat připravuje trojici DAB

Technisat připravuje trojici DAB

120na80.cz: Co je padesátkrát sladší než cukr?

Co je padesátkrát sladší než cukr?

DigiZone.cz: Samsung EVO-S: novinka pro Skylink

Samsung EVO-S: novinka pro Skylink

Vitalia.cz: Jak Ondra o astma přišel

Jak Ondra o astma přišel

Podnikatel.cz: Udělali jsme velkou chybu, napsal Čupr

Udělali jsme velkou chybu, napsal Čupr

Vitalia.cz: dTest odhalil ten nejlepší kečup

dTest odhalil ten nejlepší kečup