Welcome to Codidact Meta!
Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.
Comments on Why is <small> HTML tag rendered differently in preview?
Parent
Why is <small> HTML tag rendered differently in preview?
Sometimes I use the <small> HTML tag to reduce the impact of some collateral part of a text, and in the preview this is nice and dandy. Here is an example from this post on EE.CD (red emphasis mine):
However I noticed that in the actual post presentation that same text is rendered in a different way, in particular, there is no font size changes:
Is this a bug? Does it depend on my browser? Am I missing something?
Post
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:
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
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.
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
Click for hidden details
I hope that was worth it.-
This footnote ends with a handy link back to where it was linked from. ↩︎
1 comment thread
0 comment threads