Display mathematical formulas in a Web page

This site is a science site, often involving the input and display of mathematical formulas, which has been a problem on the web. So refer to a few online articles, and now will own the results of the study to tidy up. Main reference URL: Zhang Yang's Blog's Web math formula input and display.

A Several methods of computer performance mathematical Formula 1. Desktop-facing Tex system

Tex is an excellent desktop electronic typesetting system developed by Professor Knuth. It provides a powerful and flexible typesetting language with up to 900 instructions and a macro feature that allows users to continuously define their own new commands to extend the capabilities of the Tex system.

Tex system has many advantages, such as open source, easy to transplant, high typesetting quality, output and device independent. At the same time, it is also recognized as the best mathematical formula typesetting system, it has been widely used in the field of mathematics and engineering, the relevant fields of academic papers are basically produced by the Tex system or its compatible system (such as latex system) typesetting.

In Tex systems, various mathematical symbols and formulae are represented by different mathematical notations, such as \sin, sin, \sqrt, etc. The combination of mathematical notation and numbers is generally placed in and \]. Several mathematical formulas and their Tex directives are listed in the following table:

Mathematical Formulas	Tex Instructions
	\frac{3+x}{5}\]
F (x) =x2-1	F (x) =x^2-1\]
	\sqrt[3]{x^4-3x+1}\]

In general, the Tex directive is very close to the mathematical formula it represents, or the English abbreviation for the mathematical notation. Therefore, the Tex command is more intuitive, easy to learn, but also very convenient input, mathematics involved in primary and secondary mathematics symbols are more so.

But in primary and secondary schools, the formula input is almost no use of Tex, with the word comes with the formula editor, I usually use the field code these years, because high school physics usually in the input fraction, the root of the formula will be involved in the input, and this simple situation with the formula editor a bit overqualified, but also more difficult to lose, I usually use the formula editor only in more complex cases, such as a matrix.

2. MathML for Internet-oriented mathematical markup language

Although the Tex system can perfectly display mathematical formulas, it cannot be used on the Internet. I am currently using the formula in Word, in the Web page to display the formula in the form of an image, it is time-consuming to use this method, and the modification is inconvenient. and HTML Hypertext Markup Language because of its own shortcomings, it is difficult to display the mathematical formula.

In response to these issues, the Internet Association (World Wide WEB CONSORTIUM,W3C) established a mathematics working group in 1997 to develop a mathematical markup language based on the XML language standard (mathematical Markup Language, MathML). The organization released the MathML 1.0 version in 1998, the latest version is 3.0, released on October 21, 2010. MathML language defines various mathematical symbols and formulas mainly from the aspects of performance (Presentation) and content two dimensions. Performance markers describe mathematical formulas from the display of mathematical expressions, such as the <msup> tag, which represents the superscript symbol,<msub> the subscript symbol, and so on, and the content tag is a mathematical formula that describes the intrinsic meaning of the mathematical expression, such as <plus> The markup represents the addition. The two can represent the same mathematical formula from their point of view, for example, the performance tag and the content tag are as follows:

Performance Markers	content Tagging
? 123456 <math>    <mroot>        <mi>a</mi>        <mi>n</mi>    </mroot></math>	? 123 < apply > < root />< degree >< ci type = "integer" >n</ ci > </ degree >< ci >a</ ci ></ apply > Note: The display is not normal on Firefox, the reason is unknown

MathML Mathematical Markup Language is an international standard, Mozilla/firefox/netscape (7.1+) browser has default support for MathML language, but Internet Explorer does not support MathML standard temporarily, You need to install the MathPlayer plugin to parse the Web page that contains the MathML tag.

3. Asciimathml Conversion method

In short, the Tex directive and the MathML markup language are two highly complementary languages. The mathematical formula described by the Tex instruction is simple and intuitive, but the browser cannot be directly identified and displayed; MathML Mathematical Markup Language is designed for the Internet, but its markup language is relatively complex and not easy to enter. Therefore, a researcher combines the advantages of both, developed the Tex instruction and MathML automatic conversion Java program, ASCIIMATHML is the leader.

The ASCIIMATHML conversion program was developed by Peter Jipsen of the University of California, Chapman, where the idea was to insert a section of JS code on the Web page that would place the TeX command in the Web page (tex/ Latex-style) is automatically converted to MathML performance markup language and returned to the Web browser that supports the MATHML standard for recognition and display.

Because Microsoft Internet Explorer browser does not support the MathML standard, to correctly display the mathematical formula, ie client also needs to install the MathPlayer plug-in, which increases the user's inconvenience. As a result, Pierce College David Lippman developed the Asciimath Image fallback conversion program based on the Asciimathml conversion method, which automatically determines whether the client browser supports MATHML, if supported, Returns the MathML performance tag, or, if not supported, a GIF image of the formula (remotely invoking a CGI program on the Internet to generate an image). In addition, the author provides a asciimathteximg conversion that generates a GIF image directly from the Tex directive, regardless of whether the user's browser supports MathML.

The latest news on the ASCIIMATHML website is to recommend a new translator Mathjax, an open source JavaScript display engine that displays beautiful mathematical formulas on all contemporary browsers while supporting Tex and MathML representations.

4. Other methods

The above method requires the user to keep the JS file locally, and some websites will handle the processing program on the server, you simply pass the formula of the Tex expression on the page, you will return the image of the formula, in fact, is the above asciimathteximg server version. What I know is the website http://www.codecogs.com service, for example you want to display the square root of a2+b2 on the webpage, you only need to enter the following HTML code in the location of the webpage:

?

1	<imgsrc="http://latex.codecogs.com/gif.latex?\sqrt{a^2+b^2}" title="\sqrt{a^2+b^2}"/>

Want to use more simple, available point JS code, the specific process can be referred to in the blog easy to use latex mathematical formula, no longer repeat.

Ii. Displaying and inputting mathematical formulas in the web system

From the above content can know, Asciimathml is not a good choice, in Firefox display the normal formula in IE can only display the source ASCII characters, using http:// Www.codecogs.com do not need to download the JS file in the client should be the fastest, but a bit cowgirl, in case this site service is not normal, then all the formula pictures on my site will not show.

Considering that the majority of domestic IE users, so decided to use Asciimath Image fallback conversion program method, but the use of a more beautiful mathjax. All you need to do is add the JS address between the pages and:

?

1	<scripttype="text/javascript"src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

The above code shows that we are using the CDN (Distributed Network Service) to install this JS, which is also recommended method, CDN can automatically from your host near the fastest, most recent server download JS files, and will automatically upgrade. Of course you can also download the Mathjax to the local server. Then write the mathematical formula describing the Tex instruction anywhere in the Web page, note: If you want the formula to take a single line, use and \] to wrap the formula, that is, block display, if you want to use the inline, and \ (and \) The formula is wrapped up, and the specific expression of the formula can be found in the English language: It was written in great detail.

But the manual writing Tex formula is still very difficult, I use is the famous MathType, in this software's menu bar to choose Preferences→cut and Copy Preferences ..., if set up, You can copy the MathType formula and paste it as a Letex format that you can use for Mathjax.

If you don't use a desktop program, you can also use the online Tex formula editor, say http://www.codecogs.com/latex/eqneditor.php.

Third, paste the Mathjax formula into Word

If you paste the formula that Mathjax displays on the page directly into Word, you get only some characters. The correct way to do this is to first right-click on the formula on the Web page to open the context menu and click MathML Code:

The MathML code for this formula pops up, and then the code is copied:

Open Word and paste as text:

Note: This method can only be used in docx because the formula Editor in the new format introduced by Word 2007 has been redesigned, and I guess the reason for this approach might be that Microsoft's Formula Editor uses the MathML language of the Web Standard. Finally spit the slot, Microsoft's new formula editor used up too awkward, lose a simple formula also to get a half day, these years I almost never use it.

file Download (downloaded 919 times)

<!DOCTYPE HTML><HTML><Head>    <MetaCharSet= "Utf-8"/>    <title></title>    <Linkrel= "stylesheet"href=".. /css/index.css "/>    <Scripttype= "Text/x-mathjax-config">MathJax.Hub.Config ({extensions: ["Tex2jax.js"], Jax: ["Input/tex", "Output/html-css"], Tex2jax: {inlinemath: [['$','$'], ["\\(","\\)"]], Displaymath: [['$$','$$'], ["\\[","\\]"]], Processescapes:true        },        "Html-css": {availablefonts: ["TeX"] },      });</Script>    <Scripttype= "Text/javascript"src= "Mathjax.js"></Script></Head><Body>    <Div>Set the Set<spanclass= "Mathjye"Mathtag= "Math"style= "Whitespace:nowrap;wordspacing:normal;wordwrap:normal">M={x|0≤x≤<Tablecellpadding= "-1"cellspacing= "-1"style= "margin-right:1px"><TR><TDstyle= "border-bottom:1px solid black">3</TD></TR><TR><TD>4</TD></TR></Table>}</span>，<spanclass= "Mathjye"Mathtag= "Math"style= "Whitespace:nowrap;wordspacing:normal;wordwrap:normal">N={x|<Tablecellpadding= "-1"cellspacing= "-1"style= "margin-right:1px"><TR><TDstyle= "border-bottom:1px solid black">2</TD></TR><TR><TD>3</TD></TR></Table>≤X≤1}</span>, if the b-a is called the "length" of the set {x|a≤x≤b}, then the "Length" of the Set M∩n is ()</Div>    <Div>$\frac{x^3}{e^x-1}$</Div>    <Div>$\frac{1}{12}$</Div>    <Div>$\frac{1}{4}$</Div></Body></HTML>

Display mathematical formulas in a Web page