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 do HTML tags reduce my line spacing in Codidact posts?
Parent
Why do HTML tags reduce my line spacing in Codidact posts?
When I use an HTML tag to alter the appearance of a paragraph in a Codidact post, it works but the line spacing is reduced, which I do not want. Why is this? Is there anything I can do about it?
Example
Raw text input
A long, drawn out, meandering test paragraph. This is more than long enough to wrap across multiple rendered lines purely for demonstration purposes. This allows seeing exactly what the line spacing looks like after saving, for ease of comparison.
<strike>
A long, drawn out, meandering test paragraph. This is more than long enough to wrap across multiple rendered lines purely for demonstration purposes. This allows seeing exactly what the line spacing looks like after saving, for ease of comparison.
</strike>
Rendered output
A long, drawn out, meandering test paragraph. This is more than long enough to wrap across multiple rendered lines purely for demonstration purposes. This allows seeing exactly what the line spacing looks like after saving, for ease of comparison.
Post
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 <p> 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 <p>. 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 <p> 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
<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
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
<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
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.
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
<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
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.
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:
<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 <p> tags. However, this can also be misleading in the editor preview. The following works fine in the preview:
Raw text input
<strike>
<p>
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.
</p>
<p>
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.
</p>
</strike>
Rendered output
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.
However, when the post is saved the HTML sanitiser adds a closing tag and removes the original closing tag, resulting in the following HTML:
<strike></strike>
<p>
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.
</p>
<p>
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.
</p>
If you want to add <p> tags yourself you will need to add the <strike> tags to each paragraph separately, inside the <p> tags:
<p>
<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>
</p>
<p>
<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>
</p>
This will now be correctly rendered:
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.
0 comment threads