«Тайптестер» превращает любой блок с текстом в пробник шрифта. Слайдеры регулируют кегль и доступные оси вариативных шрифтов. А текст в блоке можно редактировать, как обычное поле ввода.

Слайдеры поддерживают прокрутку и нажатие клавиш, если перевести фокус табом.

Установка

Чтобы тайптестер заработал, нужно установить скрипт и файл со стилями. Самый простой способ, подключить файлы через cdn unpkg.

// Стили
<link rel="stylesheet" href='https://unpkg.com/typetestr/dist/typetestr.css'></link>
// И сам скрипт
import TypeTestr from 'https://unpkg.com/typetestr/dist/typetestr.js'

После подключения можно инициализировать экземпляр класса, например, после полной загрузки страницы. Для использования с turbo, используйте событие turbo:load.

document.addEventListener("DOMContentLoaded", function() {
  new Typetestr();
});

Блокам с текстом добавьте класс typetestr, а в дата-атрибуте укажите настройки, например:

<p class="typetestr"
data-typetestr="size:16:100:40, wght:200:1000:300, wdth:75:125:100, YTLC:440:540">
Two hardy boxing kangaroos jet from Sydney to Zanzibar on quicksilver pinions.</p>

Также можно установить через команду npm i typetestr или скачать с гитхаба typetestr​ из директории dist.

Настройка

По умолчанию скрипт находит все элементы с классом typetestr, указывает этому блоку свойство contenteditable=true и добавляет слайдер для изменения размера шрифта. Название класса можно изменить, передав параметр в конструкторе:

new Typetestr("custom-classname");

Для случаев, когда нужно добавить вариативные оси, добавьте дата-атрибут data-typetestr в формате свойство:минимум:максимум:исходное и перечислить их через запятую, например:

data-typetestr="wght:200:1000:300, wdth:75:125:100"

Для размера шрифта используется свойство size, остальные зарегистрированные оси поменяются на человеческие названия на английском языке.