Vlad Merzhevich
I really do not like MathML - it is cumbersome, awkward, redundant and not suitable for manual editing. Try quickly swapping one character in a long formula and you will hate MathML. That’s the case with TEX, old Knut knew his business and wrote the system for himself, later TEX became the de facto standard in the scientific community for writing formulas. If you are familiar with HTML and CSS, then understanding TEX will not be difficult, it is intuitive and has a syntax somewhat similar to these languages.
True, the problem remains how to display the formula on the page so that it is displayed correctly in all browsers. The most in a universal way there is still an image, only we need to automate and simplify the process of creating images, for which they are intended different services, which will be discussed below.
LaTEX Equation Editor
It is better to start your acquaintance with the world of formulas with this service, since it has a small online editor through which you can understand LaTEX - this is an extension of the TEX system with the same syntax. After the formula is typed, the result can be seen by clicking on the "Render Equation" button (Fig. 1).
Rice. 1. View of the editor on the page
The formula is added to your page via the tag as shown in example 1.
The formula in TEX format is inserted in the address after the question mark and one line is written. If you want to increase or decrease the size of the image, the following keywords are used.
- \ tiny (size 8pt)
- \ small (10pt)
- \ normal (12pt)
- \ large (14pt)
- \ huge (20pt)
The keyword must be inserted before the formula, as shown below.
On the page, such an enlarged formula looks like this (Fig. 2).
Rice. 2. Formula on the page
Unfortunately, Google has stopped supporting this service, and its further fate is unknown, but so far it continues to work normally and can be used.
The principle of inserting a formula is the same as for the previous service. We use the tag and as an address we refer to the Google service and pass it the formula in TEX format. The address itself in general view is written like this.
https://chart.googleapis.com/chart?cht=tx&chl=formula
Example 2 shows how to add a normal distribution formula.
=
\frac{1}{\sigma\sqrt{2\pi}}
\exp\left(-\frac{(x-\mu)^2}{2\sigma^2}\right))
To resize the formula, we can use keywords\ tiny, \ large, etc. by adding them before the expression. Google also has another way to control the size of the image, for this you need to add the chs = parameter to its address<ширина>x<высота>, for example chs = 200x20. Please note that the aspect ratio of the picture can be greatly distorted if you choose the wrong aspect ratio. The only parameter (chs = 40) is perceived as the image height, and the width will be calculated automatically (example 3).
Example 3. Image size
An image of the formula 40 pixels high is shown in Fig. 3.
Rice. 3. Formula with a given height
MathJax
If your site needs to display many different formulas and mathematical symbols, then it makes sense to connect the local the MathJax library... This library works in all browsers, including older versions of IE, as well as iPhone, iPad and Android, supports MathML, TEX and AsciiMath notation.
To use MathJax, you need to download the library and all the files required for its operation and copy them to your server. You can do it easier and download the script over the network, as shown below.
The main JS file is about 50 KB, but in the process it loads different fonts and other scripts. The result is about a couple of hundred kilobytes. It seems like a lot, but keep in mind that most files are cached on the first download and the next time the files are no longer loaded.
By default, formulas are highlighted using the $$ ... $$ and \ [... \] constructs, and lowercase characters and expressions via \ (... \) (example 4).
Example 4. Using MathJax
For \ (a \ ne 0 \), two roots of the equation \ (ax ^ 2 + bx + c = 0 \) are obtained, to find which use the formula $$ (x) _ (1,2) = (-b \ pm \ sqrt (b ^ 2-4ac) \ over 2a). $$
Result this example shown in fig. 4.
Rice. 4. Formulas on the page
If you click on the formula right click mouse, a menu will open, through which you can configure some parameters and see the source in the form of TEX or MathML (Fig. 5).
Rice. 5. Context menu
MathJax allows you to include mathematical formulas to web pages using LaTeX, MathML or AsciiMath markup, after which the formulas will be processed by a javascript library and converted to HTML, SVG or MathML for display in any modern browser.
Currently, MathJax allows you to use as a copy of this library on own server and the version of the library from the CDN cdn.mathjax.org:
Configuration TeX-AMS-MML_HTMLorMML is one of the most common (and therefore largest) configuration files. Although the use of this configuration is possible and not effective, but here it is given for the possibility quick start using MathJax.
Quick reference
Since the LaTeX markup seemed to me more concise, the following describes only questions about its use when working with MathJax:
- to see how any of the formulas are written, right-click on the expression and choose "Show Math As> TeX Commands" (no separator characters are shown);
- to display formulas in a separate block enclose it in $$ ... $$ or \ [... \] delimiters \ [\ sum_ (i = 0) ^ n i ^ 2 = \ frac ((n ^ 2 + n) (2n + 1)) (6) \]
- to display formulas inside a string enclose it in \ (... \) delimiters. For example, \ (\ sum_ (i = 0) ^ n i ^ 2 = \ frac ((n ^ 2 + n) (2n + 1)) (6) \)... Note that $ ... $ delimiters are not supported by default because single dollar signs can appear in text and cause the text to be incorrectly converted to a formula;
- to display letters of the greek alphabet, use \ alpha, \ beta, ..., \ omega: \ (\ alpha \), \ (\ beta \), ..., \ (\ omega \). For uppercase use \ Gamma, \ Delta, ..., \ Omega: \ (\ Gamma \), \ (\ Delta \), ..., \ (\ Omega \);
- for superscripts and subscripts use ^ and _. For example, x_i ^ 2: \ (x_i ^ 2 \);
- group... Superscripts, subscripts, and other operations apply only to the next "group". A "group" is either a single character or any formula enclosed in braces(...). If you do 10 ^ 10, you will unexpectedly get \ (10 ^ 10 \). But 10 ^ (10) will probably give you what you wanted: \ (10 ^ (10) \). Use curly braces to enclose a formula that applies upper or lower case: x ^ 5 ^ 6 will throw an error; (x ^ y) ^ z matches \ ((x ^ y) ^ z \) and x ^ (y ^ z) matches \ (x ^ (y ^ z) \). Notice the difference between x ^ i ^ 2 \ (x_i ^ 2 \) and x_ (i ^ 2) \ (x_ (i ^ 2) \);
- brackets... Single characters () create parentheses and parentheses \ ((2 + 3) \). Use \ (and \) to display curly braces \ (\ (\) \).
The brackets described above do not scale with the formula. That is, if you type (\ frac (\ sqrt x) (y ^ 3)), round brackets will be too small: \ ((\ frac (\ sqrt x) (y ^ 3)) \). Using \ left (and \ right) will automatically resize the brackets to the size of the formula they surround: \ left (\ frac (\ sqrt x) (y ^ 3) \ right) matches \ (\ left (\ frac (\ sqrt x) (y ^ 3) \ right) \)... \ left and \ right apply to all of the following types of brackets: (and) \ (\ left (x \ right) \), [and] \ (\ left \), \ (and \) \ (\ left \ (x \ right \) \), | \ (\ left | x \ right | \), \ langle and \ rangle \ (\ left \ langle x \ right \ rangle \), \ lceil and \ rceil \ (\ left \ lceil x \ right \ rceil \), and \ lfloor and \ rfloor \ (\ left \ lfloor x \ right \ rfloor \).
There are also invisible brackets indicated by. : \ left. \ frac12 \ right \ rbrace matches \ (\ left. \ frac12 \ right \ rbrace \); - sums and integrals\ sum and \ int; the subscript is the lower limit and the superscript is the upper limit. For example, \ sum_1 ^ n \ (\ sum_1 ^ n \). Don't forget (...) if the limits are more than one character. For example, \ sum_ (i = 0) ^ \ infty i ^ 2 matches \ (\ sum_ (i = 0) ^ \ infty i ^ 2 \). Likewise \ prod \ (\ prod \), \ int \ (\ int \), \ bigcup \ (\ bigcup \), \ bigcap \ (\ bigcap \), \ iint \ (\ iint \);
- fractions... There are two ways to create a fraction. \ frac ab will apply to the next two groups and generate the following \ (\ frac ab \); for more complex numerators and denominators, use (...): \ frac (a + 1) (b + 1) matches \ (\ frac (a + 1) (b + 1) \). If the numerator and denominator are too complex, you can use \ over, which separates the group it is in: (a + 1 \ over b + 1) matches \ ((a + 1 \ over b + 1) \);
- fonts
- use \ mathbb or \ Bbb for blackboard bold: \ (\ mathbb (CHNQRZ) \);
- use \ mathbf for bold: \ (\ mathbf (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \) \ (\ mathbf (abcdefghijklmnopqrstuvwxyz) \);
- use \ mathtt for the "typewriter" font: \ (\ mathtt (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \) \ (\ mathtt (abcdefghijklmnopqrstuvwxyz) \);
- use \ mathrm for "roman" font: \ (\ mathrm (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \) \ (\ mathrm (abcdefghijklmnopqrstuvwxyz) \);
- use \ mathsf for sans serif font: \ (\ mathsf (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \) \ (\ mathsf (abcdefghijklmnopqrstuvwxyz) \);
- use \ mathcal for "calligraphic" spelling: \ (\ mathcal (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \);
- use \ mathscr for a "script" font (as if handwritten): \ (\ mathscr (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \);
- use \ mathfrak for "Fraktur" font (old German style): \ (\ mathfrak (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \ mathfrak (abcdefghijklmnopqrstuvwxyz) \);
- root signs... Use \ sqrt, which adjusts to the size of the argument: \ sqrt (x ^ 3) \ (\ sqrt (x ^ 3) \); \ sqrt (\ frac xy) \ (\ sqrt (\ frac xy) \). For complex expressions preferable to use (...) ^ (1/2);
- some functions such as "lim", "sin", "max", "ln", etc., usually use "roman" (straight) font instead of "italian" (italic). Use \ lim, \ sin, etc. to get something like \ sin x \ (\ sin x \), not sin x \ (sin x \). Use subscripts to attach additional labels to \ lim: \ lim_ (x \ to 0) \ [\ lim_ (x \ to 0) \]
- exists too a large number of special characters and symbols to list all of them here. Some of the most commonly used are:
- \ lt \ gt \ le \ ge \ neq \ (\ lt \, \ gt \, \ le \, \ ge \, \ neq \)... You can use \ not to put a forward slash on almost everything: \ not \ lt \ (\ not \ lt \), but it often looks ugly;
- \ times \ div \ pm \ mp \ (\ times \, \ div \, \ pm \, \ mp \). \ cdot matches the center point: \ (x \ cdot y \);
- \ cup \ cap \ setminus \ subset \ subseteq \ subsetneq \ supset \ in \ notin \ emptyset \ varnothing \ (\ cup \, \ cap \, \ setminus \, \ subset \, \ subseteq \, \ subsetneq \, \ supset \, \ in \, \ notin \, \ emptyset \, \ varnothing \);
- (n + 1 \ choose 2k) or \ binom (n + 1) (2k) \ ((n + 1 \ choose 2k) \);
- \ to \ rightarrow \ leftarrow \ Rightarrow \ Leftarrow \ mapsto \ (\ to \, \ rightarrow \, \ leftarrow \, \ Rightarrow \, \ Leftarrow \, \ mapsto \);
- \ land \ lor \ lnot \ forall \ exists \ top \ bot \ vdash \ vDash \ (\ land \, \ lor \, \ lnot \, \ forall \, \ exists \, \ top \, \ bot \, \ vdash \, \ vDash \);
- \ star \ ast \ oplus \ circ \ bullet \ (\ star \, \ ast \, \ oplus \, \ circ \, \ bullet \);
- \ approx \ sim \ simeq \ cong \ equiv \ prec \ (\ approx \, \ sim \, \ simeq \, \ cong \, \ equiv \, \ prec \);
- \ infty \ aleph_0 \ (\ infty \, \ aleph_0 \) \ nabla \ partial \ (\ nabla \, \ partial \) \ Im \ Re \ (\ Im \, \ Re \);
- for modular comparisons use \ pmod, for example a \ equiv b \ pmod n \ (a \ equiv b \ pmod n \);
- \ ldots matches ellipsis in \ (a_1, a_2, \ ldots, a_n \); \ cdots matches ellipsis in \ (a_1 + a_2 + \ cdots + a_n \);
- some Greek letters have a spelling for a variable: \ epsilon \ varepsilon \ (\ epsilon \, \ varepsilon \), \ phi \ varphi \ (\ phi \, \ varphi \), etc. "Script" (handwritten) l in lower case: \ ell \ (\ ell \).
Detexify allows you to draw a character on a web page and then lists \ (\ TeX \) characters that resemble the drawn one. Not guaranteed to work in MathJax as well, but it is a good place to start searching. To check if a command is supported, see the current list of supported \ (\ LaTeX \) commands on MathJax.org.
- gaps... MathJax usually decides for itself how to use spaces in formulas using a complex set of rules. Printing extra spaces in formulas will not change the number of spaces that MathJax adds to the formula: a␣b and a␣␣␣␣b match \ (a b \). To add more spaces, use \, for narrow spaces \ (a \, b \) or \; for a wide space \ (a \; b \). \ quad and \ qquad match big gaps\ (a \ quad b \), \ (a \ qquad b \).
To use plain text, use \ text (...): \ (\ (x \ in s \ mid x \ text (is extra large) \) \); - accents and diacritics... Use \ hat for the single character \ (\ hat x \), \ widehat for the formula \ (\ widehat (xy) \) (but if you make the character too wide it will look ridiculous). Similarly, \ bar \ (\ bar x \) and \ overline \ (\ overline (xyz) \) and \ vec \ (\ vec x \) and \ overrightarrow \ (\ overrightarrow (xy) \) and \ overleftrightarrow \ (\ overleftrightarrow (xy) \). For points like \ (\ frac d (dx) x \ dot x = \ dot x ^ 2 + x \ ddot x \), use \ dot and \ ddot;
- Special symbols used to interpret MathJax can be shielded using the \: \ $ \ (\ $ \), \ (\ (\ (\), \ _ \ (\ _ \), etc. If you want the \, you must use \ backslash \ (\ backslash \), since \\ matches a newline.
Before HTML5, using formulas was a punishment. Judge for yourself: in 2005 it was necessary to have either special browser, or split the text into actual HTML and insert from images or PDF. Search and other operations of editing and / or displaying on the screen / paper was an ambiguous task, to which entire monographs were devoted.
In 2012, it was already easier. Now you can connect the necessary plugins (Firemath for FireFox and Daum Equation Editor for Chrome). But the ambiguity of standards (and support) actually forced to write the same article for each of the browsers (and for their versions). Or greet users with a magical greeting "Your browser needs to be updated / supplemented with an extension."
Inconvenient? - Yes! It took a long time to find one-stop solution? - Yes! It makes you think about which type of recording is better (presentation or content), which converter to use (and there are only about a dozen and a half well-known ones)? - YES! YES! YES!
As a result, publishing work turned into mastering two or three markup lexicons and studying the work of at least one transcoder program.
Now, with the arrival of HTML5, things have become much easier. It has a new container
