Why is <small> HTML tag rendered differently in preview?

Explanations for the current behaviour

Rendered text is not small after saving

The <small> tag is not one of the currently supported HTML tags. Supported tags and attributes are discussed in the following Meta posts:

• What html tags can we use in posts?
• What class attributes can we (usefully) use in HTML tags?

So the reason it does not currently work is because it is not supported (it gets automatically removed when you press "Save Post in Q&A").

Rendered text is small in the preview (no longer current behaviour)

During drafting or editing a post, any HTML is currently rendered in the preview, regardless of whether it will be included in the post when saved. This is a bug and a fix is planned. After the fix the preview will no longer show small text. At that point, feel free to comment on this post to remind me to update it accordingly.

This has since been fixed, meaning that this post along with others such as Although div tag is not allowed, it's rendered in the preview and Text colour works in edit preview but not in saved post are no longer a problem - excluded tags are now excluded from the preview.

Rendered text has smaller line spacing

The line spacing is reduced for several different HTML tags, regardless of whether they are removed on saving, so this is a separate issue and I have added a separate Meta post with more detail. This includes ways to avoid the reduced line spacing.

HTML tag still shows up when you next edit the post

When the post is saved, the Markdown (raw text you entered) is converted to HTML so your web browser can render it as formatted text. Both versions (Markdown and HTML) are saved. The HTML version is used to display the post, and the Markdown version is used next time someone edits the post.

Any HTML tags that are removed on saving are only removed from the HTML version. The original Markdown is left unchanged ready for the next edit.

Unsatisfactory workarounds

Subscript and superscript

You can reduce the font size using <sub> (subscript) or <sup> (superscript) tags. Both give text a similar size to the <small> tag, but misaligned vertically as this is not their intended purpose.

Raw text input

Standard size text.

<sub>Subscript text.</sub> Standard size text.

<sup>Superscript text.</sup> Standard size text.

Rendered output

Standard size text.

_{Subscript text.} Standard size text.

^{Superscript text.} Standard size text.

Italics

Italics can be used to change the appearance of a note, but many people find italics difficult to read, especially when used for more than just an individual word.

Alternatives

Small text and italics can be difficult to read. If your purpose is to provide supporting information that is not essential to the understanding of the post, it can be separated without sacrificing legibility. Here are 2 approaches that may be appropriate, depending on the context.

Footnotes

These link to supporting information at the bottom of the post, and there is also an arrow linking from the bottom of the post back to the place in the post the footnote was linked from.

Raw text input

A sentence with a footnote[^1] half way through it.

and then at the bottom of the post:

[^1]: This footnote ends with a handy link back to where it was linked from.

Rendered output

A sentence with a footnote^[1] half way through it.

Hidden details sections

Raw text input

<details>
<summary>
Click for hidden details
</summary>
I hope that was worth it.
</details>

Rendered output

posted over 1 year ago

CC BY-SA 4.0

5mo ago

trichoplax‭

222 74 715 297