Trust all is well with you. I am thrilled to introduce you to an initial prototype of the Textfit method I've been diligently crafting. A standout feature of this method is its innate capability to effortlessly adjust to varying line heights and even unify multiple font dimensions within a single fit.
I genuinely believe this method is promising, but I am eager to harvest your expert opinions. I acknowledge the possibility of having missed some nuances, and your feedback can play a pivotal role in honing it to perfection.
When you can, I invite you to explore, test, and grace me with your insights and recommendations. With your invaluable input, I aspire to polish this further and enrich our collective Hype arsenal.
I'm eager to engage in enlightening dialogues and wish everyone a splendid weekend!
A side note: The em unit will be the standard for setting font sizes and line heights in the inner Markup, aligning with the fitting's requirements.
I'm thrilled to announce that it's now available at
One suggestion I have is to work around the line height issue: If the user has at any point adjusted line-height, we should set that back to 'normal' or else things will look wrong:
// Check computed line-height
let computedLineHeight = window.getComputedStyle(element).getPropertyValue('line-height');
// If computed line-height is in pixels, force it back to 'normal'
if (computedLineHeight.endsWith('px')) {
element.style.setProperty('line-height', 'normal', 'important');
}
No, the direct intention wasn't solely for localization, but I recognize its potential in that area. While the core idea stemmed from creating a template system utilizing Hype Reactive Content, both Hype Reactive Content and Hype Data Magic have indeed been deployed for localization in other projects. The design of this system is versatile enough to support updates to inner HTML irrespective of the action modifying the text size, largely due to its foundation in mutation observing. I appreciate @Daniel's feedback and will look into incorporating his line height reset suggestion. Moreover, there's potential to experiment with converting line height values from px to em, which could add another layer of flexibility. I'm planning on releasing a refined version (v1.01) on GitHub that integrates these enhancements and offers direct access to the fitting algorithm for added versatility.
Thank you for your feedback. I'm genuinely open to any suggestions and greatly appreciate the input so far.
I'm happy to announce the latest update for "Hype Text Fit". In version 1.0.1, I've refined the way line height is managed, ensuring an improved text presentation. Specifically, this version transforms any specified line height into a unitless ratio, providing a more flexible approach compared to merely resetting the line height. Furthermore, I've introduced new 'width' and 'height' modes. While prior versions emphasized adjusting the text size, these fresh modes focus on altering the bounding box along the designated axis, granting you amplified control over layout and design. Setting the width mode could be more efficent…
Your insights and feedback have been crucial in guiding these enhancements. I eagerly await your impressions on this updated version!
I've worked allot with other Textfit libraries, and what always caused issues was working with custom fonts, since they are often times fully loaded after the code has initialized. (since I applied the Textfit logic on scene load). This caused some issues with the code not being able to correctly calculate how to fit the text with the custom font. Changing the loading order fixed it, by applying the Textfit after the font was loaded.
But perhaps something like a fontfaceobserver could be implemented in by default to make it foolproof.
I'm pleased to share version 1.0.3 of Hype Text Fit. In this update, I've integrated the CSS Font Loading API to ensure text is refitted once all fonts are fully loaded. Additionally, the tool now also responds to individual fonts indicating their readiness.
