Question 171693 in Html Question posted in
Some basic documentation can be found here.

Can I force Blazor to render a single, breaking space?

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 &nbsp;: 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 &lt;span)

Here’s the Github issue where a robot decided to ignore the whole problem entirely:

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The only working solution I've found, without emitting excess markup, is to use a whitespace string literal:

    @if (condition)
{
    @* 
        Dear future me: this is the only way to preserve the following whitespace.
        DO NOT DELETE.
    *@
    @(" ")
    <span>some more text</span>
}

  2. 0

    Yes, white-space is rather hard to manage in HTML.
    Still, there are a few ways to accomplish this:

    • put the space inside one of the spans: <span> some more text</span>

    • put the space in its own span: <span> </span><span>some more text</span>

    • use css, for instance with bootstrap: <span class="ms-1">some more text</span>

    Just read the question again and the first two are in your "don’t want to use" list. But they are very valid and easy to control programmatically.

    The css option is the most HTML savvy way to handle this.

    And the <span> </span> spam is the best way to opt in or out of additional formatting applied to the spans.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search