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.
- a.Inline insert for how to use special character sequences to create another inline element from within the text of another
- b.Embedded
character s 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.
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: 2578 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: 23 as 2 to the power of 3.
Code
△Code inline elements render as monospaced as coding examples.
These inline elements are only allowed in
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.
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.
citation - Name of a work, optionally with a
URL orLocale . For a detailed citation, mark as acitation , 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 andBody are required. TheBody 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: , for 2024-08-06-23-45-23 using theethiopic 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 embeddedcharacter s 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.
- 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
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
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
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
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
- 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.
Links to Smallsite Design sites
△Links to other Smallsite Design sites can be enhanced.
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
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
https://ex
(Hover over the link to see the full URL at the bottom of the browser page).
In general, such links will be between sites run by the same owner, and will likely use the same locale hierarchy. That means that if the locale of the current page is ar-eg, and the linking element has a URL that includes /-/, then the target page on the target site will be opened with that locale and the current accessibility.
Before examining what happens at the target site if the locale is not used by it, an explanation of the full locale format is required. Locales are formatted as language-script-region-subregion , though scripts are only used if a language may be written in more than one, and subregions are rare. A locale with a script is zh-hans-hk which is Simplified Chinese as used in Hong Kong. A locale with a subregion is ca-es-valencia which is Catalan in Valencia in Spain.
- 1.If the locale has a subregion, but the locale without it is available, it is used.
- 2.If the locale has a script, but the locale without it is available, it is used.
- 3.If the locale has a script, then the first available locale with the same language and script but another region is used.
- 4.The first available locale with the same language but another region is used.
- 5.The master locale is used.
Whenever a locale substitution is made, the targeted page will show a message indicating the desired locale and the one actually used. Any links on the page will also use the substituted locale, so their target pages will not show the message.
While a substitute locale will always be found, it may not be optimal. In that case the URL may need to explicitly include an available locale, though the source site's current accessibility setting will not be automatically included. Such locales must always have a / before and after them.
Note that while locales elsewhere on the web may be shown like zh_Hant_HK, Smallsite Design always uses lowercase and -, the latter allowing URLS to wrap to another line at them.
Restricted characters
△There are some restrictions with where and how many underscores and spaces are allowed.
- 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 orCode element, any of the allowed inline elements can have any combination of text, including underscores and spaces.
For visual integrity, except for the
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 selection element follows the subsite theme colours, unless a different background colour is selected, making the text and border switch to dark.