Hlavní navigace

Novinky v HTML5: základy specifikace MathML 3.0

Martin Smola

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

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

15. 11. 2012 16:27

Každý browser implementující MathML má někdy lepší renderer než PNG získané z TeXu. Protože to PNG bude mít třeba 96 dpi, což je vám na zařízení s 300 nebo 600 dpi celkem k ničemu. Pokud nejste fanda do kostiček.

15. 11. 2012 15:35

PNG vygenerované TeXem má kvalitnější výstup pouze tehdy, pokud se zobrazovacím zařízením trefíte do parametrů, pro které byl ten PNG obrázek optimalizován. Proto je takový způsob pro internetové publikování nevhodný, na což už se v případě webu přišlo minimálně před deseti lety. Není potřeba to v případě matematických vzorců znovu objevovat.

To, že je MathML založené na XML, není nějaký nevýznamný detail, naopak je to dost podstatné – umožňuje to totiž vkládat MathML do jiných XML dokumentů a …

Vitalia.cz: Vychytané vály a válečky na vánoční cukroví

Vychytané vály a válečky na vánoční cukroví

Vitalia.cz: Mondelez stahuje rizikovou čokoládu Milka

Mondelez stahuje rizikovou čokoládu Milka

Lupa.cz: Insolvenční řízení kvůli cookies? Vítejte v ČR

Insolvenční řízení kvůli cookies? Vítejte v ČR

DigiZone.cz: ČRo rozšiřuje DAB do Berouna

ČRo rozšiřuje DAB do Berouna

120na80.cz: 5 nejčastějších mýtů o kondomech

5 nejčastějších mýtů o kondomech

DigiZone.cz: Recenze Westworld: zavraždit a...

Recenze Westworld: zavraždit a...

Měšec.cz: Kdy vám stát dá na stěhování 50 000 Kč?

Kdy vám stát dá na stěhování 50 000 Kč?

120na80.cz: Horní cesty dýchací. Zkuste fytofarmaka

Horní cesty dýchací. Zkuste fytofarmaka

Měšec.cz: mBank cenzuruje, zrušila mFórum

mBank cenzuruje, zrušila mFórum

Vitalia.cz: Jsou čajové sáčky toxické?

Jsou čajové sáčky toxické?

Vitalia.cz: Láska na vozíku: Přitažliví jsme pro tzv. pečovatelky

Láska na vozíku: Přitažliví jsme pro tzv. pečovatelky

Měšec.cz: Jak vymáhat výživné zadarmo?

Jak vymáhat výživné zadarmo?

Vitalia.cz: Paštiky plné masa ho zatím neuživí

Paštiky plné masa ho zatím neuživí

Měšec.cz: U levneELEKTRO.cz už reklamaci nevyřídíte

U levneELEKTRO.cz už reklamaci nevyřídíte

DigiZone.cz: Flix TV: dva set-top boxy za korunu

Flix TV: dva set-top boxy za korunu

Root.cz: Certifikáty zadarmo jsou horší než za peníze?

Certifikáty zadarmo jsou horší než za peníze?

Vitalia.cz: Jmenuje se Janina a žije bez cukru

Jmenuje se Janina a žije bez cukru

Vitalia.cz: Pamlsková vyhláška bude platit jen na základkách

Pamlsková vyhláška bude platit jen na základkách

Podnikatel.cz: Udávání kvůli EET začalo

Udávání kvůli EET začalo

Vitalia.cz: Když přijdete o oko, přijdete na rok o řidičák

Když přijdete o oko, přijdete na rok o řidičák