Hi @STRML, your textFit came in handy for a project, and I have been using it exhaustively for the past months. In the journey I discovered some bugs, which I wanted to share as a gesture of appreciation for your great initial work.
1️⃣ Bug on reprocessing: here. As done above, the actual assignment is missing.
2️⃣ Bug on height assignment: here. The issue I found is that this assignment creates an overflow if some children has bottom padding. I ended up removing this assignment in my refactored version.
3️⃣ The mimified version lacks this improvement. I struggled with the mimified version because it uses scrollWidth and scrollHeight, and I was having different behaviors in different browsers (Safari vs Chrome). I am using clientHeight and clientWidth as it gave me better results than getBoundingClientRect() with some transformations.
4️⃣ The last issue is here. I discovered, in Safari, that with some custom fonts, the synchronous nature of the script was failing to properly read the new dimensions of the element after changing the font. I ended up creating an async version using the ResizeObserver API.
Finally, I leave current version as an attachment in case it might be useful.
text_fit.async.js
Hi @STRML, your
textFitcame in handy for a project, and I have been using it exhaustively for the past months. In the journey I discovered some bugs, which I wanted to share as a gesture of appreciation for your great initial work.1️⃣ Bug on reprocessing: here. As done above, the actual assignment is missing.
2️⃣ Bug on height assignment: here. The issue I found is that this assignment creates an overflow if some children has bottom padding. I ended up removing this assignment in my refactored version.
3️⃣ The mimified version lacks this improvement. I struggled with the mimified version because it uses
scrollWidthandscrollHeight, and I was having different behaviors in different browsers (Safari vs Chrome). I am usingclientHeightandclientWidthas it gave me better results thangetBoundingClientRect()with some transformations.4️⃣ The last issue is here. I discovered, in Safari, that with some custom fonts, the synchronous nature of the script was failing to properly read the new dimensions of the element after changing the font. I ended up creating an async version using the ResizeObserver API.
Finally, I leave current version as an attachment in case it might be useful.
text_fit.async.js