How do I correctly apply a span in the middle of another tag?

[sylvesterroos]

I want to add some strikethrough text in my p, but I can't get it to work correctly. I've got the following snippet:

p class: "text-lg" do
  "Oh, and maybe you've already noticed: this website has both a dark and a light theme, made possible by"
                                                                                                           
  span class: "line-through" do
    "my awesome CSS skills"
  end
                                                                                                           
  "TailwindCSS. Your eyes can thank me later 😌"
end

Which results in the following output:

As you can see, the span is followed by a space, instead of being immediately followed by the rest of the p. Is this some Elixir stuff that I'm not aware of, or am I using Temple incorrectly? Thanks :)

[mhanberg]

It should just work I think, I have an example here: https://github.com/elixir-tools/elixir-tools.dev/blob/main/lib/elixir_tools/pages/home_page.ex

You can see it live at https://www.elixir-tools.dev

[mhanberg]

Oh sorry, I didn't realize that was a screenshot, just looked like text. 😅

Can you confirm if you added the Temple compiler as noted here: https://hexdocs.pm/temple/getting-started.html#install and read the section on white space here: https://hexdocs.pm/temple/your-first-template.html#whitespace

[sylvesterroos]

1. Yup, the compiler is already added
2. I've never learned how HTML whitespace really works in plain HTML, let alone Temple 😅

Basically, I'm trying to recreate this in Temple: <p>Hello <span style="text-decoration: line-through;">world</span>world</p>

[sylvesterroos]

mix temple.converter gives me the same code as my own:

❯ cat /tmp/test.html && mix temple.convert /tmp/test.html
<p>Hello <span style="text-decoration: line-through;">world</span>world</p>
p do
  "Hello"

  span style: "text-decoration: line-through;" do
    "world"
  end

  "world"
end

Could you try to recreate this snippet on your end to rule out any potential wrong configurations on my end?

[mhanberg]

so in temple it just isn't possible (currently) for it to emit the code that you're looking for

a work around in this case is something like

<p>
  Hello
  <span style="display: inline-flex;">
    <span style="text-decoration: line-through;">world</span>
    <span>world</span>
  </span>
</p>

in temple syntax this is

p do
  "Hello"

  span style: "display: inline-flex" do
    span style: "text-decoration: line-through;", do: "world"
    span do: "world"
  end

  "world"
end

the main problem here I think is intuitively you want to interpolate the original span into the string, but that isn't supported currently.

[sylvesterroos]

Too bad, but thanks for your time :)