Defining contexts

Typetura’s power comes from how it can make text respond to any area of your page, not just the viewport. This means any element can become a context, like an article container, a sidebar, or the text element itself. Think of these like element querie, with the bonus that you can interpolate between breakpoints.

By default, the viewport width is a context, along with any element with the class of typetura. You can change the selectors that Typetura identifies as a context by adding a configuration before the Typetura script runs.

page.html
<script>
    window.typetura = {
        selectors: [
            ".typetura",
            ".headline",
            "article",
            "section",
            "aside"
        ]
    }
</script>
<script src="/scripts-directory/typetura.min.js"></script>

Additional contexts can be defined using the class typetura.

If you are using a Typetura package, then article, section, main, aside, and the various headline styles are also contexts.

Custom contexts and inputs

The Typetura technology can be applied to much more than just text styles. You can pass any information to be used as a context like scroll position, cursor position, ambient light, ambient volume, form input, local temperature, some combination of the above, or something different entirely. Anything you can assign a value to can be used with Typetura.

To create a custom context in Typetura, the output of your custom context needs to store this value as a number with the CSS property. Do this with the --tt-bind property. So if it’s 72° F, you can query that temperature and use it as a context by adding the style --tt-bind: 72; to the parent element. Typetura always starts at a value of 0, so you may need to offset your values to match this, and a maximum can be set with --tt-max. If we want our Typetura styles to max out at 100° F, then we would write it like --tt-max: 100;.

You are pushing the boundaries of what Typetura can do with custom contexts. We will go over this in the component styles section.

pageSupport and services

Last updated