Element block

Some elements have additional information after the child status.

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.

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.

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.

Review comments are automatically stripped when making the release, as they are supposed to have all been actioned, are not required in a release, and if left would be included in every WIP leading to the next release. However, if wanting to keep the review comments, perhaps because they make some suggestions that cannot be implemented in the current release cycle, submit some text without changes to create a duplicate WIP. On the History page, make the second latest WIP a draft as the one to hold the reviews, then make the latest WIP a draft as part of doing the release.

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

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 use when adding a new element of that type. If an element is using the default, Default will be shown instead of the button. Once an element is created, defaults cannot be re-applied in one go, but only by setting individual attributes. The setting is per user and applies for any article after being set.

Some elements have a Direction attribute to ensure their rendering direction.

The Master option is useful when cloning Rich-text content in a multi-locale site because if all locales will follow the direction of the master, the Inline elements in non-master locales with reading direction opposite to that of the master will not have to have their Direction attribute changed. This option is useful for the block elements that must have the same rendering positions for its child elements in all locales, such as a diagram element using a map as a background image.

While the text in most of these elements will render in the direction chosen, but conditioned by the browser according to the directional characteristics of the text used, the direction element forces its text's direction on a strict character-by-character basis. The lines for the program element will often be in English (left-to-right), but some programing languages may allow Unicode names for elements, which may require using the direction element to keep them tamed.

The media icon and marker elements also have a Direction attribute, but it is used to define which way their symbols point. The setting of the diagram element's Direction attribute will affect which way round its arrow elements' horizontal symbols face.

Several actions can be performed on an element.

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 does not 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 do not 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.

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 Implications 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 item.

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

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.

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

Text entered in inline elements within program line and code 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.

Elements can be inserted inline using special formatting characters.

The format is ~element~text~^, where element is the element code (first listed) or its character (second), and text is the content. For example, ~g~strong~^ creates strong, where g 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. Note that the text version of the URL will potentially break at every 20 characters to ensure that it does not overflow its containing element.

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. Be aware that submitting an element with such merged text will create the inline element.

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.

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, while the legend is also linked to from the field, there is no backlink because there are multiple fields, but a link can only have one target.

While most interface languages will use the standard soft hyphen (-), if Armenian (hy) or Mongolian (mn-mong) are selected, their own special soft hyphens will be used. However, these can be overridden on the Locale page to use the standard.

In phase notes, review text and heading and footer labels of tables, @^ 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. Setting the Fix attribute for the 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 embedded 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.

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 all the text into a direction element with Direction set to Right to left, allowing the phrase to read correctly 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 direction element with its direction set to ltr, producing هاتف: +1 234 567 890.

Because the direction element forces direction on a character-by-character basic, it can be used to ensure particular sequences appear in the order wanted, despite what the browser might normally do.

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 hidden left-to-right character is hard, and forces all following neutral characters, like the + and the digits, to be the same, up until the hard right-to-left Arabic character.

It is best to avoid creating situations where scripts are mixed together, but some experimentation with the direction 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 allow setting a locale so their contents are rendered according to that single locale, regardless of which locale it is viewed in.

The block quote, citation, quote and subquote elements can have a locale set for them so that they render their contents according to that locale. This facility is meant for when the enclosed text will only be for the selected locale regardless of which locale its viewed in, typically for a quote or book title. Do not set a locale if providing translations for each locale anyway, as that is not the scenario for this facility.

When entering text, just use the master locale. The rendering direction and browser spelling and grammar checking in the input area will be according to the selected locale. There is no need to do translations for any other locale. If getting text from elsewhere, cut-and-paste the plain text into the master locale, rather than inserting an existing element, which would have to be edited to delete text for the unwanted locales.

The colour and thickness of borders indicate the visibility status and whether the current element.

The red colour is so that elements that will prevent the article from being released are clearly identifiable. A manually disabled element does not have errors, but its element type name will have a line through it, and its checkbox in its status area will be unchecked, to indicate that while it will not prevent the article being released, it will not be displayed.

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.

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.

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

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