Calcinator HTML MathEditor Help

Math_Editor Help

The Calcinator HTML/LaTeX Math_Editor is a unique tool that enables users to create beautiful math expressions that can be directly inserted into web pages and other HTML-enabled documents. Calcinator-generated HTML equations requires no font, image, or plugin downloads when inserted into web pages. The Math_Editor also can generate traditional LaTeX formatted equations for insertion into documents or equation images.

Calcinator is the math rendering engine that powers the Calcinator^™ Math Suite. The Math_Editor employs the Calcinator engine to generate pure HTML math code that can be directly inserted into any web page or HTML-enabled document for fast-rendering of mathematics expressions. Although the Calcinator math generator engine is a proprietary component of the Calcinator^™ Math Suite, the Math_Editor tool is free to use for personal or commercial publications and the HTML or LaTeX code that you create is license-free!

Advantages of Calcinator HTML for web math publishing

Faster rendering, particularly on Mobile devices
No fonts or images to upload to the web server or download to the client browser
Easier insertion into HTML documents using simple cut-and-paste
Better scalability, expressions remain sharp after zooming
Easier editing, familiar HTML code can be edited in place unlike images or XML code
No fees or licensing! Your generated HTML and LaTeX math code is free to copy and use without restriction

Limitations and Intended Usage

Calcinator is an excellent tool for routine web math publishing. It performs well for single-line expressions and equations of almost any complexity. Calcinator is intended to be the 95% solution, where a fast and simple method is required to generate attractive math for common web publishing applications. It is not currently intended for matrix, multi-line expressions, or very unusual symbolics. A comprehensive math formatting tool is recommended for those advanced math applications. See the examples below for recommended usage.

Calcinator HTML Requirements

Calcinator uses the latest HTML5/CSS3 standards to render properly-formed HTML math within a web page. Most modern web browsers will properly render Calcinator code, but with some minor qualifications:

Web page Doctype must be HTML5 compatible (place the line <!DOCTYPE html> at the beginning of the HTML code)
The Web Browser used to read the page must have HTML5 and CSS3 compliance (most modern browsers and mobile devices do)
The various Web Browsers vary slightly in rendering of some math characters such as integral signs
Calcinator generated HTML code size is typically larger than MathML or LaTeX, but renders faster

Editing

The Math_Editor is an intuitive WSYWIG (What-You-See-Is-What-You-Get) interface that makes equation editing a snap. There are some default behaviors and configurable options to be aware of before editing:

Use the Del button or the Delete key on keyboard devices to delete an object.
Use the arrow buttons or the left-right cursor keys to place the cursor for editing
The editing window does not render exactly the final expression in order to display delimiting parentheses. The View page shows how the edit session will look within the destination document.
The up/down arrow keys select the 20 internal memory locations for storing and editing multiple expressions. See Expression Recall below.
Expressions can be imported from the Scientific_Calc into the Math_Editor via the M1-M6 memory locations.

Functions and Roots

Functions such as sin(x) and roots such as √x are processed computer-style, which means that the operand is delimited by parentheses. There are two ways to render functions that are selected in the View page:

fn(x) - this is the default 'computer-style' setting where the function is delimited by parentheses.
fn x - this is the 'conventional-style' setting where the function is delimited by spaces.

fn(x) style is the default editing environment and will render exactly as it looks in the editor. Editing behaviour is always rendered in fn(x) style. This style corresponds to conventional computer function notation and has the advantage of being unambiguous, but is not commonly employed for published mathematics. When placing a function in the expression, the left parenthesis will be inserted, but the right parenthesis must be placed manually to terminate the function after the operand is inserted. Inserting a new function will display →) as a reminder that there are unterminated functions or parentheses.

fn x style corresponds to conventional published mathematics notation which uses spaces to delimit many functions.

Some examples of fn(x) style and the corresponding fn x style:

sin(xy)² corresponds to: sin² xy

ln( xy ) corresponds to: ln xy

Functions with parameters such as log_n and √ⁿ have an extra parameter that is filled in by backing up the cursor to the empty square. Otherwise they work the same as single operand functions.

Parentheses/Brackets

Parentheses perform a dual function in the Math_Editor. They are both symbols and delimiters. Parentheses are often required to delimit division and other functions in order to indicate precedence. Redundant parentheses in the editor window will be removed in the final rendering.

For example:

( xy ) will render to: xy

If parentheses are desired:

(( xy )) will render to: ( xy )

The same rule holds for each operand:

(x−y)(x+y) will render to: x−yx+y

Brackets such as { } and [ ] are treated as functions and operate under the same rules as functions. Each are opened by pressing the labeled button or by the left bracket keyboard stroke, then terminated by a right parenthesis.

Subscripts/Accents

The X_n tool is used to add subscripts to any variable or symbol. It is an independent object that is added or deleted separately from the symbol that it is paired with. Any symbol or number can be inserted into the subscript object by moving the cursor into the appropriate blank squares. Subscripts and superscripts can be used individually or simultaneously.

Accents are located at the bottom of the Char variable menus. Different menus have different accents but they can all be used with any character symbol. Accents are treated similar to functions in that the symbols must be placed inside the accent container.

Expression Recall

The Math_Editor has that capacity to store 20 expressions. These are distinct from the shared memory locations M1-M6 and are only accessible to the Math_Editor. These can be recalled using the up-down arrow keys. Each expression location is in edit mode when selected and will save it's current state as it is edited. All expression locations are saved to cookies so they are available in the next editing session. Deleting cookies will remove all of the saved expressions.

Inserting Calcinator HTML Code into a Page

After completing an edit, hitting the View button will generate a view of the rendered math expression and the HTML or LaTeX code that represents it. Use the appropriate copy/paste commands for your platform to copy the HATML code into the copy buffer. On Windows and Mac platforms, right-clicking the mouse will expose the copy/paste menu. Once copied, paste the code directly into the code view page in the web editing tool. The procedure for doing this will vary depending on the tool used.

After insertion, there will likely be a need to resize the expression to fit page formatting. Edit the first tag which has a font-size:100% attribute. Changing that attribute will resize the expression. Expermination may be required to get it right.

By default, Calcinator code will not generate a new line for each expression. This allows more than one expression to be inserted into one line. There are several methods to generate a new line after an expression:

Use the Line key in the Symbols menu to generate a new line at the end of the expression
Place a code after the math code
Place a <div> code before and </div> after the math code
Place a code before and after the math code

Text can be included into the equation line by inserting the desired text between the math code and the line terminators.

See the examples below for details.

Using LaTex

The Math_Editor can export and import traditional LaTeX code for insertion into conventional documents for publication. LaTeX is a standardized computer code for specifying mathematics into documents for publishing. LaTeX requires rendering to generate a viewable math expression. The Math_Editor does not render LaTeX into image files, it specifically generates or imports the LaTex source code, edits, and produces HTML for web publications. A rendering tool is required to generate image content with LaTeX. Note that different LaTeX rendering tools may produce slightly different visual results from the Math_Editor.

LaTex is displayed in the View page inside the center 'LaTeX' window. This window is editable and can be cut/pasted. LaTex code is imported from this window using the Import button. The Import function will overwrite the currently selected expression with the contents of the LaTex window. Calcinator Math_Editor will interpret imported LaTex code into its own internal format.

Keyboard Shortcuts

The following keyboard shortcuts are supported on keyboard-equipped devices:

0-9
+ - × / ( ) [] {} ^ .
Enter → View
Backpace → Del
left-right cursor keys → expression editing
a-z A-Z keys → a-z A-Z variables
Functions: sin( cos( ...etc.
Special characters:
i : imaginary constant i
e : Euler constant e
pi : π
intg : ⌠⌡
lim : lim→
sum : ∑

Examples

Equation only on a single line:

⌠⌡


	D

(∇•F) dv =

⌠⌡


	∂D

F•n ds

Multiple expressions on a single line:

f(a) = 12πi ⌠◯⌡ γ  f(z)z−a dz ; D = {z: |z−z 0 | ≤ r} ; γ∈D

f(a) = 12πi ⌠◯⌡ γ f(z)z−a dz ; D = {z: |z−z 0 | ≤ r} ; γ∈D

Equation on a single line with text suffix:

<div>
σ = √ 1N N∑i=1 (x i −μ)2
 ; standard deviation
</div>

σ = √ 1N N∑i=1 (x i −μ)² ; standard deviation

Two independent equations on the same line with text:

x = −b+√b²−4ac2a (or) x = −b−√b²−4ac2a

Complex equation reduced to 80%:

∇×F = ( ∂F z ∂y − ∂F y ∂z )i+( ∂F x ∂z − ∂F z ∂x )j+( ∂F y ∂x − ∂F x ∂y )k

Shared Memory M1-M6

MS (Memory Store) and MR (Memory Recall) are used to store or recall values from six memory locations M1-M6. To store a value to memory, select the field using the associated button and press MS. These values can be shared with all of the other Calcinator^™ Web Apps. For example, expressions from Scientific_Calc can be imported into the Math_Editor for publishing, however Math_Editor expressions may not have meaning in other apps. Partial expressions can be stored into memory and be recalled into other expressions as an editing aid.