First, what problems to solve
To implement a visual formula editor, the following problems need to be solved:
- How does a formula translate into data that a computer can “understand”? The “understanding” here is mainly for visual editing.
- Once the computer “understands” the formula, how does it get typeset and rendered?
- Once you’ve solved typesetting and rendering, how do you do interactive editing?
- How to improve editing efficiency after interactive editing is solved?
2. Expression of formula
In mathematics, the formula in a broad sense is the result of combining mathematical symbols under a specific formal grammar. Before we think about how to express it, let’s look at the structure of the formula.
2.1 Formula Structure
2.2 Formula Language
By defining symbols and structures and providing the ability of structure nesting in design, the expression of formulas can be solved by computer program, and the problem of understanding formulas can be solved by computer. This behavior, broadly speaking, is the design of a formula language. Before designing our own language, let’s take a look at the formula languages already on the market. LaTeX, MathML, OMML, AsciiMath, and, of course, UnicodeMath are some of the most common formula languages on the market.
Let’s look at the following formula in various languages:
LaTeX
LaTeX (/ ˈ l ɑ ː t ɛ / x, is often pronounced / ˈ l ɑ ː t/or / ˈ ɛ k le ɪ t ɛ k /, writing “LaTeX”). The LaTeX system is a markup language that can handle typography and rendering. Code example x=\frac{-b \ PM \ SQRT {{b}^{2}-4ac}}{2a} LaTeX is a document typeset system, of which the LaTeX formula (that is, AMS-latex) is only part, provided by the American Mathematical Society. The LaTeX formula defines a set of commands for symbols and structures, such as \ PM for symbol ±\ PM ±; For example, \frac{}{} represents the fractional structure.
AsciiMath
AsciiMath is a client-side mathematical markup language for displaying mathematical expressions in Web browsers.
Code example: x = (-b + -sqrt (b ^ 2 — 4ac))/(2a) AsciiMath is a simplified version of the LaTeX formula, using the original mathematical expression whenever possible. Use commands only for symbols and structures that cannot be expressed, such as SQRT for root structures.
MathML
MathML is an XML markup language for describing mathematical formulas, developed by the Mathematics Working Group of the World Wide Web Consortium (W3C). Code examples:
<math display="block"> <mi>x</mi> <mo>=</mo> <mrow> <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>Copy the codeThe MathML definition deals only with formula structures, and formula symbols are expressed by Unicode characters themselves.
2.3 Why LaTeX
LaTeX was chosen for the following reasons:
- It was born earlier than C language, and has a higher market share and a more complete ecology, especially in the printing field.
- Good stability, documents from decades ago can be rendered in the present very well;
- Open source and free;
- The designers, Donald Knuth and Leslie Lamport, are Turing award winners;
- LaTeX is the most versatile typography solution in the industry, with excellent Web rendering tools such as MathJax and KaTeX.
3. Rendering of the formula
Formula rendering solves the typesetting problem of formula on different carriers. Let’s take a look at some formula diagrams to get a sense of the formula layout.
3.1 Box Model
Boxes in TEX are rectangular, two-dimensional objects with three corresponding dimensions, called height, width and depth. Here’s what a standard box looks like, with its so-called reference points and baselines given:
3.2 Four-level rendering of the formula
Level 4 rendering is designed to solve the problem of formula aesthetics at various nested levels. Here is an example:
We’ll see that the font size of A0A_0A0 is larger than that of A4a_4A4. Imagine, if this formula continues to be nested, how would a100a_{100}a100 render? Is it getting smaller? Level 4 rendering is designed to solve this kind of problem.
TeX defines four levels of rendering:
D The largest font in a list font formula, used mainly in formulas with an exclusive line. D (display style) indicates between lines.
T text font Regular font for formulas in the line. T (text style) stands for inline.
The s-mark font is generally used for upper and lower corners. S (Script style) stands for corner script.
SS small label font is generally used for corner labels, such as the uppermost ‘2’ in a22a^{2^2}a22. SS (script script style) : stands for corner mark corner mark.
And four other “approximate” fonts D’, T’, S’, and SS’, which are almost the same as the above four fonts, except that the corners are not raised as much relative to the main content.
This means that the formula has a maximum of 4 font sizes, so that parts of the formula are not too small to see.
3.3 Selection of rendering scheme
Formula rendering is very expensive to follow in full TeXBook specification. Considering the current situation, time cost and input-output ratio, the formula rendering scheme finally chooses the mature Web formula rendering tool MathJax. Some will say why not KaTeX, there is another factor involved in rendering, which will be covered next. List the background of MathJax and give yourself some reason.
Fourth, the editing of the formula
Since the cost of doing your own rendering is relatively high, you have to choose a mature MathJax or KaTeX for the benefit. That is, you can only interoperate with the DOM formula rendered by existing tools to achieve the final edit.
4.1 Visual editing implementation
LaTeX formulas, such as x=\frac{-b \ PM \ SQRT {{b}^{2}-4ac}}{2a}, enter the rendering tool, which parses it and completes rendering:
To complete editing on this basis, you must complete the following two actions:
- The edited LaTeX formula parts are positioned according to the user’s cursor position, that is, a complete mapping between the visual structure and LaTeX code is achieved;
- When the user finishes editing, he updates the visual as well as the LaTeX code.
After analyzing the rendering mechanism of MathJax and KaTeX, we found that MathJax has a high degree of similarity to the formula language MathML in DOM structure, which opens up the possibility of low-cost visual and formula code mapping. Therefore, the following formula editing implementation scheme is designed:
- LaTeX or MathML formulas enter MathJax;
- When the visual SVG DOM is generated by MathJax parsing formula, the Kernel based on MathML structure is generated, and the one-to-one mapping between SVG and Kernel nodes is established.
- When users operate SVG DOM nodes, it is converted into operations on Kernel data.
- Using the updated Kernel, a new MathML formula is generated.
- Take the new MathML formula, enter MathJax again, and go back to step 1.
In this process, all of the formula rendering is done by MathJax, so the rendering is beautiful.
4.2 Technical architecture design
In terms of the technical architecture, the following design is carried out to fully decouple the UI layer and ensure the flexibility of the business. Here you can fully play freely. It is not the focus of this article, so I will not mention it.
5. Optimization of formula editing efficiency
5.1 Nature of formula editing
From the perspective of formula editing, a formula is a combination of symbols and structures. Symbols such as π and ω; The structure such as fraction, square root, etc. Therefore, the essence of formula editing is to solve the input problems of symbols and structures. Efficiency, convenience, and quality (such as syntactic correctness) are key indicators of formula editing ability.
5.2 Editing Path Analysis
5.2.1 About Efficiency
The essence of formula editing is the transformation of formula symbols and structures in consciousness into physical expression and display. How to shorten the path from consciousness to physical carrier is the main concern of improving the editing efficiency of formula effectively.
Formula elements are divided into two types of symbolic elements and structural elements, which are a large set. A formula editing action requires two steps, the first step: formula element retrieval; The second step is to retrieve the result input.
There are two main types of editing: code editing and visual editing. The following two scenarios are used to discuss efficiency optimization.
(1) Code editing
Code editing, that is, input the formula by directly entering the formula code, as shown in the figure:
Formula element retrieval
Code retrieval is more suitable for people familiar with formula languages (such as LaTeX). It is necessary to memorize the corresponding relationship between formula elements and code before code retrieval can be performed effectively. This method has a certain memory cost, but retrieval is fast, and the most flexible.
A large amount of memory has a high cost, and reducing the cost of memory is the efficiency optimization point of this link.
Retrieval result input
In code editing mode, the retrieval result is the formula language code. A fraction, for example, corresponds to the following code in LaTeX :\frac{}{}, which contains the command \frac and two parameters {}. Plain text input takes a lot of time.
Formula elements have fixed corresponding code expressions in formula language. The efficiency optimization point of this link is that the corresponding code of formula elements can be input at one time instead of character by character.
(2) Visual editing
Visual editing is a way that most common elements are grouped and displayed on the tool panel in a visual form, so that users can search and select and input formulas.
Formula element retrieval
Visual retrieval is very friendly, low threshold and out of the box for people unfamiliar with formula language. But lookup is slow, and the range of input elements is limited to include only formula elements already provided on the tools panel.
A large number of visual elements to find the target elements, time-consuming, improve the efficiency of visual element search is the optimization point of this link.
Retrieval result input
In visual editing mode, the retrieval result is the corresponding visual element, and you can click or enter to enter, which can optimize the usage ratio of keyboard and mouse and improve the utilization rate of keyboard.
5.2.2 About Quality
In addition to the correctness of the meaning of the formula and the special requirements for the formula, the quality problem of the formula generally occurs in the incorrect grammar of the output content.
Code editing mode, very free, there will be spelling errors, grammatical errors, error deletion, error characters and other problems. Accurate positioning, accurate description of the error check and prompt, and intelligent repair or repair suggestions are important and friendly quality assurance.
In visual editing mode, input elements must be strictly verified and input content must be strictly verified. Under this premise, it is difficult for users to produce a formula with quality problems.
5.3 Possible Implementation Schemes
The solutions listed below are for reference only.
5.3.1 Code editing
Formula element retrieval
As for the optimization of memory retrieval in this stage, besides learning by the user, the editor can also provide some help. The editor can display the formula language knowledge on the formula panel in real time, increasing the user’s understanding of the formula language knowledge, as well as the editor’s understanding. Here are two suggestions:
- A simple formula breakdown diagram helps users understand the basic elements of a formula: symbols and structure.
- When the mouse slides over all visual formula elements, the corresponding formula language code and brief explanation are displayed, which increases the user’s contact rate with formula language knowledge and reduces the user’s memory cost.
Retrieval result input
As a language, formula language has relatively fixed input element code, which can improve efficiency through association, automatic completion, automatic recognition of cursor position, syntax highlighting, etc. Refer to the programmer’s code editor for this link.
5.3.2 Visual editing
Formula element retrieval
Visual input element retrieval has the following recommendations:
- Add visual element shortcut keys to solve the retrieval input of frequently used elements;
- Provide quick search function, by language code, pinyin content, quickly search the corresponding elements;
Retrieval result input
Keyboard input efficiency is better than mouse input, the design can improve the coverage of keyboard as much as possible, improve the continuity of keyboard operation.
5.3.3 Weaken the boundary between code editing and visual editing
There are all levels of proficiency in the language of formulas in the population. People who are not familiar with the formula language may be more accustomed to using visual editing, and in some cases also need to use source editing to solve the problem of incomplete panel element coverage. People familiar with the formula language may be more comfortable using source code editing mode, but it is inevitable that some code will not be remembered and will need to be entered through visual panels.
Therefore, visual mode provides the ability to input formula language code, and code mode provides the ability to input visual elements. Weakening the boundary between them is a better direction of optimization.
5.3.4 Directional optimization
In practice, the formula editor may have specific conditions, such as chemistry discipline formula entry, such as primary school formula entry. In this case, specific optimization strategies can be designed according to specific scenarios. For example, in chemistry, because chemical formulas have certain characteristics, they can provide quick input for these characteristics. For example, H2O expresses H2O\ Mathrm {H_2O}H2O, etc. For the input of primary school formulas, the database of primary school formulas can be collected in advance to provide the ability of input associative completion.
This is all the content of this share, if there are errors also hope to correct. If you are also interested in research, please contact me to discuss. My email is [email protected]