Using Hype Style Caster for fractional letter spacing

1

You can use Hype Style Caster for this…

StyleCasterLetterSpacing.hype.zip (22,3 KB)

1 Like
2

@MaxZieb as much as I like your extension project, and please don't get me wrong, sometimes I feel like these extensions of yours overshadow people request(s). Personally, cannot follow your extensions because they overwhelm me and I'm just not comfortable adding and manipulating hype that way. I like Hype for its ease of use mainly.

The "style caster" is lengthy, so many examples, I don't know where to begin and I couldn't find how to achieve the effect I'm looking for - there's no specific guide with just that one example to animate, do you see where Im going with this?

I also know your goal is for general awareness which is to let everyone know that it's indeed possible to accomplish the desired effect with the extension but not everyone is going to start using it.

3

Totally up to you... it's one solution. Take it or leave it. No hard feelings. These threads also tend to rehydrate by search, and therefore, if this is not for you, it might be valuable for someone else. Certainly is for me… on my day-to-day basis.

1 Like
4

For sure, Thank you. There's absolutely no hard feelings at all. Sorry if I gave you that impression.

5

I primarily develop extensions for work and clients, sharing them on the forum and GitHub. Documentation remains a challenge, although ChatGPT has helped improve it. Each extension addresses a specific problem with a general solution at its core. I aim to create extensions with broad applicability, reflecting my personal preference.

The concept behind Hype Style Casters is twofold:

  • data-style-declaration enables the declaration of simple style additions, automatically generating them as a style sheet with !important overrides.
  • data-style-caster allows for "casting" specific Hype properties (CSS and Attributes) as CSS variables, usable in data-style-declaration or regular CSS stylesheets.

The rest of the examples is more of the mentioned fringes. For fractional letter-spacing, only data-style-caster is actually needed. In the example, we are casting the width to the variable --spacing-width and can then use it either in data-style-declaration with the value set to letter-spacing:calc(var(--spacing-width) / 50) or by creating a style section in Head HTML:

<style>
.dynamic-letter-spacing {
    letter-spacing:calc(var(--spacing-width) / 50) !important;
}
</style>
1 Like
6

Fractional letter spacing is now supported in Hype (since version 4.1.17). The technique described above can still be used for the myriad of other CSS properties not yet exposed to the animation engine of Hype.

7

What other css properties would those be?