Siirry pääsisältöön

LaTeX-koodin korvaaminen MathML-koodilla HTML-tiedostossa

Julkaistu Aiheet: Suomeksi, Matematiikka, Saavutettavuus.

Esitietovaatimukset:

  • ymmärrys HTML-sivujen tekemisestä
  • ymmärrys LaTeX-koodin kirjoittamisesta
  • ymmärrys yksinkertaisten pakettien käyttämisessä web-sovelluksissa.

MathML-koodin ja LaTeX-koodin vertailu

MathML-koodia on varsin tympeä tuottaa, koska se perustuu vahvasti sisäkkäisiin elementteihin ja on sen vuoksi hankala lukea.

LaTeX-koodi on taas helpompi ymmärtää ja paljon helpompi kirjoittaa (ainakin matematiikkaa kirjoittavalle). Se on myös paljon laajemmalle levinnyt tapa tuottaa matemaattista tekstiä. Näiden lopputulos on yleensä PDF-tiedosto, joka ei ole kovin saavutettava eli se toimii korkeintaan välttävästi esimerkiksi ruudunlukijaohjelmistoilla, kuten NVDA, JAWS tai VoiceOver.

MathML-koodi:

<math xmlns="http://www.w3.org/1998/Math/MathML"
  ><semantics
    ><mfrac
      ><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac
    ></semantics
  ></math
>

LaTeX-koodi:

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

Kuten nähdään, niin LaTeX-koodi on paljon yksinkertaisempaa, mutta se sisältää paljon vähemmän koneluettavaa informaatiota, eikä sitä tueta web-ympäristössä.

HTML-tiedoston LaTeX-koodin muuttaminen MathML-koodiksi

Eräs tapa muuttaa HTML-tiedoston kaikki LaTeX-koodit MathML-koodiksi on käyttää TeXZilla-nimistä ohjelmistoa (GitHub, englanniksi). Tapa, jonka esitän on dokumentoitu TeXZillassa ja törmäsin tähän Brian Kardellin sivuilla, joilla on hän myös hiukan avaa prosessia. Blogipostauksessaan Brian Kardell demonstroi, miten hän on muuttanut kokonaisen "nettisivukirjan" LaTeX-koodin MathML-koodiksi (englanniksi).

Esittelen siis täysin saman tavan, jotta toivottavasti saman tekeminen olisi seuraavalle helpompaa.

Vaihe 1: TeXZillan asentaminen

Asenna TeXZilla projektiisi npm install texzilla -komennolla.

Vaihe 2: HTML-tiedosto

Luo HTML-tiedosto, jolle kirjoitat matematiikkaa LaTeX-koodilla. Leipätekstiin sopivan matematiikan kaavan saa tuttuun tapaan yksittäisillä dollarimerkeillä ja "blokkityylisen" kaavan saa kaksoisdollareilla.

Esimerkkitiedostoni sisältö:

<!DOCTYPE html>
<html lang="fi">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TeXzilla testailua</title>
  </head>
  <body>
    <p>$\frac{1}{\sqrt{2}}$</p>
    <p>$$\frac{1}{\sqrt{2}}$$</p>
  </body>
</html>

Vaihe 3: Muunna HTML-tiedoston LaTeX-koodi MathML-koodiksi

Käytämme streamline -tapaa, jonka avulla luomme uuden HTML-tiedoston, jossa LaTeX-koodi on muuttunut MathML-koodiksi.

Se tapahtuu komentorivin komennolla

cat latex.html | node ./node_modules/texzilla/TeXZilla.js streamfilter > mathml.html

  • latex.html on lähtötiedosto (voit päättää nimen itse), jossa matematiikka on kirjoitettu LaTeX-koodilla.
  • ./node_modules/texzilla/TeXZilla.js on sijainti, jossa projektisi TeXZilla-tiedostot ovat.
  • mathml.html on tiedosto (voit päättää nimen itse), jossa LaTeX-koodi on muutettu MathML-koodiksi.
  • Muu kirjoitus komentorivillä on komentoja, jotka kirjoitetaan kuten näytetty.

Valmis!

Nyt sinulla on HTML-tiedosto, jonka matemaattinen teksti on MathML-koodilla tehty.