Working with Text

One of the most popular types of nodes in the DOM is the Text node, and the `html! macro focuses heavily on making them as easy to create as possible.

You can just type unquoted text into the html! macro and neighboring text will get combined into a single Text node, much like the way that web browsers handle text from html documents.

fn main () {
    let interpolated_text = "interpolate text variables.";

    let example = html! {
       <div>
            Text can be typed directly into your HTML.
            <div>Or you can also {interpolated_text}</div>
       </div>
    };
}

Preserving Space Between Blocks

You should always get the same spacing (or lack there of) between text and other elements as you would if you were working in a regular old .html file.

We'll preserve newline characters so that white-space: pre-wrap etc will work as expected.

When it comes to interpolated variables, we base spacing on the spacing outside of the braces, not the inside.

Let's illustrate:

fn main () {
    let text = "hello";

    html! { <div>{ hello }</div> }; // <div>hello</div>
    html! { <div>{hello}</div> }; // <div>hello</div>

    html! { <div> { hello } </div> }; // <div> hello </div>
    html! { <div> {hello} </div> }; // <div> hello </div>

    html! { <div>{hello} </div> }; // <div>hello </div>
    html! { <div>   {hello}</div> }; // <div>   hello</div>
}

Preserving white-space

Certain CSS styles such as white-space: pre-wrap will preserve all space and new lines within text.

The html-macro will treat all sequences of whitespace as a single whitespace, so in cases that you don't want that you'll need to use a text variable for your text.

Fortunately this should be incredibly uncommon for almost all use cases.

fn main () {
    let text = r#"This needs
it's whitespace perfectly
      preserved"#;

    html! { <span style="white-space: pre-wrap">{ text }</span> };
}