13 Inline element

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.

See:

a.Inline insert for how to use special character sequences to create another inline element from within the text of another
b.Embedded characters for the special character sequences to set reading direction or provide hyphenation hints.

Formatting

△

Formatting inline elements provide simple visual styling of text.

A text element 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.

The basic formatting inline elements are:

text: Plain unformatted text. The only element that can start or end with a space, or just be all spaces.
break: Force a new line. As before
this.
deleted△: Indicates text that has been, or is to be, removed. ~~Example~~.
direction: Element that forces a rendering direction on its text on a character-by-character basis. Useful for forcing numbers to render properly when scripts are mixed. Example: Example forcing Example in reverse.
emphasis: Text needing to stand out slightly from the rest to indicate that it is something to be noted. Example.
inserted△: Indicates text that has been, or is to be, inserted. Example.
key: Key on a keyboard. Example.
mark: Highlighted text, with a choice of background colours. Example.
reference△: Passively refers to a label, heading or control on a page, such as a button. Use a citation to refer to the title of a work. Example.
selection: Indicates the current selection. Example.
strike: Indicates something is in error, not used or disabled. ~~Example~~.
strong△: Text to be properly noticed as being important. A stronger version of emphasis. Example.
subscript: Text that qualifies its preceding text in a subordinate way, as defined by the context. Example: 257₈ as the base-8 (octal) representation of 175.
superscript: Text that qualifies its preceding text in a superior way, as defined by the context. Example: 2³ as 2 to the power of 3.

Code

△

Code inline elements render as monospaced as coding examples.

These inline elements are only allowed in code and program line elements. Any elements, including links, after a commentary element within its parent will use the same font as it, except for any keyboard or variable elements in a program line.

The code formatting inline elements are:

commentary: Non-code commentary within a program line for annotating the code. Appears as proportionally-spaced text, as distinct from the monospaced text of any elements before it.
keyboard: Text typed by a user. Example.
variable△: Non-literal placeholder text. Example.

Inline rich text

△

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

The inline rich text elements are:

code: For code snippets. Example: .Prog{margin-top:.7rem;width:auto}___.
quote: Solitary or outer quotes, as defined by the Quotes pattern defined for the current Locale. Example.
sample△: Useful for sample text or labels. Example.
subquote: Inner quotes, as defined by the Quotes pattern defined for the current locale. An Example of one.

Functional

△

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

The link, file, email and telephone elements 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.

The functional inline elements are:

citation: Name 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. Example.
email: Special link to open the default email client with a email ready to edit and send. Email, Subject and Body are required. The Body may have blank lines and any paragraph without ending punctuation will have a full stop added. Example: pollie@gov.au.
file△: File for download or showing/playing in a new page if listed in the MIME types section of the Settings page, and any codecs required are installed. The file must be Embeddable to download. If an audio file and JavaScript is enabled (browser default), clicking will play the audio within the current page. Example.
icon: Show an icon. Example: .
link: Hypertext link – the fundamental enabler for navigating between pages on the worldwide web. Example link back to this entry's heading. See Links for details. Also see Pop-in.
media icon△: Media control icon for documentation, especially for sequence element's controls. It can show the control's normal and disabled states, as well as the pointer. Direction follows the page direction, but can be set for the icon itself. Example: for play.
telephone: When clicked on, attempts to dial its telephone number. Requires a telephony program. Example: +1-234-567-890.
time: Formatted date or time, with a choice of calendars, timezones and formats, including military. Its Time entry format is yyyy-mm-dd-hh-mm-ss, as per Etc/UTC, which is the universal time standard. It is displayed according to its other attributes. Example: Wednesday, 1 Nehasse 2016 ERA1 at 2:45:23 am East Africa Time, for 2024-08-06-23-45-23 using the ethiopic calendar in Addis Ababa.
value△: Shows one of the Values of the Settings page, including the password for the gu guest account, if any. Direction is available, but embedded characters may be used for more complex directional formatting for the registration details. Example: ABN.

Any of the the text-based functional inline elements elements can have their colours customised by styling for impact as calls for action.

Links

△

Links make the web work, and enhances the integration of a site. Smallsite Design keeps track of internal links to make selection easier.

Internal link targets are selectable from:

a.All articles and categories.
b.Sections and subsections.
c.Glossary entries.
d.Step and substep numbers.
e.Question numbers.
f.Other pages, like Subsites, Categories and Latest articles.
g.Common links, like Related articles or Subsite links.

Note that the pages linked to by Categories and Latest articles are for the current subsite, being the main subsite when clicked on in management pages.

Usually fragments are only those available in released articles, but all those in the article currently being edited are also available, bypassing the need to release it then re-edit it just to put in link targets to new elements. If any internal link targets get a new ID, internal links are updated immediately, and when saved, the last release of any article with links to the article will also be updated.

External links must have a URL, but the Text is optional, defaulting to the URL. If the text cannot fit in the width available, it will break at every 20 characters. For links to other Smallsite Design sites, /-/ at the end of the URL's path will be replaced with the locale and the current effective accessibility setting, allowing visitor experience continuity between the sites. Must be before any query or fragment. The /-/ will not be displayed in a link's text URL on a page.

For example, a link's Target entered as:
https://art.com/art/a-art/-/?name=value#sn-id

will be rendered in the link's URL, on a page with the en-001 locale and accessibility off, as:
https://example.com/art/a-art/en-001/?name=value&acc=n#sn-id

but if no Text is specified, the link will be displayed as:
https://example.com/art/a-art/?name=value#sn-id
(Hover over the link to see the full URL at the bottom of the browser page).

If there is no text specified for internal links, they will use the text of their target's heading. To avoid having to use text in links, make heading text use sentence case, where only the first letter of the heading is capitalised, other than where the language usually uses capitals in body text, such as proper nouns in English and all nouns in German. Links have a First letter attribute which allows changing the case of the first letter so that the heading can be used for the link's text with a case that suits its context.

For example, if the headline of a link's target is Category but when wanting to use it as a generic term in a particular context, setting its First letter to Lowercase renders it as category. If the current locale's script does not use case, the setting is ignored, and it may not work for both cases or specific letters for some languages.

This means that to really take advantage of using links in this way, make headlines and headings use the singular form which in many cases in English can be used for plural by simply adding an s as the first character of the element after the link. If the plural is more complex, reword to use the singular form. Because the layout of inline elements for each locale can be different, this usage can be tailored for each locale using the headline/heading translation as rendered.

If there is no target for a link, or to a fragment that no longer exists, it will show a red ʘ?ʘ, except if the fragment link has Text, a _? will show after the link. If there is a target, but it is for an internal link to a target of lower showing visibility, a plain ʘ?ʘ is displayed.

In general, the best use of inline links is to:

a.Minimise using them in long-form articles to reduce opportunities to leave the article.
b.Preferably use the related links at the end of articles.
c.Use where their target is providing direct support for the particular aspect of the narrative at that point, such as showing data or statistics.
d.Use where their target is providing context for those not familiar with it at that point in the narrative, such as the description of a section of a page used to perform a procedure.

Inline inks can interrupt a narrative, and so need to be really useful for many to be worthy of inserting. Not everyone will want to look at the target pages, but it is better than including that information on the page where most may find it clutter. An alternative is to use a footnote where no more than a paragraph is required, but only if it is not needed for other articles.

However, in reference sites like this, extensive inline cross-references are expected, so visitors can get to any ancillary information they may need quickly.

Restricted characters

△

There are some restrictions with where and how many underscores and spaces are allowed.

To enter an underscore:

a.Only the Text inline element can start or end with underscores or spaces.
b.Any inline element can contain a single underscore, but only a Text element can have multiples of them or spaces.
c.Inside any program Line or Code element, any of the allowed inline elements can have any combination of text, including underscores and spaces.

For visual integrity, except for the text element being used as the connective text, any other inline element should be self-contained and not have underscores or spaces at its ends. The exceptions are the inline elements that are used for programming code or text console entry, where any combination of text needs to be allowed. There are a restricted number of inline elements that can represent code, but all can be coloured to represent different syntactic tokens.

Attempting to type in multiple underscore where they are not allowed will show an error message, and reduce the contents to a single underscore. Saving again will accept the single character.

Colouring

△

Some elements allow their text to be coloured.

The elements that can be coloured are:

a.Formatting: text, direction, emphasis, reference, strike, strong, subscript, superscript.
b.Code: keyboard, variable.

The selection element follows the subsite theme colours, unless a different background colour is selected, making the text and border switch to dark.