Yeah, titles are treated as plain text. I actually only found out about this recently when I noticed that a unit test I wrote was failing to un-escape special characters (< >) in the title (I was parsing with Floki or something). And only after a bunch of debugging did I realize that characters in the title don’t have to be escaped and Floki was doing the right thing.

In fact, you can even do this:

<title><b>Foo bar</b><div>baz</div></title>

And it will come out literally! I have no idea how I went so long without realizing that. HTML is so weird.

While testing changes to contribute upstream I discovered my suggestion doesn’t work as I intended:

A block element will go to the next line, while inline elements will be kept in the current line as long as they fit within the configured line length.

But

<.live_title default="My App" suffix=" · My App">{assigns[:page_title]}</.live_title>

for many values I’d like to set as default/suffix, causes the line to be longer than the default max length, thus causing the formatter to reformat into 3 lines, introducing white space in the title.

My previous version was:

<.live_title default="My App" suffix={" · My App"} phx-no-format>{assigns[:page_title]}</.live_title>

which is longer for having phx-no-format, but works as intended.

Any suggestions?

I also tried

    <.live_title
      default="My App"
      suffix={" · My App"}
    >{assigns[:page_title]}</.live_title>

to keep all lines short, but it gets reformatted to

    <.live_title
      default="My App"
      suffix={" · My App"}
    >
      {assigns[:page_title]}
    </.live_title>

For comparison, if the full tag fits in a single line, then the formatter doesn’t introduce white space:

  <.live_title>{assigns[:page_title]}</.live_title>

It feels like phx-no-format would still be necessary to cover the usage of live_title assigns/attributes.

I wonder if the current behavior is problematic for links, buttons, and other “inline” tags?

A project I’m working on is indeed full of <.link> components that are formatted with extra inner white space just like the second code block above. In many contexts (e.g. with flexbox) the extra space is not visible, but sometimes it breaks the page design (e.g. links within longer prose) – in which case I do use phx-no-format.