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
1
<script>
2
    window.typetura = {
3
        selectors: [
4
            ".typetura",
5
            ".headline",
6
            "article",
7
            "section",
8
            "aside"
9
        ]
10
    }
11
</script>
12
<script src="/scripts-directory/typetura.min.js"></script>
Copied!
Standard
React
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.
To create a new Typetura context, use the component <Typetura.Context></Typetura.Context>.
Additionally, you can create your own Typetura components with the Typeturize function.
NewComponent.js
1
import React from 'react';
2
import PropTypes from 'prop-types';
3
​
4
import { typeturize } from 'typeturajs';
5
​
6
const NewComponent = (props) => {
7
  const ref = React.useRef();
8
​
9
  React.useEffect(() => {
10
    typeturize(ref.current);
11
  }, [ref]);
12
​
13
  return React.createElement(props.as, {
14
    ref,
15
    children: props.children,
16
  });
17
};
18
​
19
NewComponent.defaultProps = {
20
  as: 'newcomponent',
21
};
22
​
23
NewComponent.propTypes = {
24
  as: PropTypes.string,
25
  children: PropTypes.node,
26
};
27
​
28
export default NewComponent;
Copied!
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.
Support and services

Creating with Typetura - Previous

Creating your own typographic system

Next - Creating with Typetura

Component styles

Last modified 9mo ago

Copy link

Contents

Custom contexts and inputs