Re: [csswg-drafts] [css-fonts-4] Feature for making text always fit the width of its parent (#2528)

Something like this might work?

```js
//textfit.js
class TextFit extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  static get observedAttributes() {
    return ['max-font-size'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'max-font-size') {
      this.render();
    }
  }

  render() {
    const maxFontSize = this.getAttribute('max-font-size') || 'infinity';
    const content = this.textContent;

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          --max-font-size: ${maxFontSize === 'infinity' ? 'infinity * 1px' : maxFontSize};
          display: flex;
          container-type: inline-size;
          --captured-length: initial;
          --support-sentinel: var(--captured-length, 9999px);
          line-height: 0.95;
          margin: 0.25em 0;
        }
        [aria-hidden] {
          visibility: hidden;
        }
        :not([aria-hidden]) {
          flex-grow: 1;
          container-type: inline-size;
          --captured-length: 100cqi;
          --available-space: var(--captured-length);
        }
        :not([aria-hidden]) > * {
          display: block;
          --captured-length: 100cqi;
          --ratio: tan(atan2(var(--available-space), var(--available-space) - var(--captured-length)));
          font-size: clamp(1em, 1em * var(--ratio), var(--max-font-size, infinity * 1px) - var(--support-sentinel));
          inline-size: calc(var(--available-space) + 1px);
        }
        @property --captured-length {
          syntax: "<length>";
          initial-value: 0px;
          inherits: true;
        }
      </style>
      <span>
        <span><span>${content}</span></span>
        <span aria-hidden="true">${content}</span>
      </span>
    `;
  }
}

customElements.define('textfit', TextFit);
```
Then you just include the textfit.js in your HTML, and use it like:
```js
<textfit>Your text here</textfit>
<textfit max-font-size="5em">Custom max font size</textfit>
```

-- 
GitHub Notification of comment by nathanchase
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2528#issuecomment-2240846766 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 20 July 2024 02:07:50 UTC