MathJax – wzory nie tylko w przeglądarce

Bywa, że na stronie internetowej potrzebujemy wyświetlić mniej lub bardziej skomplikowane wzory matematyczne/chemiczne/fizyczne, ogólnie: naukowe. Czysty HTML nie daje na tym polu zbyt wielu możliwości. Tak naprawdę mamy tylko elementy sub i sup pozwalające wyświetlać tekst odpowiednio w dolnym i górnym indeksie bieżącego wiersza. Dodatkowo możemy wykorzystać encje, którymi można zapisać tylko pojedyncze znaki i symbole, typu: ≠, ∜ lub ∰. I to tak naprawę wszystko na co pozwala HTML w kwestii naukowych zapisów. Co prawda jest jeszcze MathML (Mathematical Markup Language – matematyczny język znaczników) korzystający z XML-a do zapisu wzorów, ale po pierwsze nie jest wspierany przez wszystkie przeglądarki, a po drugie zapis prostego wzoru wymaga otwarcia i zamknięcia wielu elementów, przez co zapis staje się rozwlekły i trudny do analizy. Na szczęście z pomocą przychodzi MathJax .

MathJax jest biblioteką w JavaScripcie pozwalającą wyświetlać wzory naukowe. Od tych najprostszych, po najbardziej rozbudowane. Tworzenie skomplikowanych wzorów jest możliwe głównie dzięki językowi T_EX, chociaż wzór początkowy może być również zapisany we wspomnianym wcześniej MathML-u lub w AsciiMath. Na przykład wzór pozwalający obliczyć wyróżnik równania kwadratowego zapisany w kodzie strony na 3 sposoby wygląda tak:

• T_EX – x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
• AsciiMath – x = (-b +- sqrt(b^2 – 4ac))/(2a)
• MathML –

  <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
    <mi>x</mi>
    <mo>=</mo>
    <mrow>
      <mfrac>
        <mrow>
          <mo>&#x2212;</mo>
          <mi>b</mi>
          <mo>&#xB1;</mo>
          <msqrt>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
            <mo>&#x2212;</mo>
            <mn>4</mn>
            <mi>a</mi>
            <mi>c</mi>
          </msqrt>
        </mrow>
        <mrow>
          <mn>2</mn>
          <mi>a</mi>
        </mrow>
      </mfrac>
    </mrow>
  </math>
  

MathJax na podstawie jednego z powyższych zapisów tworzy odpowiednik wzoru w jednej z trzech postaci "przyjaznych" dla czytelnika: HTML i CSS, obrazek SVG lub MathML. Wybór zarówno formatu wejściowego jak i wyjściowego wzoru zależy oczywiście od twórcy strony gdzie biblioteka MathJax będzie używana. Jednak chyba najlepszym wyborem jest format wejściowy T_EX i plik SVG jako efekt końcowy. Dzięki temu wzory będą mogły być skalowane i dobrze widoczne zarówno na małych jak i dużych ekranach. Wzory generowane w MathJax będą również prawidłowo odczytywane w czytnikach. A dzięki rozbudowanemu API, biblioteka może być używana nie tylko w aplikacjach webowych.