HTML + CSS + JavaScript implement the webpage Public Editor (1)

I have been working on a web-based public editor recently. Now the progress is over half. I will summarize my experience in developing a web-based public editor during this time.

 

Before I started development, I collected a lot of information about the formula on the web page. Currently, the popular formula for Web pages is MathML: Mathematical Markup Language (MathML ), is a standard based on XML, used to write mathematical symbols and formulas on the Internet. Jsmath: a method for displaying mathematical formulas on a web page.Code, Combines JavaScript, CSS, and Unicode fonts to display mathematical formulas. It supports multiple browsers and platforms without MathML support. Other such technologies are not listed here.

 

After analyzing these formula methods, we find that they have their own advantages and disadvantages. For example, some methods generate an image based on the final formula. Although the image is not large enough to ignore the network transmission pressure, however, it is inconvenient to modify the size of a small image on a math exam. Although some methods can load a third-party CSS to display and edit webpages, cross-browser performance is not satisfactory. Some also need to install plug-ins to display normally.

 

HTML + CSS + javascript: the idea of implementing a non-image, online web page editor came into being. In this way, the shortcomings of the image shielding implemented by the Web Editor are easy to modify. As a result, we began to analyze the formulas and features used in the book operational research.

 

The following is a summary from my colleagues when developing the Public Editor: "formula input or writing is from left to right from bottom to top. The overall structure follows this rule during reading .. However, special characters must be handwritten and capitalized. attributes may be limited before the formula, for example, Max min... A prefix that does not involve operations but cannot be missing. The ratios of different operators are different. When entering brackets, you also need to have an independent item that can be appended with the upper and lower labels .. In order not to affect the input, you can modify the details if you want to insert the settings, so that you can not modify the details when entering the answer ."

 

Based on this elder brother's summary and the suggestions of the project manager, I classify the score, power, root number, points, and other methods in the mathematical formula into one.

 

These nine squares can satisfy most of the formula requirements. We call location 1 An operator. The formula moves the position based on the symbol of location 1. For example, the score is the score line at the position 1, the numerator at the position 2, and the denominator at the position 4. In this way, the approximate score is displayed, and then the position can be fine-tuned. Points: positions 1 are integral symbols, and 3, 6, and 7 are numerical values respectively.

In HTML, we use span to represent squares. We refer to the syntax in MathML:

For example, the following code is displayed in MathML:

 

 1   <  Math  >  2    <  Mrow  >  3     <  Mi  > X </  Mi  >  4     < Mo  > = </  Mo  >  5     <  Mfrac  >  6       <  Mrow  >  7         <  Mrow  >  8          <  Mo  > - </  Mo  >  9           <  Mi  > B </  Mi  >  10         </  Mrow  > 11         <  Mo  >  & Plusminus;  </  Mo  >  12         <  Msqrt  >  13           <  Mrow  >  14             < Msup  >  15               <  Mi  > B </  Mi  >  16               <  Mn  > 2 </  Mn  >  17            </  Msup  >  18             <  Mo  > - </  Mo  >  19             <  Mrow  >  20               <  Mn  > 4 </  Mn  >  21               <  Mo  >  & Invisibletimes;  </  Mo  >  22               <  Mi  > A </  Mi >  23               <  Mo  >  & Invisibletimes;  </  Mo  >  24               <  Mi  > C </  Mi  >  25            </  Mrow  >  26           </  Mrow  >  27         </  Msqrt  >  28       </  Mrow  >  29       <  Mrow >  30         <  Mn  > 2 </  Mn  >  31         <  Mo  >  & Invisibletimes;  </  Mo  >  32        <  Mi  > A </  Mi  >  33       </  Mrow  >  34     </  Mfrac  >  35    </  Mrow >  36   </  Math  > 

The code for implementing the score and point is as follows:

 1   Score:  2   <  Span  Math  = 'Frac'  Mathroot  = 'True'  >  3  <  Span  > </  Span  >  4  <  Span  > 2 </  Span  >  5  <  Span  > 4</  Span  >  6   </  Span  >  7   8   Points:  9   <  Span  Math  = 'Integr3'  Mathroot  = "True" >  10  <  Span  > </  Span  >  11  <  Span  > 3 </  Span  >  12  < Span  > 6 </  Span  >  13  <  Span  > 7 </  Span  >  14   </  Span  > 

As a result, we can find that our HTML code is very concise. the browser can recognize it only when the starting span indicates that it is a mathematical formula and what formula it is.

The following figure shows the two methods in the browser (the ratio is enlarged ):

 

In IE8, chrome19, and safari5.1.7 respectively...

 

Today, I am confused about a lot of things. You may find that the most important JavaScript implementation has not been mentioned. To tell the truth, I am very familiar with JavaScript. I need to sort out my ideas, look at the official website and listen to the next decomposition...

 

 

PS: I read this article and found that this article is a design concept. The key points of implementation are described in general, but it is not involved in some specific aspects, how to Write it later remains to be considered... the young student just graduated from the work this year.ProgramMembers, we still need to build more bricks for our predecessors...