9. 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 out of text in 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.
The 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. Pages have automatic hyphenation for when large words are used in table cells or asides to avoid tables overflowing out of the page or large gaps appearing between words in justified text. However, not all browsers support that or for all languages, so the Κ?Κs can be used to create such contextual breaks. In general, preferably start paragraphs with any large words to minimise hyphenation.
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.
- bdo
- Element that forces a rendering direction on its text. Example: Example.
- break
- Force a new line. As before
this. - deleted
- Indicates text that has been, or is to be, removed.
Example. - 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.
- select
- Indicates the current selection. Example.
- strike
- Indicates an error.
Example. - strong
- Text to be properly noticed as being important. Example. A stronger version of emphasis.
- subscript
- Text 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.
- superscript
- Text 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.
Codeβ³
Code inline elements render as monospaced as coding examples.
These inline elements are only allowed in Code, program Line and Sample elements. Any elements, including links, after a Commentary element within its parent will use the same font as it, except for any Code elements in a program Line.
The code formatting inline elements are:
β³- commentary
- Non-code commentary within its parent for annotating the code. Appears as proportionally-spaced text, as different from the monospaced text of the start of parent's text.
- 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
Functionalβ³
Functional inline elements, while styled, provide additional functionality, such as with links.
link, file, mail and telephone 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. While not technically correct, it can be used to refer to a control or label on a form or page as there is no official semantic element for that common purpose. Example.
- file
- File for download. The file must be Embeddable to download. 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.
- Special link to open the default email client with a email ready to edit and send. Optional Subject and Body. The Body may have blank lines and any paragraph without ending punctuation will have a full stop added. Example: Κ?Κ.
- Media icon
- Media control icon for documentation. 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. Example: +1-234-567-890.
- time
- Formatted date or time, with a choice of formats, calendars and timezones. Time format is yyyy-mm-dd-hh-mm-ss, as per Etc/UTC, which is the universal time standard. Example: .
- 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.
Linksβ³
Links make the web work, and enhances the integration of a site. Smallsite Design helps keep 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 Categories or Latest articles.
- g.Common links, like Related articles or Subsite links.
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.
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 if there is a current explicit accessibility setting, it will also be included, 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.
Links have an First letter option that specifies the case for the first letter, which enables context capitalisation of the text that a link extracts from its target. 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.
This means that to really take advantage of using links in this way, all headlines and headings need to be specified with how they can best be used inline in sentences. That means preferably using the singular form which in many cases can be used for plural by simply adding an s 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, it will show a red Κ?Κ. If there is a target, but it is for an internal link that no longer exists or is to a target of lower showing visibility, a plain Κ?Κ is displayed.
Colouringβ³
Some elements allow their text to be coloured.
The elements that can be coloured are:
While the colouring is useful for indicating various computer language coding elements, as in the example for code, 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 element will be better for more complex diagrams.
While the citation is the only functional inline element that can be coloured by this simple means, typically for representing coloured controls, the file, link, mail and telephone elements can have their colours customised by styling for impact as calls for action.