Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

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?

+3
−0

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):


text as it appears in post preview


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:


text as it appears in rendered post


Is this a bug? Does it depend on my browser? Am I missing something?

History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.
Why should this post be closed?

0 comment threads

Post
+5
−0

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 (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

Click for hidden details I hope that was worth it.

  1. This footnote ends with a handy link back to where it was linked from. ↩︎

History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.

1 comment thread

Thanks for the explanation. That makes sense and I missed it wasn't a "legit" tag. As for the rati... (4 comments)
Thanks for the explanation. That makes sense and I missed it wasn't a "legit" tag. As for the rati...
Lorenzo Donati‭ wrote over 1 year ago

Thanks for the explanation. That makes sense and I missed it wasn't a "legit" tag.

As for the rationale behind it, I don't see why <small> is forbidden. The workaround are clunky and what you propose really don't fit my bill, neither details nor footnotes give the effect I was looking for.

They convey the wrong information, i.e. that the text can be skipped. I didn't want to give that impression. The note was there because it's a warning that a reader must be aware of. The fact that I used the small font is just to highlight that it is not part of the technical content of the post.

trichoplax‭ wrote over 1 year ago

In general, I don't know the reason for the particular set of HTML tags that were chosen to be permitted. The list does change from time to time, so feel free to raise a feature request on Meta asking for any additional tags you would like to be added.

trichoplax‭ wrote over 1 year ago

For your particular purpose, it's your decision how to format your own post, but personally I would find it easy to assume that a section in smaller font is more skippable. In a post of my own, if I wanted to distinguish something that the reader must be aware of I would aim to make it appear distinct rather than diminished.

I might put a horizontal rule (<hr> or ---) above and below the note to separate it, put it in a quote block if it's a quote (so probably not in your particular case), indent it with a bullet point if that isn't too misleading, or possibly put it in a box using formatting classes, although I lean away from that as my preference is for host independent markup that still works if pasted into another site.

trichoplax‭ wrote over 1 year ago

I'd also bear in mind accessibility when considering use of a smaller font size. If a user has overridden their browser default font size to ensure they can read text on websites, then <small> may be a smaller font size than is comfortable to read.