[tomcur]

LLM Contributions: Review.

This explains the reading of the spec, and explains our model based on that. Wrote this as an explanation in
#790 (comment), and figured it may be useful in the docs for posterity.

HTML sample

<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
body {
    font-size: 16;
    font-family: "Roboto";
}
</style>

<h1><code>collapse</code> hangs unconditionally</h1>

<div style="width: 200px; border: 1px solid; text-align: right">
  X<span style="white-space-collapse: collapse">&#x3000;</span><br />Y
</div>

<h1><code>preserve</code> hangs conditionally</h1>

<div style="width: 200px; border: 1px solid; text-align: right">
  X<span style="white-space-collapse: preserve">&#x3000;</span><br />Y
</div>

<h1>
  <code>preserve</code> preceding <code>collapse</code> hangs unconditionally
</h1>

<div style="width: 200px; border: 1px solid; text-align: right">
  X<span style="white-space-collapse: preserve">&#x3000;</span
  ><span style="white-space-collapse: collapse">&#x3000;</span><br />Y
</div>

<h1>
  <code>collapse</code> preceding <code>preserve</code> hangs conditionally
</h1>

<p>
  The <code>collapse</code> part hangs in full if the <code>preserve</code> part
  hangs in full.
</p>

<p>Here, the <code>preserve</code> part fits in full, so nothing hangs:</p>

<div style="width: 200px; border: 1px solid; text-align: right">
  X<span style="white-space-collapse: collapse">&#x3000;&#x3000;&#x3000;</span
  ><span style="white-space-collapse: preserve">&#x3000;</span><br />Y
</div>

<p>Here, the <code>preserve</code> part doesn't fit, so everything hangs:</p>

<div style="width: 200px; border: 1px solid; text-align: right">
  X<span style="white-space-collapse: collapse"
    >&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;</span
  ><span style="white-space-collapse: preserve">&#x3000;</span><br />Y
</div>

https://developer.mozilla.org/en-US/play?id=Xvs2WibuByVkeRPwc7hAy%2BfYc%2B5W6ZVidyHcfdDy1%2F%2F41DBLRABlyaBHukdkDbLhL4%2BnN5%2FL5YHGdy5B

Changelog: None

[DJMcNab]

As it's internal only docs, I'm happy enough just moving forward with this.

[DJMcNab]

I think what's missing here is a definition of what hanging actually means. To be completely honest, I still haven't got my head around what the behavioural difference is, if we're not actually omitting the glyphs. Is it mostly/entirely the impact on alignment?

[tomcur]

That's fair! This was mostly copied from my comment that really just focused on the conditional vs unconditional aspect of it.

When measuring the line width hanging clusters/glyphs are not included, so yes: it impacts alignment. We currently only hang whitespace, but e.g. punctuation could also hang, in which case you could see the glyphs go outside the line box.