Skip to main content

Smallsite Design

Online editing help

2. Element: Inline

Inline elements contain the text for rich text elements, and provide formatting or other functionality.

Styling of inline elements may not be the same across all scripts due to cultural preferences or the nature of the scripts themselves. Conversely, some elements will be similarly styled, with the context providing an indication of how they are to be interpreted. However, the HTML generated will clearly indicate the semantic purpose of the elements, which will help with search engine analysis of the content.

Formatting

Formatting inline elements provide simple visual styling of text.

The basic formatting inline elements are:
#ElementExampleDescription
aTexttextPlain unformatted text. The only element that can start or end with a space, or just be all spaces
bEmphasisemText needing to stand out slightly from the rest to indicate that it is something to be noted
cStrongstrongText to be properly noticed as being important. A stronger version of emphasis
dSubscriptsubText that qualifies its preceding text in a subordinate way, as defined by the context. Typically used in base number notations, as in 2578 as the base-8 (octal) representation of 175
eSuperscriptsupText that qualifies its preceding text in a superior way, as defined by the context. Typically used as power notation in numeric statements, as in 23
fDeletedelIndicates text that has been, or is to be, removed
gInsertinsIndicates text that has been, or is to be, inserted
hSelectselIndicates the current selection
iKeykeyKey on a keyboard
jMarkmarkHighlighted text, with a choice of colours
kBdobdoElement that forces a rendering direction on its text
lBreakbreak
here
Force a new line
mSoft hyphenhypo­glycemicOptional hyphen to specify where in a word to wrap around if there is not enough space on the line. Options are Simple, Armenian and Mongolian

Text elements can have anywhere from 1 to 600 characters, which should be enough for plain paragraphs. If really wanting more text in a rich text element, just append one or more Text elements as required. Soft hyphens are especially useful when large words are used in table cells or asides to avoid tables overflowing out of the page or large gaps between words in justified text.

The Bdo element is useful for isolating texts in different scripts, which might be difficult to edit if they are in different directions. Options are auto (default), ltr and rtl, where with auto the direction is set by the first character. The example is set to rtl instead of its natural Latin script direction of ltr.

Code

Code inline elements provide some text colouring for highlighting syntax in code examples.

The code formatting inline elements are:
#ElementExampleDescription
aComment// CommentCode text to be ignored by the compiler or interpreter
bFunctionstr_splitName of a function
cIdentifier$firstCellIdentifier for a constant or variable
dKeywordfunctionKeyword of special meaning to the compiler or interpreter
eTag<html>For HTML or XML tag
fCommentaryCommentaryNon-code commentary on the line of code
gKeyboardkbdText typed by a user
hVariablevarNon-literal placeholder text

These inline elements are only allowed in Code, Program and Sample elements. Links inserted after a Commentary element will use the same font as it.

While the colouring is intended for indicating various computer language coding elements, they can be used for simple diagrams by utilising characters from the Box drawing Unicode range, especially inside the Program block element for 2D. Embedded links allow diagrams to be an index to other content. However, using the Diagram element will be better for more complex diagrams.

Inline rich text

Inline rich text elements behave like inline elements, but contain other inline elements.

The inline rich text elements are:
#ElementExampleDescription
aQuoteqSolitary or outer quotes, as defined by the Quotes pattern defined for the current Locale
bSubquoteqsInner quotes, as defined by the Quotes pattern defined for the current Locale
cSamplesampUseful for sample text or labels
dCodecodeFor code snippets

Code, Sample or the Program block element can included any of the Code elements.

Functional

Functional inline blocks, while styled, provide additional functionality, such as with links.

The functional inline elements are:
#ElementExampleDescription
aLinkGlossaryHypertext link – the fundamental enabler for navigating between pages on the worldwide web
bCitationThe ProphetName of a work, optionally with a URL or Locale. For a detailed citation, mark as a Citation, but use a Footnote for the link and details. While not technically correct, it can be used to refer to a control or label on a form or page
cFilefileFile for download. The file must be Embeddable to download
dIconSmallsite Design's SD iconShow an icon
eMailpollie@govSpecial link to open the default email client. Optional Subject and Body. The Body may have blank lines and any paragraph without ending punctuation will have a full stop added
fTimeFormatted date or time, with a choice of formats, calendars and timezones. Time format is yyyy-mm-dd-hh-mm-ss
gValueABNShows one of the Values of the Settings page, including the password for the gu guest account, if any

Link, File and Mail allow styling to make them look like fancy buttons, with differing font and background colours for their passive and active states, making them good for calls to action.

Inserting inline

While inline elements can be inserted by the normal process for blocks, they can also be inserted directly into the text of another inline element with specially formatted text.

When in any inline text field, type in text in the form ~code~text~^, where code is the letter or name of the desired element and text is the text to be contained by the element. The inline name and codes are listed at the bottom of the page and there is a Tag link to it above the field.

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 the inserts with the minimum characters and edit them after they are created. Otherwise, insert the required element as per blocks.

Inline rich text (IRT) elements do not have text of their own, but contain inline elements that do. Any elements created using this method will also be children of the IRT. Siblings of the IRT can be created by using this method in the text of another sibling of the IRT, or by the standard inserting method when the IRT is selected.


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.

Manage         Help   Powered by: Smallsite Design©Patanjali Sokaris         art-a  3  0  2022-05-11-10-25-03