Manual of Unicode Editor in JavaScript

Introductory examples

Groups are generally constructed from the bottom up, and from left to right (or right to left, depending on the text direction). One can use a combination of mouse clicks and keyboard input. An example is:

Type n or click on named, and type sw into the name field
Type or click on -
Type t
Type or click on :
Type n
Type or click on -
Type zA
Press the space bar and type i, or click on insert
Type Z1

Now the desired groups are visible in the preview panel, and with internal structure in the tree panel, and the corresponding Unicode sequence is in the text panel near the bottom of the page, above the Parse button. Below the Parse button, the actual characters are displayed.

Suppose we wanted to move the ideogram marker (Z1) to the bottom right corner. Then we do:

Press the space bar and the arrow up
Type s and then b, or select sb with the mouse

For a sign with several insertions, starting from an empty fragment, do:

Type n or click on named, and type zA
Press the space bar and type i, or click on insert
Type N21
Press the space bar and the arrow up
Type i, or click on insert
Type t
Press the space bar and the arrow up
Type s and then b, or select sb with the mouse

If one has an existing Unicode sequence, then this can be entered in the text panel. To try this out, press Clear, enter 𓇓𓏏𓐰𓈖 in the text panel above the Parse button, and press Parse, and observe that the preview and tree panels are populated with the corresponding graphical representations.

Structure of the page

The page is divided into:

the header,
the text direction panel,
the preview panel,
the tree panel,
the control panel,
the text panel, and
the character panel.

Header

There are two drop-down lists for changing the fontsizes in the preview and tree panels. There are also buttons to undo or redo edit operations, and to open this help page.

Text direction panel

The panel for changing the text direction is located in the top-left or top-right corner of the page, immediately next to the preview panel. One may select the desired text direction by pressing one of the four relevant buttons.

Preview panel

The preview panel presents a fragment in graphical form, as it would appear to the reader of a printed document or web page.

Tree panel

The tree panel presents the fragment in an hierarchical form. Nodes connected by edges represent expressions and their subexpressions.

In each fragment there is at most one group that is the current focus. The focus is the target of edit operations. In the tree panel, the focus is indicated by a thick blue boundary around a node, as opposed to a thin gray boundary. In the preview panel, the top-most group containing the current focus is indicated by a blue square. The current focus can also be an operator between two groups. If no group or operator holds the focus, there is a blue line at the beginning of the preview panel.

In the tree panel, the focus can be changed by clicking on a node. In the preview panel, the root node of a top-level group can be made the focus by clicking on that group; one may also click on the white space between two groups to transfer focus onto an operator. Other ways to navigate rely on keyboard shortcuts, as will be explained later.

Control panel

The control panel contains buttons for changing the structure of the fragment and for changing the corners of insertions. Only those buttons are shown that are relevant to the current focus.

Text panel

The text panel contains the Unicode fragment. This fragment is updated every time an edit is made, for example through the buttons in the control panel. Alternatively, one can edit the text panel and press Parse, which updates the preview and tree panels. By pressing Clear, one obtains an empty fragment.

Editing

Changing the structure

Depending on the current focus, the following buttons may be available to change the structure of a fragment:

named creates a new group consisting of a named glyph.
'-' creates a new group following the current group or operator, initially containing a named glyph.
'*' generally appends a new subgroup of a horizontal group, initially consisting of a named glyph. If the current focus is an operator ':' or '-' however, then the two groups on either side are combined into a horizontal group.
':' behaves similarly, but for vertical groups.
'+' and ';' can be used to insert a new subgroup before the current focus, in a horizontal group and vertical group, respectively.
stack and insert generally create a new element in the structure, of which the current focus becomes the first argument; the second argument initially consists of a named glyph. If the current focus is an operator however, then the two groups on either side become the two arguments of a stack or insert, respectively.
swap swaps the name of the current named glyph and that of the next one.
delete generally removes the node with the current focus. This may lead to further changes to preserve the integrity of the syntax. For example, if B1 is removed from A1*B1, then the operator '*' also needs to be removed, and only A1 remains. If '*' is removed from A1*B1, then two isolated named glyphs remain, or in other words, we obtain the fragment A1-B1.

Keyboard shortcuts

Use of the mouse can to a great extent be avoided by keyboard shortcuts. The four arrow keys can be used to move the focus in the tree panel. The Home and End keys transfer the focus to the first and last top-level group, respectively.

Buttons that change the structure of groups can be activated by entering characters such as '*', ':', '-', the Delete key for delete, 'n' for named, etc. (See the letters on the buttons that are underlined.)

The above keyboard shortcuts will work if the browser's focus is on the preview or tree panels, which is indicated by a blue dotted border around the preview or tree panels. In addition, the keyboard shortcuts for '*', '+', ':', ';', '-', can be used directly after typing the name of a named glyph.

If the browser's focus is in a text field, it can be transferred to the tree panel by pressing the space bar. Conversely, if the browser's focus is in the preview or tree panel, and the editor's focus is on a named glyph, then the browser's focus can be transferred to the name field by pressing the space bar once more.

Sign chooser

The following is relevant when the editor's focus is on a named glyph.

The menu of signs is activated by clicking menu, or by entering 'u' when the browser's focus is on the preview or tree panels, or by entering 'u' into an otherwise empty name field.

By clicking the tabs at the top of the window, one may view categories of signs according to Gardiner's sign list. Three extra tabs show collections of signs according to shape. Alternatively, one may navigate through the tabs using the four arrow keys. A sign is selected by clicking on it.

One may also type the name of a sign, by keyboard presses of letters and digits (there is no need for the Shift key). The name will appear in the upper left corner. After entering the first letter (or the first two letters for 'NL', 'NU', 'Aa'), signs in the relevant category will appear. One may then type the remaining digits, and possibly more letters, and press Enter to select the sign. Typed characters can be erased by pressing Backspace; this is not needed for switching between categories however: by pressing 'a', then then 'b', one switches from category 'A' directly to category 'B'. By pressing Esc, or by clicking on the upper right corner of the menu, one exits the sign chooser without having selected a sign.

Information on signs can be obtained by clicking info on and moving the mouse over a sign. Alternatively, this functionality can be switched on/off by pressing the space bar. The information is presented in the right or left half of the screen if the mouse moves over a sign in the left or right half, respectively.