Siirry pääsisältöön

Saavutettavat matemaattiset kaavat

Julkaistu Päivitetty . Aiheet: Suomeksi, Matematiikka, MathML, LaTeX.

Sisällysluettelo

Tämä sivu korvaa aiemman kirjoitukseni matemaattisen sisällön tuottamisesta saavutettavasti: Matematiikka verkossa ja sähkökirjoissa.

Tällä sivulla ei ole tutustuttu tarkemmin erilaisiin lukuohjelmiin, jotka tukevat MathML-koodia, joten siltä osin edellistäkin kirjoitusta voi vielä lukea.

Esitietovaatimukset

  • Ymmärrät HTML- ja LaTeX-kielten käyttöä.
  • Olet valmis oppimaan MathML-koodia.
  • Osaat käyttää ulkoisia paketteja web-kehityksessä.

Tiiviisti

  • Käytä matemaattisen sisällön esittämiseen MathML-koodia.
    • Kaaviot tai muut graafiset esitykset eivät kuulu MathML-koodin piiriin.
  • Vaihtoehtoisesti käytä MathML-koodia ja SVG-kuvaa kaavasta.
  • MathML-koodia ei kannata kirjoittaa käsin. Käytä siihen muunnosohjelmia.
  • Tutustu MathML-standardiin (englanniksi).
  • Huomioi näkymättömät merkit, joita LaTeX-koodi tai kaavaeditorit eivät käytä
    • näkymätön "kertaa" -merkki ⁢ tai ⁢
    • näkymätön "funktion arvolla" -merkki ⁡ tai ⁡.

MathCAT-ohjelmisto

MathCAT (englanniksi) on amerikkalaisen Neil Soifferin kehittämä NVDA-ruudunlukijalisäosa. Se on avointa lähdekoodia ja sitä edelleen kehitetään.

Se mahdollistaa MathML-koodilla kirjoitettujen matemaattisten kaavojen kuuntelun ja lukemisen pistekirjoituksella pistenäytöltä - mutta tällä hetkellä vain englanniksi.

Kääntäminen suomeksi ja ruotsiksi

Saavutettavuuskirjasto Celiassa on käynnissä projekti, jossa lisäosaa käännetään suomeksi ja vastaava virasto kääntää lisäosaa Ruotsissa ruotsiksi.

Lisäosaa voi jo testata suomenkielisenä, jos haluaa. Ota yhteyttä Sami Määttään, sami.maatta@celia.fi, jos haluat kokeilla lisäosaa.

Tavoitteena on, että vuoden 2024 aikana suomen- ja ruotsinkielinen tuki kuuntelulle ja pistekirjoitukselle olisi valmis ja osa MathCAT-ohjelmistoa.

Miksi MathML-koodia kannattaa käyttää?

MathML on standardi, jota kehitetään ja ylläpidetään W3C:n toimesta. Sitä voidaan siis pitää vakaana standardina.

Se on samankaltainen kuin HTML-standardi, jota W3C myös ylläpitää. Voi siis ajatella, että ne sopivat hyvin yhteen.

Näiden syiden vuoksi tulevaisuudessa on erittäin todennäköistä, että MathML-koodissa pitäydytään jatkossakin.

Selainten tuki on parantunut

Sen tuki on myös parantunut. Vuoden 2023 alusta Chromium-pohjaiset selaimet (Google Chrome, Windows Edge) alkoivat tukea sitä. Olemassa oleva tuki on ollut jo Webkit-pohjaisissa (Safari) ja Gecko-pohjaisissa selaimissa (Firefox).

Tuen parantuminen tarkoittaa ensisijaisesti, että MathML tuottaa visuaalisesti oikeannäköistä matemaattista sisältöä. Tästä huolimatta Chromium-pohjaisilla selaimilla on edelleen joitain vaikeuksia näyttää kaikkia epätavallisempia merkintöjä oikein.

Tämän paikkaamiseen palataan lopussa.

Keinoja tuottaa matemaattisia kaavoja MathML-koodilla

MathML-koodi voi mennä helposti monimutkaiseksi ja hankalaksi ymmärtää, eikä sitä ole suunniteltu ihmisen kirjoitettavaksi. Se on toki mahdollista, mutta suositeltavampaa on käyttää muunnostyökaluja, ja kirjoittaa tavalla, joka on helpompi.

LaTeX-koodin ja MathML-koodin vertailu

Otetaan esimerkiksi lauseke 1 /sqrt(2) 1 2 .

Tältä näyttää se kirjoitettuna LaTeX-koodilla:

\frac{1}{\sqrt{2}}

Vastaavasti MathML-koodina:

<math>
  <mfrac>
    <mn>1</mn>
    <msqrt>
      <mn>2</mn>
    </msqrt>
  </mfrac>
</math>

Näinkin pienessä esimerkissä jo huomataan MathML-koodin runsasmerkkisyys ja sisäkkäisyys. Se voi olla ihmiselle vaikealukuista, mutta koneelle helppoa.

Huomaa, että kuten HTML-koodissakin, niin myös MathML-koodissa tulee kiinnittää huomiota siihen, että osaa käyttää oikeita elementtejä. Muunnostyökalujen haasteet liittyvät siihen, että niissä kaikissa on hieman väreilyä sen suhteen, millaista MathML-koodia ne tuottavat. Siksi MathML-koodia kannattaa myös oikolukea sen jälkeen, kun muunnos on tehty.

Ne kuitenkin soveltuvat kaavojen muuttamiseen MathML-koodiksi massana.

Seuraavaksi esittelin keinoja, joilla voit kirjoittaa LaTeX-koodia tai sitten käyttää kaavaeditoria MathML-koodin tuottamiseen.

LaTeXML: kokonaiset LaTeX-dokumentit

LaTeXML (englanniksi): kokonaisten LaTeX-tiedostojen muuttamiseen HTML-tiedostoiksi.

Tätä en ole itse testannut, mutta esijulkaisuja jakava ArXiv (englanniksi) käyttää sitä matemaattisten julkaisujen muuttamiseen HTML-tiedostoiksi. Heillä on myös ohje siitä, miten kirjoittaa hyvää LaTeX-koodia, että muunnos onnistuisi hyvin: LaTeX Markup Best Practices for Successful HTML Papers (arxiv.org).

TeXZilla: LaTeX-koodi HTML-tiedostossa

TeXZilla (GitHub, englanniksi): HTML-tiedostossa olevien LaTeX-kaavojen muuttamiseksi MathML-koodiksi.

Tekemäni ohje sen käyttämiseksi: LaTeX-koodin korvaaminen MathML-koodilla HTML-tiedostossa.

MathJax: LaTeX-koodi HTML-tiedostossa

MathJax (englanniksi): HTML-tiedostossa olevien LaTeX-kaavojen muuttamiseksi MathML-koodiksi.

MathJaxin avulla LaTeX-koodista voi tuottaa MathML-koodia tai SVG-kuvan. Tähän asti se on ollut myös hyvä keino tuottaa saavutettavia matemaattisia kaavoja englanniksi, koska siinä on ollut sisäänrakennettu tekstin tuotto kaavalle.

Muun muassa Ylioppilastutkintolautakunta käyttää tätä omassa koeympäristössään, Abitissa.

KaTeX: LaTeX-koodi HTML-tiedostossa

KaTeX (enlanniksi): HTML-tiedostossa olevien LaTeX-kaavojen muuttamiseksi MathML-koodiksi. Se toimii pitkälti, kuten MathJax. Sivuston mukaan se olisi kuitenkin nopeampi.

TEMML: LaTeX-koodi HTML-tiedostossa

TEMML (englanniksi) on JavaScriptillä kirjoitettu muunnostyökalu, joka toimii selaimessa. Käytän itse sitä nopeiden kaavojen kirjoittamiseen.

Sen voi myös asentaa lokaalisti ja oletan, että käyttö muistuttaa TeXZillaa ja MathJaxia.

MathType: kaavaeditorin käyttö

MathType (Wiris, englanniksi): Microsoft Office Wordin kaavaeditorin, jonka vaihtoehtoisest kuvauksesta voi kopioida MathML-koodin.

Mitä muunnostyökalut eivät tee

LaTeX-koodiin perustuvat muunnostyökalut eivät voi lisätä sellaisia merkkejä kaavaan, joita ei ole itse koodissakaan. Koska LaTeX-koodi kehitettiin ensisijaisesti tekemään hyvältä näyttäviä dokumentteja, se ei sisällä kaikkea semantiikkaa, mikä on mahdollista tehdä MathML-koodissa.

Näkymätön kerto- ja "funktion arvolla" -merkki

Miten tiedetään, että tämä lauseke tarkoittaa funktiota f(x) f ⁡ ( x ) ? Entä mistä tiedetään, että tämä lauseke tarkoittaa kertolaskua 2 x 2 ⁢ x ?

Sen toki tietää konktekstista, mutta MathML tarjoaa tähän vielä toisen keinon. MathML-koodin (kuten HTML-koodin) sekaan voi kirjoittaa Unicode-merkkejä, esimerkiksi erilaiset hymiöt ovat tällaisia.

Funktion lauseke on kooditasolla näin:

<math>
  <mrow>
    <mi>f</mi>
    <mo>&ApplyFunction;</mo>
    <mo form="prefix" stretchy="false">(</mo>
    <mi>x</mi>
    <mo form="postfix" stretchy="false">)</mo>
  </mrow>
</math>

Kertolaskulauseke on kooditasolla vastaavasti näin:

<math>
  <mrow>
    <mn>2</mn>
    <mo>&InvisibleTimes;</mo>
    <mi>x</mi>
  </mrow>
</math>

Koska pelkästään lukemalla lausekkeen ei voi tietää, onko kyseessä funktio vai kertolasku, niin Unicode tarjoa tähän kaksi näkymätöntä merkkiä:

  • näkymätön "kertaa" -merkki &#8290; tai &InvisibleTimes;
  • näkymätön "funktion arvolla" -merkki &#8289; tai &ApplyFunction;.

Tällä tavoin MathML-koodin avulla voi myös ilmaista semantiikkaa. Tämä ei tule ilmi LaTeX-koodissa, koska se tuottaa tekstiä, joka on tarkoitus tulkita kontekstissa.

Miten matemaattinen sisältö kannattaisi siis esittää?

Kaksi suositeltavaa vaihtoehtoa, jotka perustuvat LaTeX-koodin automaattimuunnokseen:

  1. pelkkä MathML-koodi
  2. MathML-koodi ja SVG-kuva.

Kummassakaan tapauksessa ei kuitenkaan välty siltä, että MathML-koodi pitäisi vielä oikolukea ja mahdollisesti täydentää näkymättömillä merkeillä.

Pelkkä MathML-koodi

Mainitsin, että selaimet tukevat nykyään jo paremmin MathML-koodia, mutta joitain puutteita on. Puutteita on kokemukseni mukaan kuitenkin niin vähän, että pelkän MathML-koodin käyttäminen onnistuu ihan hyvin. Selain ratkaisee itse, miten kaava näytetään.

Tämä onnistuu helposti muunnostyökaluilla.

MathML-koodi ja SVG-kuva

Koska selainten tuki kuitenkin vaihtelee, niin ollaksesi täysin varma siitä, että kaava näyttää juuri oikealta, niin käytä yhdistelmää: MathML-koodi ja SVG-kuva matemaattisesta kaavasta.

Olennaista tässä ratkaisussa on sen saavutettavuus. SVG-kuva ei auta sokeaa ruudunlukijakäyttäjää ja MathML-koodi voi näyttäää eriltä kuin SVG-kuvan matemaattinen kaava. Toimi siis näin

  • piilota MathML-koodi näkyvistä tyylitiedoston avulla
  • piilota SVG-kuva ruudunlukijalta attribuutilla aria-hidden="true".

Tässä ratkaisussa kannattaa hoksata se, että kaavakuva ei katkea ylipitkän rivin seurauksena. Silloin täytyy huolehtia siitä, että sitä voi rullata sivuttain, jotta koko kaavan näkee pienellä ruudulla.