<!--fit--> could also auto-scale vertically

[eyssette]

is great for horizontally auto-scaling an element, but it would be even more useful if it could also auto-scale vertically.

For instance, textFit can auto-scale in both directions: https://github.com/STRML/textFit.

Is it possible to implement a similar function?

Thanks again for your incredible work!

[yhatt]

Applying vertical fit library such as textFit and Fitty is technically possible through Web Component, but Marp team is not taking them due to issue about performance, rich contents, and the goal of ecosystem (less client JavaScript).

textFit requires many attempts to change the font size and render the text, for finding out the comfortable font size, and actually has optimized processing time to be minimal. However, in certain cases like following, calculating font size may bring many times and affect to rendering performance.

<style scoped>
  @keyframes scale {
    to { width: 3em; height: 3em }
  }
  img {
    animation: 1s ease-in-out 0s infinite alternate scale;
  }
</style>

# Marp :+1: <!--fit-->

The actual size of the fitting header will change at every frames by CSS Animations. So auto-scaled contents must re-calculate a comfortable font-size in every frames. Especially if there were a lot of <!--fit--> headings, the vertical fit may bring catastrophic performance degression.

Marp Core's auto-scaling has not change font size, so it has predictable and minimal computing cost in every frames. (If applied this approach to vertical fitting, the result of scaling will unnatural because natural line breaks in the sentence won't re-calculate)

See also: marp-team/marp-core#197 (comment)