Custom toolbar
Configuring the MathType toolbar according to your needs is entirely possible. You can build a custom toolbar by writing an XML string with the items you choose. This string will be a parameter that you pass to the MathType 7 JavaScript object.
Vocabulary
Basics
Making a new toolbar is basically choosing a subset of items of the general toolbar (the default one), and arranging them in tabs and sections.
The parameter 'toolbar' can be used to specify the icons of the toolbar. For example,
{'language': 'en', 'toolbar':'<toolbar ref="quizzes"/>'}
tells the editor to use the simple toolbar used by the WirisQuizzes tools. The definition of the toolbar is the XML fragment:
<toolbar ref="quizzes"/>
The first step to make a new toolbar is to know the full list of items. Notice the Id column in that chart. It is the name in this column you will use in the XML. For example, the string before="squareRoot" in the toolbar specification will cause MathType to add the new button before the Square Root icon on the toolbar.
Caution
Syntax is not only important, it is critical to the proper execution of the toolbar parameters. The attributes must not only be spelled correctly, but also capitalized correctly. In the toolbar string used here as an example, squareRoot is required; squareroot, SquareRoot, and any other variation will not work.
Custom icons should be the same size as others in the section where you place them. In the Arrows tab for example, the icons in the first 3 sections are 20x20 pixels. In the other 2 sections, they're 31x31 pixels. It is not required they all be the same size within a section, but by using a consistent size, icons will be uniformly-spaced on the toolbar, and will look nice.
Centering of the icon is based on the green box representing the main content. For example, this is the proper axis to place in the vertical center of the 31x31px icon:
This is three 31x31 icons placed side-by-side (enlarged for detail). The dotted red line represents the horizontal axis upon which to center the contents of the icon, and is here for visualization only. The gray and white grid merely represents transparency.Image format for the custom icons can be GIF or PNG, and may be transparent or have a colored background. We recommend transparent.
Positioning of the button icons. Note in the examples on this page we've used the attributes before and after to denote positioning of a new icon in relation to the position of an existing one.
Naming the toolbar buttons. As mentioned in Syntax above, spelling and capitalization are important, but how do you know what to name the new buttons (or tabs)? You'll find the correct names on ourToolbar definitionpage, in the Id column.
There are two ways to make a new toolbar:
Start with an empty toolbar. Use this if you really need a small toolbar, and don't care about the new symbols we will add in the future. If this isn't the case, then…
Modify an existing system toolbar.
Find in the editor parameters page the existing toolbars you can modify. We have several examples shown on our demo page.
Caution
If you make a toolbar with only one tab, then the tab is redundant and not very useful, and will disappear like in the quizzes toolbar.
Defining a toolbar – elements
Toolbar element
Either
Start with an empty toolbar
<toolbar>
Or modify the general toolbar
<toolbar ref="general" >
Attributes:
removeLinks="true" Remove external links (like Help)
Organizing the toolbar tabs
Remove a tab
<removeTab ref="greek" />
Move a tab
<removeTab ref="symbols" /><tab ref="symbols" before="matrices" />
Modify a tab
<tab ref="arrows" >
Clean a tab, keep only the tab icon
<tab ref="arrows" empty="true" >
New empty tab, without icon
<tab name="physics" >
Attributes:
rows="2"
layout="horizontal"
extraRows="3"
extraLayout="vertical"
Sections
Remove a section: remove all its components
Move a section: remove and remake it
Modify a section: remove it and remake it, or simply change its components
New empty section
<section >
New empty section, at given position
<section position="0" >
Attributes:
rows="2"
layout="horizontal"
extraRows="3"
extraLayout="vertical"
Items
Remove an item
<removeItem ref="fraction" />
Move an item
<removeItem ref="fraction" /><item ref="fraction" before="squareRoot" />
Add an item
<item ref="fraction" />
Add an item, at given position
<item ref="fraction" before="squareRoot" />
Add an item, in the section's extra part
<item ref="fraction" extra="true" />
Add an item, at given position, in the section's extra part
<item ref="fraction" before="squareRoot" extra="true" />
Empty space, just to modify layout
<empty/>
New custom button
<createButton icon="http://path/to/icon.png" title="the_tooltip" offset="1">
<content>
...
</content>
</createButton>
On button press, the content inside <content> will be embeded into MathML, so it must be a chunk of valid MathML.
The title attribute is for the tooltip of the button. It's optional and can be omitted, but we recommend including it.
A button can be positioned like an item, using before and extra.
An empty box can be generated in content by the chunk
<maction actiontype="argument"><mrow/></maction>
The offset attribute is for placing the cursor at a given position after the insertion. This attribute is only active for custom buttons, since default buttons already have their offset value set, and it cannot be changed. Even for custom buttons though, this is an optional attribute; if not present, a value of 1 will be assumed.
A value of 0 places the cursor at the end of the inserted template, outside the template, ready to continue typing.
A value of 1 places the cursor at the first valid position inside the template.
A value of 2 puts the cursor in the second valid position, and so on.
The best way to know the cursor offset for a given offset value is to place the template into the editor and traverse it from left to right using only the right arrow key, while counting. For example, consider the case of this special button, Square root of a fraction. If we click to the left of the square root and begin pressing the right arrow key sequentially:
offset="1" | offset="2" | offset="3" | offset="4" | offset="0" | |
|---|---|---|---|---|---|
Cursor position |  |  |  |  |  |
Note: The toolbar XML definition (without line breaks) needs to be the value of the MathType 7 toolbar parameter.
Dummy example:
<toolbar ref='general' removeLinks='true'>
<removeTab ref='arrows'/>
<removeTab ref='symbols'/>
<tab ref='symbols' before='matrices'/>
<tab ref='matrices' rows='1' extraRows='2'>
<removeItem ref='squareColumn'/>
<section position='0' rows='4' layout='horizontal' extraRows='2' extraLayout='vertical'>
<item ref='fraction'/>
<item ref='squareRoot' before='fraction'/>
<item ref='squareRoot' after='fraction' extra='true'/>
</section>
<section position='5'>
<createButton icon='https://www.wiris.com/wp-content/uploads/2024/01/squareroot_fraction.gif' title='Square root of a fraction' offset='2'>
<content>
<msqrt><mfrac><mrow/><mrow/></mfrac></msqrt>
</content>
</createButton>
</section>
</tab>
<tab ref='general' empty='true' rows='3'>
<item ref='fraction'/>
<item ref='squareRoot'/>
</tab>
<tab name='mytab' layout='horizontal'>
<empty/>
<item ref='copy'/>
<item ref='paste'/>
</tab>
</toolbar>
Here's the code with linebreaks removed, so it can go into the MathType toolbar parameter:
<toolbar ref='general' removeLinks='true'><removeTab ref='arrows'/><removeTab ref='symbols'/><tab ref='symbols' before='matrices'/><tab ref='matrices' rows='1' extraRows='2'><removeItem ref='squareColumn'/><section position='0' rows='4' layout='horizontal' extraRows='2' extraLayout='vertical'><item ref='fraction'/><item ref='squareRoot' before='fraction'/><item ref='squareRoot' after='fraction' extra='true'/></section><section position='5'><createButton icon='https://www.wiris.com/wp-content/uploads/2024/01/squareroot_fraction.gif' title='Square root of a fraction' offset='2'><content><msqrt><mfrac><mrow/><mrow/></mfrac></msqrt></content></createButton></section></tab><tab ref='general' empty='true' rows='3'><item ref='fraction'/><item ref='squareRoot'/></tab><tab name='mytab' layout='horizontal'><empty/><item ref='copy'/><item ref='paste'/></tab></toolbar>
This example
removes the Arrows tab
moves the Symbols tab to appear to the left of the Matrices tab
removes all the buttons from the General tab except Fraction and Square root
makes several changes to the Matrices tab
adds new tab named mytab at the far right of the toolbar, with copy & paste buttons
disables handwriting recognition
Here's how the Matrices tab looks with these changes in place:
Another example:
It's common in Germany to use different symbols to represent a line (Strecke) and line segment (Strahl) than the symbols MathType provides. You can add these to a custom toolbar in MathType by adding the MathML for them. Here's the code for that:
<toolbar ref='general' removeLinks='true'>
<tab ref='arrows'>
<createButton icon='https://www.wiris.com/wp-content/uploads/2024/01/strahl.png' title='Strahl' offset='3' after='barAccent'>
<content>
<mover><mrow/><mo></mo><mrow/></mover>
</content>
</createButton>
<createButton icon='https://www.wiris.com/wp-content/uploads/2024/01/strecke.png' title='Strecke' offset='3' after='Strahl'>
<content>
<mover><mrow/><mo></mo></mover>
</content>
</createButton>
</tab>
</toolbar>
Here's the code with linebreaks removed, so it can go into the MathType toolbar parameter:
<toolbar ref='general' removeLinks='true'><tab ref='arrows'><createButton icon='https://www.wiris.com/wp-content/uploads/2024/01/strahl.png' title='Strahl' offset='3' after='barAccent'><content><mover><mrow/><mo></mo><mrow/></mover></content></createButton><createButton icon='https://www.wiris.com/wp-content/uploads/2024/01/strecke.png' title='Strecke' offset='3' after='Strahl'><content><mover><mrow/><mo></mo></mover></content></createButton></tab></toolbar>
Here's how the toolbar looks with these 2 symbols/templates added:
Please see the important notes above, relevant to formatting and placing buttons on the toolbar.
Changing the styles
...by XML string attributes
It is possible to define the default styles of the editor. For example, you can change the font size, font family, color and background color.
{'backgroundColor':'#008060', 'color':'#ffffff', 'fontSize':'32px', 'fontFamily':'Times New Roman'}
Standard RGB values are allowed, either 3 or 6 digits, not case-sensitive. For example, this will result in red text on a yellow background:
{'backgroundColor':'#ff0', 'color':'#FFFFFF'}
Standard color names are allowed too (must be lower case). This example is equivalent to the previous one:
{'backgroundColor':'yellow', 'color':'red'}
Note that changing backgroundColor and color results in changing both the MathType editing area and the resulting equation. Also note that not all color names are accepted by MathType It's best to test first, and try a different color (or use an RGB value instead of a name) if the color name you choose doesn't work.
...with CSS
It is possible to modify the MathType toolbar with CSS. Please understand that you do so at your own risk; we cannot guarantee backward compatibility as a result of future MathType improvements. In addition, we recommend using MathType Editor - server components. If you choose to take this route, it is possible to completely create your own toolbar.
Note that we have a new toolbar and UI under development. With this new toolbar, you will be able to change the styling in a safer way and more easily construct a custom toolbar with a template system.
Publishers tab
This tab is meant to collect some of the functions in MathType that are used in a publishing setting, and is described in more detail in the user manual section.
Activating the Publishers tab
This special-use tab is part of the General toolbar, but is not activated by default. To activate it, use the string
'toolbar':'<toolbar ref="general"><tab ref="advanced" before="contextual"/></toolbar>'
Note the before attribute is optional. If you omit it, the tab will appear at the end, after the Contextual tab. You can also place it earlier in the sequence of tabs if you want.