Vlad Merzhevich
Non mi piace davvero il MathML: è ingombrante, scomodo, ridondante e non adatto per l'editing manuale. Prova a scambiare rapidamente un carattere in una formula lunga e odierai il MathML. È il caso di TEX, il vecchio Knut sapeva il fatto suo e ha scritto il sistema per se stesso, in seguito TEX è diventato lo standard de facto nella comunità scientifica per scrivere formule. Se hai familiarità con HTML e CSS, capire TEX non sarà difficile, è intuitivo e ha una sintassi in qualche modo simile a questi linguaggi.
È vero, il problema rimane come visualizzare la formula sulla pagina in modo che venga visualizzata correttamente in tutti i browser. Più in modo universale c'è ancora un'immagine, solo noi dobbiamo automatizzare e semplificare il processo di creazione delle immagini, per il quale sono destinate diversi servizi, di cui si parlerà di seguito.
Editor di equazioni LaTEX
È meglio iniziare la tua conoscenza del mondo delle formule con questo servizio, poiché ha un piccolo editor online attraverso il quale puoi capire LaTEX - questa è un'estensione del sistema TEX con la stessa sintassi. Dopo aver digitato la formula, è possibile visualizzare il risultato facendo clic sul pulsante "Render Equation" (Fig. 1).
Riso. 1. Vista dell'editor sulla pagina
La formula viene aggiunta alla tua pagina tramite il tag come mostrato nell'esempio 1.
La formula in formato TEX viene inserita nell'indirizzo dopo il punto interrogativo e viene scritta una riga. Se si desidera aumentare o diminuire la dimensione dell'immagine, vengono utilizzate le seguenti parole chiave.
- \ minuscolo (misura 8pt)
- \ piccolo (10pt)
- \ normale (12pt)
- \ grande (14pt)
- \ enorme (20pt)
La parola chiave deve essere inserita prima della formula come mostrato di seguito.
Sulla pagina, una formula così ingrandita appare così (Fig. 2).
Riso. 2. Formula sulla pagina
Sfortunatamente, Google ha smesso di supportare questo servizio e il suo ulteriore destino è sconosciuto, ma finora continua a funzionare normalmente e può essere utilizzato.
Il principio di inserimento di una formula è lo stesso del servizio precedente. Usiamo il tag e come indirizzo ci riferiamo al servizio Google e gli passiamo la formula in formato TEX. L'indirizzo stesso in vista generaleè scritto così.
https://chart.googleapis.com/chart?cht=tx&chl=formula
L'esempio 2 mostra come aggiungere una formula di distribuzione normale.
=
\frac{1}{\sigma\sqrt{2\pi}}
\exp\left(-\frac{(x-\mu)^2}{2\sigma^2}\right))
Per ridimensionare la formula, possiamo usare parole chiave\ tiny, \ large, ecc. aggiungendoli prima dell'espressione. Google ha anche un altro modo per controllare la dimensione dell'immagine, per questo è necessario aggiungere il parametro chs = al suo indirizzo<ширина>X<высота>, per esempio cat = 200x20. Si prega di notare che le proporzioni dell'immagine possono essere notevolmente distorte se si scelgono le proporzioni sbagliate. L'unico parametro (chs = 40) è percepito come l'altezza dell'immagine, e la larghezza verrà calcolata automaticamente (esempio 3).
Esempio 3. Dimensione dell'immagine
Un'immagine della formula alta 40 pixel è mostrata in Fig. 3.
Riso. 3. Formula con una data altezza
MathJax
Se il tuo sito deve visualizzare molte formule diverse e simboli matematici, allora ha senso connettere il locale la libreria MathJax... Questa libreria funziona con tutti i browser, comprese le versioni precedenti di IE, nonché iPhone, iPad e Android, supporta la notazione MathML, TEX e AsciiMath.
Per utilizzare MathJax, devi scaricare la libreria e tutti i file necessari per il suo funzionamento e copiarli sul tuo server. Puoi farlo più facilmente e scaricare lo script sulla rete, come mostrato di seguito.
Il file JS principale è di circa 50 KB, ma durante il processo carica diversi tipi di carattere e altri script. Il risultato è di circa un paio di centinaia di kilobyte. Sembra molto, ma tieni presente che la maggior parte dei file viene memorizzata nella cache al primo download e la volta successiva i file non vengono più caricati.
Per impostazione predefinita, le formule vengono evidenziate utilizzando i costrutti $$ ... $$ e \ [... \] e i caratteri minuscoli e le espressioni tramite \ (... \) (esempio 4).
Esempio 4. Utilizzo di MathJax
Per \ (a \ ne 0 \), si ottengono due radici dell'equazione \ (ax ^ 2 + bx + c = 0 \), per trovare quali utilizzare la formula $$ (x) _ (1,2) = ( -b \ pm \ sqrt (b ^ 2-4ac) \ over 2a). $$
Risultato questo esempio mostrato in fig. 4.
Riso. 4. Formule sulla pagina
Se clicchi sulla formula clic destro mouse, si aprirà un menu, attraverso il quale è possibile configurare alcuni parametri e vedere il sorgente sotto forma di TEX o MathML (Fig. 5).
Riso. 5. Menù contestuale
MathJax ti permette di includere formule matematiche alle pagine web utilizzando markup LaTeX, MathML o AsciiMath, dopodiché le formule verranno elaborate da una libreria javascript e convertite in HTML, SVG o MathML per la visualizzazione in qualsiasi browser moderno.
Attualmente, MathJax ti consente di utilizzare come copia di questa libreria su proprio server e la versione della libreria dal CDN cdn.mathjax.org:
Configurazione TeX-AMS-MML_HTMLorMML è uno dei file di configurazione più comuni (e quindi più grandi). Sebbene l'uso di questa configurazione sia possibile e non efficace, ma qui è dato per la possibilità avvio rapido utilizzando MathJax.
Riferimento rapido
Poiché il markup LaTeX mi è sembrato più conciso, quanto segue descrive solo domande sul suo utilizzo quando si lavora con MathJax:
- per vedere come è scritta una delle formule, fare clic con il pulsante destro del mouse sull'espressione e scegliere "Mostra matematica come> Comandi TeX" (non vengono visualizzati i caratteri separatori);
- mostrare formule in un blocco separato racchiuderlo tra $$ ... $$ o \ [... \] delimitatori \ [\ sum_ (i = 0) ^ n i ^ 2 = \ frac ((n ^ 2 + n) (2n + 1)) (6) \]
- mostrare formule all'interno di una stringa racchiuderlo tra \ (... \) delimitatori. Ad esempio, \ (\ sum_ (i = 0) ^ n i ^ 2 = \ frac ((n ^ 2 + n) (2n + 1)) (6) \)... Nota che i delimitatori $ ... $ non sono supportati per impostazione predefinita perché i singoli simboli del dollaro possono apparire nel testo e causare la conversione errata del testo in una formula;
- mostrare lettere dell'alfabeto greco, usa \alpha, \beta, ..., \omega: \ (\alpha \), \ (\beta \), ..., \ (\omega \). Per le maiuscole utilizzare \ Gamma, \ Delta, ..., \ Omega: \ (\ Gamma \), \ (\ Delta \), ..., \ (\ Omega \);
- per apici e pedici usa ^ e _. Ad esempio, x_i ^ 2: \ (x_i ^ 2 \);
- gruppo... Apice, pedice e altre operazioni si applicano solo al "gruppo" successivo. Un "gruppo" è un singolo carattere o qualsiasi formula racchiusa tra bretelle(...). Se fai 10 ^ 10, otterrai inaspettatamente \ (10 ^ 10 \). Ma 10 ^ (10) probabilmente ti darà quello che volevi: \ (10 ^ (10) \). Usa le parentesi graffe per racchiudere una formula che applica maiuscole o minuscole: x ^ 5 ^ 6 genererà un errore; (x ^ y) ^ z corrisponde a \ ((x ^ y) ^ z \) e x ^ (y ^ z) corrisponde a \ (x ^ (y ^ z) \). Notare la differenza tra x ^ i ^ 2 \ (x_i ^ 2 \) e x_ (i ^ 2) \ (x_ (i ^ 2) \);
- parentesi... I caratteri singoli () creano parentesi e parentesi \ ((2 + 3) \). Utilizzare \ (e \) per visualizzare le parentesi graffe \ (\ (\) \).
Le parentesi sopra descritte non sono scalabili con la formula. Cioè, se digiti (\ frac (\ sqrt x) (y ^ 3)), parentesi tonde sarà troppo piccolo: \ ((\ frac (\ sqrt x) (y ^ 3)) \). L'uso di \ left (e \ right) ridimensionerà automaticamente le parentesi alla dimensione della formula che racchiudono: \ left (\ frac (\ sqrt x) (y ^ 3) \ right) corrisponde \ (\ sinistra (\ frac (\ sqrt x) (y ^ 3) \ destra) \)... \ sinistra e \ destra si applicano a tutti i seguenti tipi di parentesi: (e) \ (\ sinistra (x \ destra) \), [e] \ (\ sinistra \), \ (e \) \ (\ sinistra \ (x \ destra \) \), | \ (\ sinistra | x \ destra | \), \ langle e \ ranle \ (\ sinistra \ langle x \ destra \ rangle \), \ lceil e \ rceil \ (\ left \ lceil x \ right \ rceil \), e \ lfloor e \ rfloor \ (\ sinistra \ lfloor x \ destra \ rfloor \).
Ci sono anche parentesi invisibili indicate da. : \ left. \ frac12 \ right \ rbrace corrisponde \ (\ sinistra. \ frac12 \ destra \ rbrace \); - somme e integrali\ somma e \ int; il pedice è il limite inferiore e l'apice è il limite superiore. Ad esempio, \ sum_1 ^ n \ (\ sum_1 ^ n \). Non dimenticare (...) se i limiti sono più di un carattere. Ad esempio, \ sum_ (i = 0) ^ \ infty i ^ 2 corrisponde a \ (\ sum_ (i = 0) ^ \ infty i ^ 2 \). Allo stesso modo \ prod \ (\ prod \), \ int \ (\ int \), \ bigcup \ (\ bigcup \), \ bigcap \ (\ bigcap \), \ iint \ (\ iint \);
- frazioni... Ci sono due modi per creare una frazione. \ frac ab si applicherà ai due gruppi successivi e genererà il seguente \ (\ frac ab \); per numeratori e denominatori più complessi, utilizzare (...): \ frac (a + 1) (b + 1) corrisponde a \ (\ frac (a + 1) (b + 1) \). Se numeratore e denominatore sono troppo complessi, puoi usare \ over, che separa il gruppo in cui si trova: (a + 1 \ over b + 1) corrisponde a \ ((a + 1 \ over b + 1) \);
- caratteri
- usa \ mathbb o \ Bbb per il grassetto della lavagna: \ (\ mathbb (CHNQRZ) \);
- usa \ mathbf per il grassetto: \ (\ mathbf (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \) \ (\ mathbf (abcdefghijklmnopqrstuvwxyz) \);
- usa \ mathtt per il carattere "macchina da scrivere": \ (\ mathtt (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \) \ (\ mathtt (abcdefghijklmnopqrstuvwxyz) \);
- usa \ mathrm per il carattere "romano": \ (\ mathrm (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \) \ (\ mathrm (abcdefghijklmnopqrstuvwxyz) \);
- usa \ mathsf per il carattere sans serif: \ (\ mathsf (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \) \ (\ mathsf (abcdefghijklmnopqrstuvwxyz) \);
- usa \ mathcal per l'ortografia "calligrafica": \ (\ matematica (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \);
- usa \ mathscr per un font "script" (come se fosse scritto a mano): \ (\ mathscr (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \);
- usa \ mathfrak per il carattere "Fraktur" (vecchio stile tedesco): \ (\ mathfrak (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \ mathfrak (abcdefghijklmnopqrstuvwxyz) \);
- segni di radice... Usa \ sqrt, che si adatta alla dimensione dell'argomento: \ sqrt (x ^ 3) \ (\ sqrt (x ^ 3) \); \ sqrt (\ frac xy) \ (\ sqrt (\ frac xy) \). Per espressioni complesse preferibile utilizzare (...) ^ (1/2);
- alcuni funzioni come "lim", "sin", "max", "ln", ecc., di solito usano il carattere "roman" (dritto) invece di "italian" (corsivo). Usa \ lim, \ sin, ecc. per ottenere qualcosa come \ sin x \ (\ sin x \), non sin x \ (sin x \). Uso pedici per allegare etichette aggiuntive a \ lim: \ lim_ (x \ a 0) \ [\ lim_ (x \ a 0) \]
- esiste anche un gran numero di caratteri e simboli speciali per elencarli tutti qui. Alcuni dei più comunemente usati sono:
- \ lt \ gt \ le \ ge \ neq \ (\ lt \, \ gt \, \ le \, \ ge \, \ neq \)... Puoi usare \ not mettere una barra in avanti su quasi tutto: \ not \ lt \ (\ not \ lt \), ma spesso sembra brutto;
- \ times \ div \ pm \ mp \ (\ times \, \ div \, \ pm \, \ mp \). \ cdot corrisponde al punto centrale: \ (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 \ scegli 2k) o \ binom (n + 1) (2k) \ ((n + 1 \ scegli 2k) \);
- \ a \ freccia destra \ freccia sinistra \ freccia destra \ freccia sinistra \ mapsto \ (\ a \, \ freccia destra \, \ freccia sinistra \, \ freccia destra \, \ freccia sinistra \, \ mapsto \);
- \ land \ lor \ lnot \ forall \ esiste \ top \ bot \ vdash \ vDash \ (\land \, \ lor \, \ lnot \, \ forall \, \ exist \, \ 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 \ parziali \ (\ nabla \, \ parziali \) \ Im \ Re \ (\ Im \, \ Re \);
- per i confronti modulari utilizzare \ pmod, ad esempio a \ equiv b \ pmod n \ (a \ equiv b \ pmod n \);
- \ ldots trova i puntini di sospensione in \ (a_1, a_2, \ ldots, a_n \); \ cdots trova i puntini di sospensione in \ (a_1 + a_2 + \ cdots + a_n \);
- alcune lettere greche hanno un'ortografia per una variabile: \ epsilon \ varepsilon \ (\ epsilon \, \ varepsilon \), \ phi \ varphi \ (\ phi \, \ varphi \), ecc. "Script" (scritto a mano) l in minuscolo: \ ell \ (\ ell \).
Detexify ti permette di disegnare un carattere su una pagina web e quindi elenca i caratteri \ (\ TeX \) che assomigliano a quello disegnato. Non è garantito che funzioni anche in MathJax, ma lo è un buon posto per iniziare la ricerca. Per verificare se un comando è supportato, vedere l'elenco corrente dei comandi \ (\ LaTeX \) supportati su MathJax.org.
- lacune... MathJax di solito decide da solo come utilizzare gli spazi nelle formule utilizzando un insieme complesso di regole. La stampa di spazi extra nelle formule non cambierà il numero di spazi che MathJax aggiunge alla formula: a␣b e a␣␣␣␣b corrispondono a \ (a b \). Per aggiungere più spazi, usa \, per spazi stretti \ (a \, b \) o \; per uno spazio ampio \ (a \; b \). \quad e \qquad corrispondono grandi lacune\ (a \ quad b \), \ (a \ qquad b \).
Per usare il testo normale, usa \ testo (...): \ (\ (x \ in s \ mid x \ text (è extra large) \) \); - accenti e segni diacritici... Usa \ hat per il singolo carattere \ (\ hat x \), \ widehat per la formula \ (\ widehat (xy) \) (ma se fai il carattere troppo largo sembrerà ridicolo). Allo stesso modo, \ bar \ (\ bar x \) e \ overline \ (\ overline (xyz) \) e \ vec \ (\ vec x \) e \ overrightarrow \ (\ overrightarrow (xy) \) e \ overleftrightarrow \ ( \overleftrightarrow (xy) \). Per punti come \ (\ frac d (dx) x \ punto x = \ punto x ^ 2 + x \ ddot x \), usa \ punto e \ ddot;
- Simboli speciali usato per interpretare MathJax può essere schermato usando \: \ $ \ (\ $ \), \ (\ (\ (\), \ _ \ (\ _ \), ecc. Se vuoi il \, devi usare \ barra rovesciata \ (\ barra rovesciata \) , poiché \\ corrisponde a una nuova riga.
Prima di HTML5, usare le formule era una punizione. Giudicate voi stessi: nel 2005 era necessario avere entrambi browser speciale o dividere il testo in HTML effettivo e inserirlo da immagini o PDF. La ricerca e altre operazioni di editing e/o visualizzazione sullo schermo/carta era un compito ambiguo, al quale erano dedicate intere monografie.
Nel 2012 era già più facile. Ora puoi collegare i plugin necessari (Firemath per FireFox e Daum Equation Editor per Chrome). Ma l'ambiguità degli standard (e del supporto) ha effettivamente costretto a scrivere lo stesso articolo per ciascuno dei browser (e per le loro versioni). Oppure saluta gli utenti con un magico saluto "Il tuo browser deve essere aggiornato/integrato con un'estensione".
Sconveniente? - Sì! Ci è voluto molto tempo per trovarlo soluzione unica? - Sì! Ti fa pensare a quale tipo di registrazione è migliore (presentazione o contenuto), quale convertitore usare (e ce ne sono solo una dozzina e mezzo di quelli più conosciuti)? - SÌ! SÌ! SÌ!
Di conseguenza, il lavoro di pubblicazione si è trasformato nella padronanza di due o tre lessici di markup e nello studio del lavoro di almeno un programma di transcodifica.
Ora, con l'arrivo di HTML5, le cose sono diventate molto più semplici. Ha un nuovo contenitore
