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

71%

+3 −0

Q&A Why do HTML tags reduce my line spacing in Codidact posts?

The cause of the lost line spacing The raw text of your post is converted to HTML ready to be displayed by your web browser. The text is split into paragraphs based on the presence of blank lines,...

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

Answer

#3: Post edited by

trichoplax‭ · 2023-08-11T14:07:46Z (over 1 year ago)
Fix explanation of manual p tags, and refer to HTML sanitiser instead of Markdown parser

Copy Link

Raw

Markdown

## The cause of the lost line spacing
The raw text of your post is converted to HTML ready to be displayed by your web browser. The text is split into paragraphs based on the presence of blank lines, and each paragraph is wrapped in a `` tag. This causes your browser to display it with the styling of a paragraph, with the associated spacing between the lines.
Directly using HTML in the raw text of your post in some cases suppresses this conversion, so for example a paragraph wrapped in `<strike>` does not get wrapped in ``. This leaves the text at default line spacing rather than paragraph line spacing.
---
Note that the particular choice of HTML tag is not relevant to the problem. The `<strike>` tag is used here as an example but other tags also see the same loss of line spacing.
---
## Avoiding the problem
The Markdown parser avoids processing sections of raw text in certain cases. Understanding these cases can help you achieve your intended outcome.
Each of the cases uses the same example text consisting of 2 paragraphs, so you can see which is affected.
### Opening tag on a separate line from the paragraph
This is the case that results in the raw text of the paragraph not being processed, and so not being wrapped in a `` tag. Note that only the first paragraph is affected, as the second paragraph does not have an opening tag on the line before it.
#### Raw text input
```text
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
```
#### Rendered output
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
---
### Opening tag on the same line
Putting the paragraph content on the same line as the opening tag avoids the problem.
#### Raw text input
```text
<strike>A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.</strike>
```
#### Rendered output
<strike>A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.</strike>
---
### Adding a blank line
Leaving a line blank after the opening tag appears to avoid the problem. It works in the editor preview. However, when saved only the second paragraph has the strike applied.
#### Raw text input
```text
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
```
#### Rendered output
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
#### Explanation
The reason for this is that the opening and closing tags are treated as unmatched by the Markdown parser, and its attempt to correct this by adding closing and opening tags gives an unexpected result. The resulting HTML looks like this:
```text
<strike></strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
<strike>A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.</strike>
```
---
### Manually adding p tags
~~The problem can also be avoided by manually adding your own `` tags.~~
#### Raw text input
```text
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
```
#### Rendered output
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>

## The cause of the lost line spacing
The raw text of your post is converted to HTML ready to be displayed by your web browser. The text is split into paragraphs based on the presence of blank lines, and each paragraph is wrapped in a `` tag. This causes your browser to display it with the styling of a paragraph, with the associated spacing between the lines.
Directly using HTML in the raw text of your post in some cases suppresses this conversion, so for example a paragraph wrapped in `<strike>` does not get wrapped in ``. This leaves the text at default line spacing rather than paragraph line spacing.
---
Note that the particular choice of HTML tag is not relevant to the problem. The `<strike>` tag is used here as an example but other tags also see the same loss of line spacing.
---
## Avoiding the problem
The Markdown parser avoids processing sections of raw text in certain cases. Understanding these cases can help you achieve your intended outcome.
Each of the cases uses the same example text consisting of 2 paragraphs, so you can see which is affected.
### Opening tag on a separate line from the paragraph
This is the case that results in the raw text of the paragraph not being processed, and so not being wrapped in a `` tag. Note that only the first paragraph is affected, as the second paragraph does not have an opening tag on the line before it.
#### Raw text input
```text
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
```
#### Rendered output
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
---
### Opening tag on the same line
Putting the paragraph content on the same line as the opening tag avoids the problem.
#### Raw text input
```text
<strike>A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.</strike>
```
#### Rendered output
<strike>A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.</strike>
---
### Adding a blank line
Leaving a line blank after the opening tag appears to avoid the problem. It works in the editor preview. However, when saved only the second paragraph has the strike applied.
#### Raw text input
```text
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
```
#### Rendered output
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
#### Explanation
The reason for this is that the opening and closing tags are treated as unmatched by the HTML sanitiser, and its attempt to correct this by adding closing and opening tags gives an unexpected result. The resulting HTML looks like this:
```text
<strike></strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
<strike>A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.</strike>
```
---
### Manually adding p tags
The problem can also be avoided by manually adding your own `` tags. However, this can also be misleading in the editor preview. The following works fine in the preview:
#### Raw text input
```text
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
```
#### Rendered output
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
However, when the post is saved the HTML sanitiser adds a closing tag and removes the original closing tag, resulting in the following HTML:
```text
<strike></strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
```
If you want to add `` tags yourself you will need to add the `<strike>` tags to each paragraph separately, inside the `` tags:
```text
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
```
This will now be correctly rendered:
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>

#2: Post edited by

trichoplax‭ · 2023-08-11T11:44:31Z (over 1 year ago)
Add note that a blank line does not have the expected outcome

Copy Link

Raw

Markdown

## The cause of the lost line spacing
The raw text of your post is converted to HTML ready to be displayed by your web browser. The text is split into paragraphs based on the presence of blank lines, and each paragraph is wrapped in a `` tag. This causes your browser to display it with the styling of a paragraph, with the associated spacing between the lines.
Directly using HTML in the raw text of your post in some cases suppresses this conversion, so for example a paragraph wrapped in `<strike>` does not get wrapped in ``. This leaves the text at default line spacing rather than paragraph line spacing.
---
Note that the particular choice of HTML tag is not relevant to the problem. The `<strike>` tag is used here as an example but other tags also see the same loss of line spacing.
---
## Avoiding the problem
The Markdown parser avoids processing sections of raw text in certain cases. Understanding these cases can help you achieve your intended outcome.
Each of the cases uses the same example text consisting of 2 paragraphs, so you can see which is affected.
### Opening tag on a separate line from the paragraph
This is the case that results in the raw text of the paragraph not being processed, and so not being wrapped in a `` tag. Note that only the first paragraph is affected, as the second paragraph does not have an opening tag on the line before it.
#### Raw text input
```text
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
```
#### Rendered output
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
---
### Opening tag on the same line
Putting the paragraph content on the same line as the opening tag avoids the problem.
#### Raw text input
```text
<strike>A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.</strike>
```
#### Rendered output
<strike>A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.</strike>
---
### Adding a blank line
~~Leaving a line blank after the opening tag also avoids the problem.~~
#### Raw text input
```text
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
```
#### Rendered output
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
---
### Manually adding p tags
The problem can also be avoided by manually adding your own `` tags.
#### Raw text input
```text
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
```
#### Rendered output
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>

## The cause of the lost line spacing
The raw text of your post is converted to HTML ready to be displayed by your web browser. The text is split into paragraphs based on the presence of blank lines, and each paragraph is wrapped in a `` tag. This causes your browser to display it with the styling of a paragraph, with the associated spacing between the lines.
Directly using HTML in the raw text of your post in some cases suppresses this conversion, so for example a paragraph wrapped in `<strike>` does not get wrapped in ``. This leaves the text at default line spacing rather than paragraph line spacing.
---
Note that the particular choice of HTML tag is not relevant to the problem. The `<strike>` tag is used here as an example but other tags also see the same loss of line spacing.
---
## Avoiding the problem
The Markdown parser avoids processing sections of raw text in certain cases. Understanding these cases can help you achieve your intended outcome.
Each of the cases uses the same example text consisting of 2 paragraphs, so you can see which is affected.
### Opening tag on a separate line from the paragraph
This is the case that results in the raw text of the paragraph not being processed, and so not being wrapped in a `` tag. Note that only the first paragraph is affected, as the second paragraph does not have an opening tag on the line before it.
#### Raw text input
```text
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
```
#### Rendered output
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
---
### Opening tag on the same line
Putting the paragraph content on the same line as the opening tag avoids the problem.
#### Raw text input
```text
<strike>A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.</strike>
```
#### Rendered output
<strike>A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.</strike>
---
### Adding a blank line
Leaving a line blank after the opening tag appears to avoid the problem. It works in the editor preview. However, when saved only the second paragraph has the strike applied.
#### Raw text input
```text
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
```
#### Rendered output
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
#### Explanation
The reason for this is that the opening and closing tags are treated as unmatched by the Markdown parser, and its attempt to correct this by adding closing and opening tags gives an unexpected result. The resulting HTML looks like this:
```text
<strike></strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
<strike>A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.</strike>
```
---
### Manually adding p tags
The problem can also be avoided by manually adding your own `` tags.
#### Raw text input
```text
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
```
#### Rendered output
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>

#1: Initial revision by

trichoplax‭ · 2023-08-11T11:35:29Z (over 1 year ago)

Copy Link

Raw

Markdown

## The cause of the lost line spacing
The raw text of your post is converted to HTML ready to be displayed by your web browser. The text is split into paragraphs based on the presence of blank lines, and each paragraph is wrapped in a `` tag. This causes your browser to display it with the styling of a paragraph, with the associated spacing between the lines.

Directly using HTML in the raw text of your post in some cases suppresses this conversion, so for example a paragraph wrapped in `<strike>` does not get wrapped in ``. This leaves the text at default line spacing rather than paragraph line spacing.

---

Note that the particular choice of HTML tag is not relevant to the problem. The `<strike>` tag is used here as an example but other tags also see the same loss of line spacing.

---

## Avoiding the problem
The Markdown parser avoids processing sections of raw text in certain cases. Understanding these cases can help you achieve your intended outcome.

Each of the cases uses the same example text consisting of 2 paragraphs, so you can see which is affected.

### Opening tag on a separate line from the paragraph
This is the case that results in the raw text of the paragraph not being processed, and so not being wrapped in a `` tag. Note that only the first paragraph is affected, as the second paragraph does not have an opening tag on the line before it.

#### Raw text input
```text
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.

A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.
</strike>
```

#### Rendered output
<strike>
A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.

---

### Opening tag on the same line
Putting the paragraph content on the same line as the opening tag avoids the problem.

#### Raw text input
```text
<strike>A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.

#### Rendered output
<strike>A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.

---

### Adding a blank line
Leaving a line blank after the opening tag also avoids the problem.

#### Raw text input
```text
<strike>

#### Rendered output
<strike>

---

### Manually adding p tags
The problem can also be avoided by manually adding your own `` tags.

#### Raw text input
```text
<strike>

A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.

A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.

</strike>
```

#### Rendered output
<strike>

A slow meandering test paragraph more than long enough to wrap over several rendered lines purely for testing purposes to see what the line spacing looks like after saving with different ways of wrapping in various HTML tags.

Communities

Post History