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.

Post History

77%
+5 −0
Q&A 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 i...

posted 1y ago by trichoplax‭  ·  edited 4mo ago by trichoplax‭

Answer
#3: Post edited by user avatar trichoplax‭ · 2024-06-23T18:02:15Z (4 months ago)
Edit section whose described problem has since been fixed
  • ## 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?](https://meta.codidact.com/posts/277420)
  • - [What class attributes can we (usefully) use in HTML tags?](https://meta.codidact.com/posts/289239/289240)
  • 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](https://meta.codidact.com/posts/289333). 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
  • ```text
  • Standard size text.
  • <sub>Subscript text.</sub> Standard size text.
  • <sup>Superscript text.</sup> Standard size text.
  • ```
  • #### Rendered output
  • Standard size text.
  • <sub>Subscript text.</sub> Standard size text.
  • <sup>Superscript text.</sup> 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
  • ```text
  • A sentence with a footnote[^1] half way through it.
  • ```
  • and then at the bottom of the post:
  • ```text
  • [^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
  • ```text
  • <details>
  • <summary>
  • Click for hidden details
  • </summary>
  • I hope that was worth it.
  • </details>
  • ```
  • #### Rendered output
  • <details>
  • <summary>
  • Click for hidden details
  • </summary>
  • I hope that was worth it.
  • </details>
  • [^1]: This footnote ends with a handy link back to where it was linked from.
  • ## 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?](https://meta.codidact.com/posts/277420)
  • - [What class attributes can we (usefully) use in HTML tags?](https://meta.codidact.com/posts/289239/289240)
  • 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](https://meta.codidact.com/posts/284503) and [Text colour works in edit preview but not in saved post](https://meta.codidact.com/posts/287718) 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](https://meta.codidact.com/posts/289333). 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
  • ```text
  • Standard size text.
  • <sub>Subscript text.</sub> Standard size text.
  • <sup>Superscript text.</sup> Standard size text.
  • ```
  • #### Rendered output
  • Standard size text.
  • <sub>Subscript text.</sub> Standard size text.
  • <sup>Superscript text.</sup> 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
  • ```text
  • A sentence with a footnote[^1] half way through it.
  • ```
  • and then at the bottom of the post:
  • ```text
  • [^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
  • ```text
  • <details>
  • <summary>
  • Click for hidden details
  • </summary>
  • I hope that was worth it.
  • </details>
  • ```
  • #### Rendered output
  • <details>
  • <summary>
  • Click for hidden details
  • </summary>
  • I hope that was worth it.
  • </details>
  • [^1]: This footnote ends with a handy link back to where it was linked from.
#2: Post edited by user avatar trichoplax‭ · 2023-08-11T14:39:46Z (about 1 year ago)
Add missing raw text input for the other half of the footnote Markdown
  • ## 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?](https://meta.codidact.com/posts/277420)
  • - [What class attributes can we (usefully) use in HTML tags?](https://meta.codidact.com/posts/289239/289240)
  • 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](https://meta.codidact.com/posts/289333). 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
  • ```text
  • Standard size text.
  • <sub>Subscript text.</sub> Standard size text.
  • <sup>Superscript text.</sup> Standard size text.
  • ```
  • #### Rendered output
  • Standard size text.
  • <sub>Subscript text.</sub> Standard size text.
  • <sup>Superscript text.</sup> 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
  • ```text
  • A sentence with a footnote[^1] half way through it.
  • ```
  • #### Rendered output
  • A sentence with a footnote[^1] half way through it.
  • ### Hidden details sections
  • #### Raw text input
  • ```text
  • <details>
  • <summary>
  • Click for hidden details
  • </summary>
  • I hope that was worth it.
  • </details>
  • ```
  • #### Rendered output
  • <details>
  • <summary>
  • Click for hidden details
  • </summary>
  • I hope that was worth it.
  • </details>
  • [^1]: This footnote ends with a handy link back to where it was linked from.
  • ## 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?](https://meta.codidact.com/posts/277420)
  • - [What class attributes can we (usefully) use in HTML tags?](https://meta.codidact.com/posts/289239/289240)
  • 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](https://meta.codidact.com/posts/289333). 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
  • ```text
  • Standard size text.
  • <sub>Subscript text.</sub> Standard size text.
  • <sup>Superscript text.</sup> Standard size text.
  • ```
  • #### Rendered output
  • Standard size text.
  • <sub>Subscript text.</sub> Standard size text.
  • <sup>Superscript text.</sup> 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
  • ```text
  • A sentence with a footnote[^1] half way through it.
  • ```
  • and then at the bottom of the post:
  • ```text
  • [^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
  • ```text
  • <details>
  • <summary>
  • Click for hidden details
  • </summary>
  • I hope that was worth it.
  • </details>
  • ```
  • #### Rendered output
  • <details>
  • <summary>
  • Click for hidden details
  • </summary>
  • I hope that was worth it.
  • </details>
  • [^1]: This footnote ends with a handy link back to where it was linked from.
#1: Initial revision by user avatar trichoplax‭ · 2023-08-11T14:34:05Z (about 1 year ago)
## 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?](https://meta.codidact.com/posts/277420)
- [What class attributes can we (usefully) use in HTML tags?](https://meta.codidact.com/posts/289239/289240)

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](https://meta.codidact.com/posts/289333). 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
```text
Standard size text.

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

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

#### Rendered output

Standard size text.

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

<sup>Superscript text.</sup> 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
```text
A sentence with a footnote[^1] half way through it.
```

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

### Hidden details sections
#### Raw text input
```text
<details>
<summary>
Click for hidden details
</summary>
I hope that was worth it.
</details>
```

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

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