leforestier/yattag

Indenting lone link changes display with pre-wrap

nahoj opened this issue · 2 comments

nahoj commented

Hi, here is a sample HTML that displays differently in a browser after being indented with yattag.indent. Is this a bug?

<html>
  <body>
    <div style="white-space: pre-wrap;"><a href="https://yattag.org/">Hello</a></div>
  </body>
</html>
leforestier commented

Hi,
by default Yattag doesn't indent the content of nodes that directly contain text. So, had your link been surrounded by text, the content of the div would not have been indented, it would have been completely unchanged.

For example:

<html>
  <body>
    <div style="white-space: pre-wrap;">Visit this link: <a href="https://yattag.org/">Hello</a></div>
  </body>
</html>

would have been left unchanged.

On the other hand, in your example, the div doesn't directly contain text (the text is deeper), so the content of the div is indented. Indentation add spaces and carriage returns, of course. And with a white-space: pre-wrap style, these spaces are displayed in the browser.

I don't think there's a solution to this.

Should we avoid indenting every node that contain text at whatever depth? Then we'd almost never indent anything.

Should we inspect every node to see if it has a pre-wrap style before deciding to indent its content or not? I don't think this would be reasonable. Plus, remember that it's only a problem if the div itself does not contain text directly.

I can think of 3 options for the user to handle this rare scenario:

  • do not indent your document
  • do not add white-space: pre-wrap style if the div does not directly contain text
  • add a &nbsp; anywhere in the div (perhaps just before closing it). That's a bit ugly but that would prevent the indentation of the the content of the div.
nahoj commented

Understood, thank you for your answer.