Skip to content Skip to navigation

Connexions

You are here: Home » Content » Math Editor Introduction

Navigation

Lenses

What is a lens?

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

This content is ...

Affiliated with (What does "Affiliated with" mean?)

This content is either by members of the organizations listed or about topics related to the organizations listed. Click each link to see a list of all content affiliated with the organization.
  • CNX Documentation display tagshide tags

    This module is included inLens: Connexions Documentation
    By: Connexions

    Click the "CNX Documentation" link to see all content affiliated with them.

    Click the tag icon tag icon to display tags associated with this content.

Recently Viewed

This feature requires Javascript to be enabled.

Tags

(What is a tag?)

These tags come from the endorsement, affiliation, and other lenses that include this content.
 

Math Editor Introduction

Module by: Philip Schatz. E-mail the author

Summary: An introduction to the Math Editor

Note: You are viewing an old version of this document. The latest version is available here.

Math Editor Features

This module explains how to open the Math Editor, create math, edit existing math, and keyboard shortcuts. There is also a separate tutorial page with examples showcasing the features.

At the end of this module are nuances and limitations of the editor. Please, let us know which ones you'd really like to see incorporated!

Opening the Editor

When editing a Module using using Mozilla's Firefox browser, click on a part of the module to open a blue editing box. On the top-right hand side of the box is a "MathML Editor" link which will open up the editor.

Figure 1: Begin editing and in the top-right corner is a MathML Editor link
Launching the Math Editor
Figure 2: Once clicked, a popup window will appear containing the Math Editor
An empty Math Editor

Using the Popup Window

User Interface

The Editor has 4 main sections, detailed below. The toolbar provides a way to insert new operations, a navigation tree to show where the cursor is located, and standard buttons for undo, preview, and source editing.

The main editing area is located below the toolbar and contains the math that is being edited.

Toolbar

The toolbar contains a row of buttons representing categories of different mathematical operations. These are enabled when something is selected in the editing area. Note: The editor does not infer multiplication and addition. See Nuances for how to insert next to existing math by wrapping existing math. Explain the different sections, when it's enabled, how things get inserted, and Keyboard Entry for things.

Menu

Path

Shows the path to the cursor location. Math is organized in a tree-like hierarchy (see Navigating Math) and the path represents where in the tree the cursor currently is. The path (and context) are important because they define what can be inserted and where it will go.

Undo/Redo

These buttons allow the user to undo an operation such as deletion or insertion. See Keyboard Shortcuts for details on using these features from just the keyboard.

Preview

Shows what math will look like when module is published. To resume editing, one must click the Preview button a second time.

View Source

Math in Connexions is represented in an XML format known as MathML. Clicking the View Source button will allow editing of the raw MathML.

Editing Area

This is the main area for creating math. It begins empty, but math can be pasted directly in here from Connextions. The tutorials contain instructions on moving math from Connexions to the math editor and back. The editing area is the most important part of the editor and as several subsections, outlined below:

  • Math is structured like a tree.
  • Colors are used in this area to denote required information and contextual clues.
  • Content vs Presentation Math discusses the two different types of math the editor supports.
  • The cursor is discussed in detail below, including navigation and different editing modes.
  • Since the exact location of the cursor may at times be ambiguous, the context provides visual cues.
  • Keyboard strokes are discussed in detail.
  • Finally, empty blocks are discussed below.

Math Tree

Math in the editor is structured like a tree. It can be thought of as removing the precedence rules and just having parentheses. For example, the formula "a*x^2+b*x+c=0" which is displayed (using the editor) as a⁢x2+b⁢x+c=0 a x 2 b x c 0 and as a tree would look like Figure 3. The equal sign has the least precedence and so is on the top. Similarly, xx binds tighter to 22 through the power operation than to aa through the times operation.

Figure 3: a⁢x2+b⁢x+c=0 a x 2 b x c 0 as a tree
a*x^2+b*x+c=0 as a tree

Colors

Color notation (legend)

_ f _ = x 1 if x < 0 x 2 if __ > 0 __ otherwise _ f _ = x 1 if x < 0 x 2 if __ > 0 __ otherwise

  • _ f _ _ f _ : The location where text is currently being entered is represented as a box with a blue border (see Text Input for more information on how to enter math).
  • x x and x 1 x 1 : Content MathML is represented in black while Presentation MathML is in a dark green (See Content vs. Presentation for editing Presentation MathML.
  • x < 0 x < 0 : The cursor context (when the cursor is next to a complex expression) is represented by having a gray background. See Context for details.
  • __ __ and __ __ : Empty blocks that need to be filled are denoted with a yellow background and optional blocks that can be filled but do not need to be filled are transparent with a dotted border. See Blocks for details.
  • x 2 x 2 : The current selection is denoted by a light blue background. See Copy and Paste back to Modules for details.

Content vs. Presentation

There are two subsets of the MathML language; Content MathML and Presentation MathML. Content, as the name implies, focuses on expressing operations like addition, integration, matrices, etc. Presentation focuses on how precisely math is displayed and contains elements like tables and subscripts.

Figure 4: Content MathML typically has fewer places to enter information and navigation is simpler, and Presentation MathML allows the user to tweak the way formulas are presented and is used by OCR and import software.
Comparing Content and Presentation MathML
Content MathML (a)
Example Content MathML in the Editor
Presentation MathML (b)
Example Presentation MathML in the Editor

The editor supports creating and editing the Content Math subset while being able to navigate through Presentation MathML. Every thing that is entered into the Editor is entered as Content Math. For example, entering a*x^2+b*x+c=0 will be translated as the variable aa times xx to the power of 22 and added to bb times xx ...

Cursor

The Math Editor can be used entirely from the keyboard (See Keyboard Input). The cursor can be in one of four places. Either it is editing a variable or number, editing an empty block of text, next to a complicated expression, or has selected an expression. In each of these places there are several things that can be done.

Editing a variable, number, or block

At this point, the cursor is surrounded by a blue box and the user can type in expressions or even paste existing MathML. The expression will be parsed as soon as the cursor leaves the box or presses the Enter key (in the case of an expression) or immediately when MathML is pasted in. The user can leave the box by pressing clicking on the toolbar or by pressing the Left, Right, or Tab key. See Keyboard Input for more on expressions.

Next to a Complicated Expression

When a cursor is next to a complicated expression, the expression is shown with a light gray background (See Context). From this point, one of three things may be done. The user may add on to the expression. This is done by just typing. For example, if the cursor is to the left of (−π)⁢i , the user may type -1=e^ and parse the expression to yield −1=e(−π)⁢i 1 e

One can select the expression by either pressing Shift+Right/Left (depending on whether the cursor is before or after the element), Delete, or Backspace key. See Selection for what can be done next.

Selection

When an expression is selected, several things can be done:

  • Pressing the Delete or Backspace key will remove it
  • Pressing Ctrl+X/C will cut/copy it
  • Pressing Ctrl+V will replace the selection with the contents of the clipboard
  • Clicking an item in the toolbar will replace the selected item

Context

Instead of using parentheses to denote which operations are grouped, the math editor highlights the current context for the operation. The context shows the position of the cursor relative to existing math in the editing area and is displayed using a gray background. An example of a confusing position can be shown using the following example. Suppose the editor contains the term a+b⁢c a b c and the cursor is just after the cc. If the user enters "^2" it is not clear what should be squared. At that position the user may want to square cc, b⁢c b c , or the entire term a+b⁢c a b c . This produces very different math, namely a+b⁢c2 a b c 2 , a+b⁢c2 a b c 2 , and a+b⁢c2 a b c 2 . In the above example, the context would highlight precisely the math that ended up being in parentheses. One can think of the context as defining where the parentheses should go once the new math is entered.

Keyboard Input

There are several places the user can enter text into the editor. Most of them behave the same way, but listed below are common uses and specifics:

Common for all Text Entry Points

  • Pressing the Enter key or moving the cursor out of the text box (by pressing the Left/Right, Tab key, or clicking elsewhere) after entering will cause the Math to be parsed.
  • If the text cannot be converted to Math, it will appear with a red dashed line beneath it (like a spelling error) and must be corrected before saving.
  • Simple algebraic expressions, logic operations, trigonometric functions, and subscripts can be entered and will be converted into math.
  • If a shorthand notation exists for an operation, it will show up in the toolbar next to the name of the operation (See Toolbar. Shorthand notation is usually more natural (the operation, like addition, is between its arguments, like a+2
  • If a shorthand notation does not exist for an operation, one can still enter the operation using the keyboard by typing the name of the operation which is also found in the menu (See Toolbar)

Categories

There are three categories of key presses and are enumerated in the table below.

  • Shortcuts are preceded by pressing the Ctrl key (or the ⌘ key on Apple computers)
  • Navigation keys move the cursor through the math
  • Modification keys change the math in some way

Table 1
Category Key Condition Action
Ctrl+ (Apple ⌘+) X Math is selected Cuts the selected Math to the clipboard and replaces it with an empty block (that can be deleted)
C Math is selected Copies the selected Math to the clipboard
V Math is selected Pastes MathML from the Clipboard (can be from other sources)
Z   Undoes one step in the editor
Y Ctrl+Z was just pressed Redoes one step in the editor
E   Opens full-source editing
Navigation Tab Shift+Tab   Moves to the next/previous free block
Left / Right   Moves to the previous/next element in the Math
Shift+Left / Shift+Right After / Before the Context Selects the Context element (right next to the cursor)
Before / After the Context Selects the Context's parent
Modification Enter   Attempts to parse the text entered next to the cursor
Delete / Backspace Cursor next to Math Selects the Math Node (subsequent delete will remove the math)
Math selected Removes the node and replaces it with an empty block (a second press will remove the block as well)
Cursor in block Removes the empty block if it is allowed in MathML (in "a+b+c" any one variable can be removed, but addition requires at least 2 things to add)
Table 2: Text Input Examples
Type Input Math Output
Calculator a*x^2+b*x+c=1/2 a⁢x2+b⁢x+c=12 a x 2 b x c 1 2
a && b || c != a -> b a∧(b∨c)≠a→b a b c a b
sin(x)^2+cos(x)^2=1 sin2x+cos2x=1 x 2 x 2 1
x_1+x_2<x_3 x 1 + x 2 < x 3 x 1 x 2 x 3
Templates sum=n*(n-1)/2 ∑ __ =n⁢(n−1)2 __ n n 1 2
MathML <pi /> π
&#1207x; ҷ

Text Entry

This is a text entry place. See shortcuts. can paste MathML (Ctrl+V from Mathematica, MathType, etc), or enter simple algebra (see Shortcuts). Moving away using Enter, Tab, Left, Right will cause the input to be parsed and converted into Math.

Blocks

Blocks are holes that may need to be filled. (Click or Tab to them). Required blocks have a yellow background and optional ones are transparent and have a dotted border.

Click, double-click, highlight, (only right-click inside a text box)

Nuances / Limitations

There are several nuances in the editor, and common ones are listed here, along with workarounds. Also listed are limitations of the editor and things we'd like to get working soon.

  • If more than two things are added or summed together, one cannot select only a subset of them.
  • One cannot easily change a "+" sign to "*". To do this, you will need to copy the entire "+" operation and paste it, then remove the unwanted children.
  • Moving children around by dragging is not possible. Unfortunately, this currently requires copying and pasting to the clipboard.

Limitations

Unable to change the domain of operations like Sum, Max, and Integrals.

Operations like Sum, Max and Integrals may be over an interval, or when a certain condition holds (like x∈R x ). The math editor allows editing these variations but does not always offer a way to create new operations. Currently, this must be done by hand by switching to the source edit view and manually replacing the <interval/> with a <condition/>.

Wrapping Math with Math

Sometimes it is necessary to add to existing mathematical operations. For example, adding higher terms to a polynomial. This can be done either by using the keyboard or with help of the toolbar. In the explanations below we start with "b*x+c=0" and create a⁢x2+b⁢x+c=0 a x 2 b x c 0

Keyboard Only

To add the a⁢x2 a x 2 term:

  1. Step 1. Move the cursor to the left of b⁢x+c b x c but make sure the context is only around b⁢x+c b x c and that b⁢x+c b x c is not selected. This can be done by clicking the "+" sign.
  2. Step 2. Enter "a*x^2+" (without the quotes) and press the Enter key.

Toolbar

Using only the toolbar to insert math is a bit more difficult because the editor does not infer multiplication or addition when pasting right next to existing math. We will need to "wrap" the existing math with the combiner operation (usually +,*, or ^) and then add in the new math.

  1. Step 1. Select b⁢x+c b x c but make sure only b⁢x+c b x c is selected. This can be done by double clicking the "+" sign.
  2. Step 2. Cut the existing math. This should create an empty block.
  3. Step 3. From the toolbar select the combiner operation. This should create at least one empty block.
  4. Step 4. Paste the math that was cut earlier into one of the empty blocks.
  5. Step 5. Select another empty block.
  6. Step 6. From the toolbar, insert the operation.

Content actions

Download module as:

PDF | More downloads ...

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks