To main heading

Smallsite Design

Online editing help

Element block

The element block that appears for a selected element or its ancestors provides information about the element and gives access to operations centred upon it.

The areas of an element block are:
Sample element blockabcdefghijkl
aElement typeType of element. If automatically disabled, it will be red with a red strike through it, like Cell, whereas when manually, only the line is red. Preceded by its position in its parent, and followed by its element's child status
bAttributesCurrent values of element attributes along with ability to select new values after clicking the 👇 checkbox
cActionsActions available for the element, depending upon the type of element
dMulti-deleteDelete multiple checked child elements. Only shown if JavaScript is enabled (browser default)
eAppendJumps to the possible child elements to append
fNavigation barChild navigation bar for links to every fifth child or those that are disabled, with an indication of whether there is an error in them
gChild elementsList of child elements along with their Action bars
hAction barDocked Action bar
iInsertJumps to the possible sibling elements to insert after the current one
jAction barFloating Action bar
kBordersBorder that changes colour and thickness depending upon element Visibility status
lElementElement itself, with dotted red border to indicate that it is current. Tables or their cells will have thicker, solid red borders

In general, an element block:

  1. a.Will be standalone before the element for most block elements.
  2. b.For inline, introduction, footnote, or sequence and table descendants, will be embedded in their parent block.
  3. c.If embedded and current, it will be the only one shown within its parent.
  4. d.For a rich-text element, will only list its inline or footnote children.

Embedding can sometimes be a couple deep, so ensure you are working on the element you intend. For example, after working on a Text element inside a Paragraph, you might suddenly decide that the paragraph might be better split into two, so want to Clone it, but instead end up cloning the Text, after forgetting to select the Paragraph first.

Action bar

The end of the top line of the element block contains some action and status symbols, though some items might be shown on a floating bar for some child elements of the current element.

The possible symbols on an action bar and their actions are:
#SymbolAction taken
1Jump to sole inline. Only for a rich text element with only one inline child
2🡅Jump to the parent element to make it current
3Insert another new element of the same type after current one. Only shown if allowed and more elements can be added
4🗗Clone the content of the previous locale in the hierarchy. Only shown for rich text elements with no children in the current viewing locale
5Manually toggle element visibility. Only for block elements, though not all. Only active for the master locale. Will be disabled and red if the element is automatically disabled
6🛈Link to online help documentation describing the element
The possible status symbols on an action bar, what they indicate, and which force the element to be disabled, are:
1Itself or descendants are automatically disabledYes
2$Itself or descendants have an incorrect number of charactersYes
3?Itself or descendants are missing master locale textYes
4&Itself or descendants are missing a required file, or point to a disabled fileYes
5#Itself or descendants have incorrect numbers of child blocksYes
6@Element-specific errors, such as missing URL for a buttonYes
7!Some descendants are manually disabledNo
8ʘItself or descendants have review textNo
The errors particular to specific elements (@) are:
1linkMissing the target page
2row, footerNo non-empty, non-heading cells
3buttonMissing URL or Values
4questionNo correct option
5entry, section / subsectionPrevious element at the same level has the same id

Note that:

  1. a.Symbols for the current element will be larger.
  2. b.Symbols will only be red for errors in the current element.
  3. c.The ʘ is only larger for the current element and locale.
  4. d.While the ! doesn't indicate an error in itself, it may force their parent to be disabled if it has insufficient children, showing up as a #.
  5. e.Only block elements can be disabled, either manually in the master locale, or automatically for any error in any locale.
  6. f.Review comments will be automatically deleted during release processing.

Note that a single error can lead to several symbols appearing due to the upward cascading of errors, which enables visibility at the topmost element. See Visibility status for which errors force elements to be disabled, and Troubleshoot errors for how to correct them.

Editing text

All text editing is for the body of an article in done in a element block.

Areas of relevance to editing text in the element block are:
Sample text editing for a paragraphabcde
aTextText being edited
bElementsLink to the Available elements list
cExtenderCorner to drag down to increase the height of the editing area
dStartStart indicator of the text being edited
eEndEnd indicator of the text being edited

The Currently number is updated after the text is submitted. For text that is not the plain Latin text known as ASCII, the number of characters displayed after saving may be less than that entered. This is because many character symbols will be entered as a combination of Unicode codes but are normalised to their single Unicode code form at the site. This is why text fields will allow more characters to be entered than the limits shown, but the limits are applied by the site after normalisation.

Paragraphs for entry purposes are separated by the Enter | return key. If JavaScript is enabled in the browser (default) and the field only allows one paragraph, Enter | return keys will be ignored, otherwise text after the first will be removed after submission.

While entering text, if JavaScript is enabled (browser default), the editing box will expand to show all the text up to a maximum of 30% of the screen height or 300 pixels, whichever is smaller. Use the extender in the bottom end corner if wanting to make the area extend further down, though some browsers may not have one.

Within a text editing field, many standard text editing commands and actions of the device's operating system still apply, such as:

  1. a.Cut, copy and paste by keyboard.
  2. b.Drag-and-drop selected text to or from the field.
  3. c.Undo and redo by keyboard.

Many of the character sequences used for inserting elements or special characters inline use ASCII letters and symbols that may not be readily available on some non-English keyboards. To type these in, use a US English onscreen keyboard.


Sanitisation is the filtering out of characters in inputs that could be used maliciously.

Typically, the types of input that are filtered out are:

  1. a.Programming tags, like <script>alert('Hello');</script>.
  2. b.Starting and ending -s, _s and spaces.
  3. c.Final full stops (.), though they are added back in some situations if no other final punctuation exists.
  4. d.Backslashes (\).
  5. e.Control characters.

Some convenient text substitutions performed during sanitisation are:

  1. a.Any --- sequence becomes an em-dash (—).
  2. b.Any -- sequence becomes an en-dash (–).
  3. c.Any standalone ... sequence becomes an ellipsis (…).

Text entered in inline elements within program, code and sample elements do not have visible characters substituted or filtered out as they may be valid in programs. Outside of elements, such filtering and substitutions are universally applied to all text input. Text entered for URL fields will not have any dash substitutions.

Inline insert

Elements can be inserted inline using special formatting characters.

The elements that can be inserted into the current field are shown under Available elements at the bottom of the page:
Sample list of elements that can be inserted inline

The format is ~element~text~^, where element is the element code (first listed) or its character (second), and text is the content. For example, ~r~strong~^ creates strong, where r is the character that is the short form for the strong code. This format is shown above the list, along with some special character combinations that insert non-text items like a break (@^), site value (#^) or icon (%^). The Available elements heading links back to the Elements link above the text box in the element block.

Multiple elements can be inserted in this way at the same time. If all the text in a field is included, the required element completely replaces the current one rather than being inserted in between its children. Other than the text element which has a maximum character limit of 600, all other inline elements have substantially less. That means that inserting multiple elements may exceed the current element's maximum, in which case do each insert with a single - character, such as ~c~-~^ for a citation, and edit them after they are created. Otherwise, insert the required element as is required for blocks.

All elements inserted are individually sanitised. Each block of text of the enclosing element that was before, between or after them are re-sanitised. That means that any ending full stops, or illegal starting or ending characters, for each will now be removed. If wanting any of them reincluded, inline insert the required element type with just the wanted character. For example, to add a full stop at the end of a newly created emphasis element, open it, add ~e~.~^ to the end of its text, and re-submit the text.

When creating a link, using a - for its text will result in the new element having no text. This is so that for an internal link, the text comes from the target headline|heading, or uses the URL itself for an external link.

When inserting inline into right-to-left text, as each character of the prefix (like ~a~) or suffix (~^) is being typed in, the automatic alignment rules of the browser might mix up the text in strange ways. Ignore those dynamic rearrangements and continue to type in the text in one go. When submitted, the element will be created correctly. Sometimes it may be better to cut out the text to be in the new element, create the new element with just a -, then paste the cut text over the - in the new element.

Inline rich text (IRT) elements do not have text of their own, but contain inline elements that do. Any elements created in the IRT using this method will also be children of it. Siblings of the IRT can be created by inserting inline into the text of an adjacent inline sibling, the standard insertion method after the current IRT, or appending to the IRT's parent.

Note that if wanting a ~ in the text, it cannot be put in as part of the format, but use another character to create the element, then edit its text. Also, when using the Merge action to concatenate two of the same inline element, the merged text is left as is and not used to create another element as it would if it was all entered as text in an element. The examples in the paragraph above were created using these two techniques.

The difference between this system and other markup ones is that once an element has been created, it is never converted back to markup for editing. In general, markup systems are based upon always editing the source text which, like programming or any other system relying upon precise text placement and formatting, carries the risk of breaking every time it is edited, because any text that is missing or out of place will cause that.

Embedded characters

While there are Unicode characters for soft-hyphens and direction, they are not visible in text being edited, so there are some character sequences that will be replaced by them when rendered.

The character sequences that can be replaced by normally invisible Unicode characters are:
soft hyphen
hs^Hyphen (-) that appears at the end of a line when a word is split at the character to continue on the next line
soft hyphen
ha^Hyphen (֊) that appears at the end of a line when a word is split at the character to continue on the next line
soft hyphen
hm^Hyphen () that appears at the start of the next line when a word is split at the character
lr^Hidden hard direction character that forces following text to render left to right
rl^Hidden hard direction character that forces following text to render right to left

The locations where these characters can be entered are:

  1. a.Most inline elements.
  2. b.Table headings and labels.
  3. c.Basic aside introduction and quotation.
  4. d.Figure quotation.
  5. e.Notes for a Phase selection.
  6. f.Reviews text.
  7. g.Contact fields on the Subsite page, except Email.
The legend that appears at the bottom of any management page that allows these codes is:
Embedded characters legend

If an element block field allows these codes, an Embedded link to the legend is displayed above the field, and the legend title is a link back to this link. Note that for fields on other pages that allow embedded characters, the legend is also linked to from the field, but there is no backlink.

In phase notes, review text and heading and footer labels of tables, a @^ can be inserted to be replaced by a break. This allows for special formatting or minimising the width of table columns where space is at a premium. If another column is set to Wide, a label might be forced to wrap at every word. Using a Fixed column with a break at the wanted words will control the wrapping.

With inline insert, merging inline elements with partial element insertion patterns will not create the element at that time, but merging inline elements with parts of these character sequences will result in the sequence being substituted just prior to rendering the resultant element. If wanting to explicitly show such a character sequence, keep it split across two inline elements.

Reading direction

When mixing language scripts with different reading direction, special characters are sometimes required to change direction.

Letters of a script tend to have a hard direction, which means when they are in a group together, they will show in the correct reading direction for their script. Punctuation and other symbols are neutral, in that they will follow the direction of the characters around them. However, when the direction of the text on either side of them is different, they will default to the direction of the element they are in, which is usually that of the script the page is in, but that may not be what is intended.

For example, Too late! translates into Arabic as بعد فوات الأوان!, which is incorrectly displayed in this left-to-right page, whereas the ! would correctly show to the left of the words on a right-to-left page. This is corrected for this left-to-right context by putting the ! into a bdo element with Direction set to Right to left, effectively making it a strong right-to-left character, allowing the phrase to read as بعد فوات الأوان!.

Note that because the ! was technically the last punctuation character of the paragraph above, normally no . would be added at the end by Smallsite Design, but it would look odd given the use of right-to-left text at the end. The . was added by appending it to the paragraph in its own text element. Just another consideration when mixing scripts.

When left to their own devices, mixed scripts can sometimes lead to a mess. For example, Phone: +1 234 567 890 translates into an Arabic right-to-left environment as هاتف: +1 234 567 890, where the reading direction of each number group is correct, but where they appear in the sequence is not consistent. However, the phone number should be all left-to-right, but it is shown as right-to-left for the sequence of groups though each group is left-to-right. In a rich text element, one correction for this is to put the whole telephone number in a bdo element with its direction set to ltr, producing هاتف: +1 234 567 890.

For plain-text and rich-text fields, this situation can be corrected by putting a left-to-right direction character (by typing lr^) before the phone number's + on the start-side (right for Arabic) of it. This will render the full phone number correctly, but any Arabic text after it will render right-to-left because of the hard direction of its first character. This works because the + is now bounded by hard characters of the same direction, and so it acts the same.

It is best to avoid creating situations where scripts are mixed together, but some experimentation with the bdo element or direction characters should make rendering better, though anomalies can still occur if a line breaks in the middle of the sequence.


Some elements have attribute values that can be selected from a set of options.

Attributes area for a table element, expanded for editing:
Attributes area of table element, expanded for editing

While most attributes only require a single click on an option, some, like for the Heading attribute for the table above, may delete some content, so require a confirmation after clicking on the required option's radio button.

Some complex elements with structures defined by attributes, like tables or lists, can have that attribute value combination saved as a default. With such elements, if there is an As default button in the attributes area, clicking it will save the current combination for using when adding a new element of that type. If an element is using the default, Default will be shown instead of the button. The setting is per user and applies for any article after being set.


Several actions can be performed on an element.

Depending upon the element, the possible actions available when Actions is clicked on are, in order of appearance:
1To ☐Checking the box exposes a jump list table of all the possible parent elements that the current element can be moved to be the last child of. See To for details
2DeleteDelete the element. Only shown if deletable
3CloneAdd a clone of the current element after it. Only shown for those that have a in their edit bar and more elements are allowed in their group
4Link back to element name. Placed after each line for quick keyboard-based navigation
5CorrectMark a question option as correct
6MergeMerge the contents of the next sibling with this element. Only shown for an inline element, and where the sibling element is the same type and has the same attribute values
710▲Move up 10, continuing from bottom if the top is reached. Only shown if movable and more than 10 siblings
83▲Move up 3, continuing from bottom if the top is reached. Only shown if movable and more than 3 siblings
91▲Move up 1, or to the bottom if already at the top. Only shown if movable and more than 1 sibling
101▼Move down 1, or to the top if already at the bottom. Only shown if movable and more than 1 sibling
113▼Move down 3, continuing from top if the bottom is reached. Only shown if movable and more than 3 siblings
1210▼Move down 10, continuing from the top if the bottom is reached. Only shown if movable and more than 10 siblings
131|0Spike number | number of items. Add copy of element to the spike with the first number. Only shown if allowed to be spiked and there is spare space on the spike
14UnwrapPlace copies of all spikable child elements on spike 3. Only shown if spike 3 is completely free

Clone inserts a full copy of an element after itself. This is useful for clone-and-edit operations to split an element's content. Instead of recreating what is wanted in a new element, especially tedious if it is complex, the original element is cloned, and then each version is edited to eliminate what is redundant for each, while adding extra content as required. Care must be taken to ensure that cloned content is fully edited to eliminate duplicate content and comply with the new context for each.

Unwrap places a copy of all spikeable children of the current element on spike 3, even if it exceeds the normal limit of nine. This is useful for transferring complex content between elements in the same version, but also from older versions or a source article. All that is on the spike doesn't need to be used, so if the transfer involves lots of elements, deleting those not required from spike 3 first may make it easier to keep track of placing which elements go to the new location.

If some action is not available, it will be because it is not allowed in the current context. For example, Delete is not available for the only paragraph in a block quote because using it would break the minimum child number for the block quote. The To jump list is also not available for the same reason.

Some actions, like Clone don't apply to all elements, either because two cannot be in the same parent, such as introductions, or having two in a row is not usually done, such as with highlights, though they can be put on a spike to achieve the same outcome. It is a design choice to not have buttons for actions that are not likely to be done to reduce unnecessary clutter, which especially makes a difference for those who need to navigate by keyboard.

It is for keyboard users that the up links (△) are provided every few buttons in the Actions, Append and Insert cells, because they bypass having to back tab through all the options to get to the cell label, even though they require extra forward tabbing.

Append / insert

Selecting an element exposes lists of the elements that can be appended to it and those that can be inserted after it.

Clicking the Append link exposes the list of elements that can be added to the current element, but what can be added is organised into groups of mutually exclusive elements. Appended elements are placed at the end of elements in their group to ensure that all elements are in the correct presentation order.

For example, sections must be the last elements of a general article element, otherwise it would be visually difficult to know if the last paragraph in an article belongs to the last section or the article element, especially given that sections have very significant styling to visually separate them from the body text of an article. Typically, returning to the main thread of an article after the formal indulgence that sections allow requires an equally formal addition of another section, with a heading like Conclusions, Recommendations or Impications to ensure that the return to the wider scope of the article is not missed.

Clicking the Insert link exposes the list of elements that can be inserted after the current one, but the available elements are only from the same group. Therefore, to insert another section before the first, because the element from another group before it cannot be used, the new section must be inserted after the first section and then moved up. Alternately, it could be appended to the end of the group and moved down, which automatically makes it go to the top of the group.

The button in an element's action bar provides a one-click method of inserting a new element of the same type without selecting the element first. Like Append and Insert, doing so makes the new element current. If wanting a full copy of the current element instead, use the Clone button in the Actions cell. It is not available if no more elements can be added.

If the upper limit for the number of elements in a group for an element has already been reached, no elements for that group will be listed under the Append list, and there will be no Insert list at all. If the upper limit of all groups for the element has been reached, then no Append list will be shown either.

Some group limits are very strict for practical reasons, like the group for an introduction only allows one, and almost always has a minimum of one as well. Other groups have a very generous upper limit which no one is likely to want to approach. Most have limits that are aimed at avoiding unwieldy structures that readers are likely to avoid, but that approaching those limits might be justified at times. Lower limits are usually to avoid inappropriate structures that are overkill, such as a list with only one child.

Child navigation bar

If there are more than five children for an element, a navigation bar is displayed for them.

The child navigation bar contains links to every fifth child or those that are disabled:
Sample element block with navigation bar, showing two disabled children, one with errors

Positions for disabled children without errors are displayed like 3. If the child has errors, its position will be displayed with a double red underline instead. The basic navigation bar allows getting to or near a required child, but including links to the disabled children makes it easier to troubleshoot errors.

If there are 15 or more children and no errors, the checkbox will be unchecked. This is to reduce the number of keys to be pressed for those using a keyboard when navigating through the current element.

Visibility status

There are several indicators of the current status of an element and its descendants.

The conditions that will automatically force an element to be disabled are:

  1. a.If it is to have plain text (such as inline, section or table heading), the number of characters is out of range.
  2. b.If it is to have plain text, missing required master locale text.
  3. c.If it is to have plain text, and has no optional master locale text, but has text in another locale.
  4. d.If a block element, the number of enabled children is out of range.
  5. e.Has a descendant like any above.

The only exception to item c. is Navigation text for sections and subsections. A red ? is displayed for that field if the headline exceeds 16 characters for the current locale, hinting that it may be beneficial to provide the more concise text for navigation bars for that locale. It is independent for each locale, so master locale navigation text is not required, even if other locales have it. Navigation text is completely optional anyway, as it is only providing an opportunity to reduce navigation bar clutter to make it easier for visitors to make quick choices.

Article elements themselves cannot be disabled in any way, but the article cannot be set to Done for the locale being edited if it has any automatically disabled blocks, so cannot be released. However, if it has only manually disabled blocks, it can. An article can be completely disabled by clicking the Hidden option in the Show row of the Details section of the Article head page, and for a non-master locale by deselecting it in the Locales row.

Element's child status

After the element's type name, there is one or two numbers that indicate the status of the element's children.

The first and larger number indicates the number of enabled children. If there are no disabled children, there is no second smaller number. Double red underlines under the first number indicates that at least one of its group children numbers is out of range, such as a list with only one enabled child item. Double red underlines under the second number indicates that there are errors due to being automatically disabled, rather than just being manually disabled.

These numbers will help to isolate where problems might be occurring when trying to troubleshoot errors. In particular, the disabled children indicated by the second number each have a link to them in the Child navigation bar.


The images here show the changing colours and border thicknesses as a paragraph element is created and completed.

Note that only the automatically disabled elements have thicker red borders and light orange backgrounds, while all disable modes make the element type name red with strike-through like Paragraph. Hover buttons will show exactly the same colour and border schemes as the action bars in these images for the same automatically or manually disabled states.

Newly created paragraph, automatically disabled at all levels:
Sample new paragraph with empty text element, disabled at all levels

The Element's child status numbers both have errors due to there not being at least one enabled element as the Text element is missing its text, as indicated by the $, along with a ? because it is for the master text. The borders for disabled elements are 1 pixel thicker than when enabled.

Paragraph with added text now enabled:
Sample paragraph with text

There are no errors nor disabled children now, the latter being why there is now no second number.

Paragraph with new footnote, now automatically disabled:
Sample paragraph with new footnote, automatically disabled at all levels

The paragraph's footnote count now shows an error, and the footnote shows an error under its inline child count.

Paragraph with new footnote, with paragraph made current, showing enabled text with disabled footnote, and a link to the footnote in the Child navigation bar indicating it has an error:
Sample paragraph showing new footnote as a child
Fully completed paragraph, but it and child footnote manually disabled, and a link to the footnote in the Child navigation bar indicating it is manually disabled:
Sample manually disabled paragraph with manually disabled footnote


If JavaScript is enabled, multiple child blocks of a block element can be deleted in one operation.

Clicking the Multiple checkbox of an element forces the Children checkbox at the top of the page to be checked, forcing all the hover buttons of the element's block children to be visible. Usually, the hover button checkboxes, along with those in the already visible floating actions bars for inline children, will be checked after the first click. From then on, clicking the Multiple checkbox toggles the checkboxes of all the hover buttons and inline action bars.

The Delete button next to the Multiple checkbox will be disabled, greyed and struck-through if the checked child checkboxes are not a valid delete combination, usually because there are minimum child numbers to maintain. Either uncheck all children, then check the ones to delete, or check all, and uncheck those to keep. If after deletion, the result is not what was wanted, click the Undo button in the Navigation bar and the Confirm button then exposed to undo the delete.

If wanting to delete a child of the current element, hover over the start of the child element to delete, check its checkbox in its hover button, then click the Delete button in the Multiple box. This will be faster than selecting the element, then clicking the Delete button in its Action cell.

  • Article body
  • Spikes
  • Contact   Glossary   Policies
  • Categories   Feed   Site map

  • External sites open in a new tab or window. Visit them at your own risk.
    This site doesn't store cookies or other files on your device, but external sites might.
    Help   Powered by: Smallsite Design©Patanjali Sokaris