Chapter 4. Using sMArTH

Table of Contents

Workspace Layout
Math Toolbar Organization
Equation Editing
Other shortcuts
Editing Behavior
Saving and Downloading

Workspace Layout

The sMArTH workspace consists of the seven components identified in Figure 4.1, “The sMArTH workspace organization”:

  • the main menu provides commands for creating a new equation (New) and saving the equation you are working on (Save) together with those for accessing the documentation (Help) and brief information about the application (About);

  • the work area covers the center of the sMArTH screen and is the place where your equation will appear;

  • the math toolbar contains mathematical entities, grouped into 12 sets that are presented in the section called “Math Toolbar Organization”;

  • the editor toolbar provides common editing commands such as: cut, copy, paste, undo, redo;

  • the preview area displays the way the equation would look like in MathML or LaTeX format;

  • the download area provides links to the currently saved files on the server;

  • the status bar presents a brief description of the currently focused item.

Figure 4.1. The sMArTH workspace organization

The sMArTH workspace organization

Math Toolbar Organization

The mathematical content toolbar is organized in 12 sets of entities:

  • Layout Templates (fraction, square root, subscript, superscript, etc.);

  • Fences and accents (parenthesis, brackets, braces, prime, second, etc.);

  • Calculus functions (sum, product, integral, limit, etc.);

  • Arithmetical and logical operators (plus, minus, times, over, etc.);

  • Relational operators (equals, greater, less, equivalent, etc.);

  • Set theory symbols (union, intersection, diference, is in, etc.);

  • Trigonometric functions and geometric symbols (angle symbols, sinus, cosinus, etc.);

  • Matrix (line matrices, column matrices and generic matrices);

  • Various arrows;

  • Greek lowercase;

  • Greek uppercase;

  • Miscellaneous algebraic and scientific useful symbols (infinity, aleph, etc.).

Each set of tools has an activator button. When an activator button is clicked the coresponding set of tools is displayed. A brief description of what each toolset is presented in the editor's status bar when the mouse pointer is over the toolset activator. Such a description is also provided when the mouse passes over a toolbar button.

Equation Editing


Equations are made up of three types of components:

  • atomic components: editable and static text;

  • layout components: fraction, radical, subscript, etc.;

  • grouping components: rows.


The cursor is displayed only in the editable text and the rows. The navigation between these components can be performed using the mouse, the keyboard or a combination between the two.

A mouse click on an editable text or a grouping component will move the cursor inside the respective component. On the other hand, a mouse click on a component that is not editable will also select the component, but in this case the cursor will disappear.

The keyboard can be used as well to navigate between components, and can save the user a lot of time once the navigation keys are mastered:

  • Left Arrow: move cursor to the left (if possible);

  • Right Arrow: move cursor to the right (if possible);

  • DownArrow: traverse all editable text components;

  • UpArrow: traverse all editable text components in reverse order;

  • PageDown (in a layout component): traverse the subcomponents from left to right;

  • PageUp (in a layout component): traverse the subcomponents from right to left;

  • Home: focus the parent component;

  • End (in a layout component): focus the first child component.

Other shortcuts

  • Save:Ctrl-T

  • Cut:Ctrl-X

  • Copy:Ctrl-K

  • Paste:Ctrl-V

  • Undo:Ctrl-Z

  • Redo:Ctrl-Y

Since some of the keyboard inputs are filtered by the browser, the shortcuts for the actions in the editor toolbar are not always the usual ones.

Editing Behavior

Inserting a layout component

If the currently selected component is not a grouping component, the layout component will be inserted around the selected component, (that is, the latter will be incorporated in the new one). Otherwise, an empty layout component will be inserted at the cursor position.

Inserting a layout component

Typing the name of a function followed by a paranthesis (sin(, lim(, etc.) will automatically insert the respective component, thus maintaining a consistent output.

Other Keys

  • Enter creates a new line only if the component that has the cursor can be broken in the cursor position. For instance, enter pressed in the denominator of a fraction should have no effect.

  • Backspace removes the object before the cursor if the cursor is displayed. This object can be either a character or a layout component (for instance, a root). Inside a layout component, backspace pressed when the cursor is at the beginning of a child will delete the parent.

  • Delete removes the object after the cursor if the cursor is displayed. This object can be either a character or a layout component (for instance, a root). Inside a layout component, delete pressed when the cursor is at the beginning of a child will delete the parent.

Saving and Downloading

Selecting Save As (or Save, but only for the first time in a working session) will display a save dialog that allows the user to choose the output format(s) he wants to use for his equation. At this time three formats are available: MathML Presentational, LaTeX and SVG. Once the choice is confirmed the equation is saved on the server in the chosen format(s). Links to the files are provided in the download area. By pressing this links the equation files can be downloaded on the local machine.