By default, Blazor trims "insignificant" whitespace at compile time.
However, Blazor also trims significant whitespace:
<span>some text</span>@if (true){<span>some more text</span>}This will emit the following HTML, which will render like some textsome more text:
<span>some text</span><span>some more text</span>Whereas I would like to emit a space, to render like some text some more text:
<span>some text</span> <span>some more text</span>How can I tell Blazor that the whitespace specifically separating the two spans is significant?
Here's some things that I don't want to do:
- Use
@preservewhitespace true: that will stop Blazor from trimming whitespace from the whole document, which is (per the blog post linked above) a performance consideration.Insignificant whitespace tree nodes consumed up to 40 percent of the rendering time in benchmarks.
- Use
: I don't want a non-breaking space. I want the space to break if required. - Move the space inside the span
<span> some more text</span>: this is a semantic change; for example, if the spans have a border, the borders will abut and there will be an inappropriate leading space inside the inner span. - Wrap the significant whitespace in a new span for extra significance
<span> </span><span>some more text</span>: while span spam is amusing, there's readability concerns and this may also be a semantic change depending on related scripts / styles.
Here's some things that look like they should work, but don't:
<text> <span>some more text</span></text>inside the block: the whitespace is still trimmed.<!-- lol blazor --> <span>some more text</span>: both the HTML comment and the whitespace gets trimmed.- Abusing the
@operator like@: <span>etc: the whitespace is preserved, but the span gets HTML-escaped (as in<span)
Here's the Github issue where a robot decided to ignore the whole problem entirely: