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

@kizu For what it's worth, I did successfully create a Vue 3 single file component (.vue) and already have found several uses for it in a project:

```vue
<template>
  <span class="text-fit">
    <span><span>{{ text }}</span></span>

    <span aria-hidden="true">{{ text }}</span>
  </span>
</template>

<script setup lang="ts">
const props = defineProps<{
  text: string
  maxFontSize?: string
}>();

const maxfontsize = computed(() => {
  return props.maxFontSize || '9rem';
});
</script>

<style scoped>
.text-fit {
  --max-font-size: v-bind(maxfontsize);

  display: flex;
  container-type: inline-size;
  width: 100%;

  --captured-length: initial;
  --support-sentinel: var(--captured-length, 9999px);

  & > [aria-hidden] {
    visibility: hidden;
  }

  & > :not([aria-hidden]) {
    flex-grow: 1;
    container-type: inline-size;

    --captured-length: 100cqi;
    --available-space: var(--captured-length);

    & > * {
      --support-sentinel: inherit;
      --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)
          -
          var(--support-sentinel)
        );

      inline-size: var(--available-space);

      &:not(.text-fit) {
        display: block;
        font-size: var(--font-size);

        /* stylelint-disable-next-line */
        @container (inline-size > 0) {
          white-space: nowrap;
        }
      }

      &.text-fit {
        --captured-length2: var(--font-size);

        font-variation-settings:
          "opsz"
          tan(
            atan2(var(--captured-length2), 1px)
          );
      }
    }
  }
}

.text-fit:not(.text-fit *) {
  --max-font-size: v-bind(maxfontsize);

  margin: 0.25em 0;
  line-height: 0.95;
}

@property --captured-length {
  syntax: "<length>";
  initial-value: 0;
  inherits: true;
}

@property --captured-length2 {
  syntax: "<length>";
  initial-value: 0;
  inherits: true;
}
</style>

```
and usage is just:
```vue
<TextFit
  text="Text goes here"
  max-font-size="28px"
/>
```

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


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

Received on Friday, 30 August 2024 02:18:44 UTC