Aby pisać wzory matematyczne w HTML, można skorzystać z kilku rozwiązań, z których najważniejsze to MathML oraz biblioteki JavaScript renderujące LaTeX (np. MathJax, KaTeX). Poniżej znajduje się poradnik, który omawia te metody, ich zalety, ograniczenia oraz przykłady zastosowań.
MathML – natywne wzory matematyczne w html
MathML (Mathematical Markup Language) to znacznikowy język oparty na XML, służący do prezentowania matematyki w sposób zgodny ze standardami WWW.
Podstawowa składnia MathML –
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo>-</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mn>4</mn>
<mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn><mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
Wzór przedstawia postać rozwiązania równania kwadratowego.
Elementy MathML –
<math>– główny kontener wzoru (wymaga atrybutuxmlns);<mrow>– grupuje fragmenty wzoru;<mi>,<mn>,<mo>– symbol, liczba, operator matematyczny;<mfrac>– ułamek;<msqrt>– pierwiastek kwadratowy;<msup>– potęga.
Przykład prostego wzoru – ( a^2 + b^2 = c^2 )
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</math>
Zalety MathML –
- Jest standardem W3C przeznaczonym do tego celu;
- Umożliwia rozbudowane, semantyczne opisywanie matematyki;
- Bezpośrednio integruje się ze strukturą HTML.
Ograniczenia –
- Obsługa przez przeglądarki jest niepełna, najlepiej działa w Firefox; w innych przeglądarkach wsparcie może być ograniczone lub wymaga zewnętrznych bibliotek.
Renderowanie wzorów językiem latex przez javascript
Najpopularniejszym rozwiązaniem, które działa we wszystkich nowoczesnych przeglądarkach, jest MathJax lub KaTeX – biblioteki renderujące wzory napisane w składni LaTeX.
Przykładowy fragment kodu HTML z MathJax –
<head>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>
Rozwiązanie równania kwadratowego:
<p> \( x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \) </p>
</body>
Wzory można wstawiać w trybie inline (\( ... \)) oraz blokowym (\[ ... \]).
Zalety MathJax / KaTeX –
- Działa we wszystkich przeglądarkach bez względu na natywne wsparcie MathML;
- Pozwala używać wygodnej, znanej składni LaTeX;
- Obsługuje szeroki zakres symboli oraz zaawansowane funkcje matematyczne.
Wady –
- Wzory renderowane są po stronie klienta – potrzebna jest dodatkowa paczka JS;
- Przy dużej liczbie wzorów może nieznacznie wydłużyć czas ładowania strony.
Praktyczne zastosowania na stronach www
Przykłady przypadków użycia –
- Publikacje naukowe online,
- Materiały dydaktyczne oraz kursy e-learningowe,
- Blogi poświęcone matematyce, fizyce i informatyce,
- Kalkulatory, quizy, narzędzia do nauki.
Różnice między mathml, latex, mathjax i katex
| Rozwiązanie | Składnia | Obsługa w przeglądarkach | Łatwość użycia | Dodatki wymagane? |
|---|---|---|---|---|
| MathML | XML | Ograniczona (najlepiej Firefox) | Średnia | Nie |
| MathJax | LaTeX/MathML | Wszystkie | Wysoka | Tak (JS) |
| KaTeX | LaTeX | Wszystkie | Bardzo wysoka | Tak (JS) |
Wskazówki praktyczne
- MathML warto stosować w serwisach, gdzie nacisk kładziony jest na semantykę oraz dostępność (np. wsparcie dla czytników ekranu);
- MathJax/KaTeX rekomendowane są dla ogólnych zastosowań WWW, dzięki niezawodnej prezentacji wzorów we wszystkich przeglądarkach;
- Wzory blokowe powinny być wyśrodkowane lub wyrównane do lewej według stylistyki serwisu.
Wersja minimalna – symbole i indeksy
HTML bezpośrednio obsługuje tylko proste symbole i indeksy:
<p>x<sub>1</sub> = 5</p>
<p>Suma ∑ od i=1 do n</p>
Taka opcja wystarczy dla najprostszych przypadków, lecz nie zastąpi pełnych rozwiązań opartych na MathML lub LaTeX.
Podsumowanie –
Jeśli zależy ci na prostocie — użyj MathJax/KaTeX. Jeśli kluczowa jest zgodność ze standardami i semantyka — wybierz MathML. W nowoczesnych, profesjonalnych serwisach oba podejścia można łączyć, zapewniając szeroką kompatybilność oraz wysoką jakość prezentacji matematyki.
W przypadku szczegółowych wdrożeń MathML zaleca się stosować odpowiedni DOCTYPE, ustawienie nagłówków dokumentu na XHTML oraz testowanie działania w docelowych przeglądarkach.
