Tufte CSS — дизайн электронных книг на основе идей Эдварда Тафти

18.12.2025

Tufte CSS — CSS-фреймворк, созданный на основе идей известного дизайнера Эдварда Тафти. Ниже — несколько ключевых принципов этого фреймворка.

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

Отдельно поддерживаются цитаты и эпиграфы. У каждого из них можно указать источник или автора.

В обычной книге ссылка на примечание — это цифра, а сам текст примечания размещается внизу страницы или в конце книги. Недостаток такого подхода — необходимость перемещать взгляд в другое место, а затем возвращаться к основному тексту.

В Tufte CSS примечания выводятся в свободном пространстве справа от текстовой колонки. Обычно оно остаётся пустым, поскольку современные экраны достаточно широкие.

Если ширины экрана недостаточно для отображения сноски, её можно открыть, нажав на номер. Так реализовано отображение на мобильных устройствах:

Существует также особый тип сноски — без номера. Принцип её отображения тоже зависит от ширины экрана.

На телефоне такие сноски выглядят так:

При размещении изображений действует та же основная идея — максимальная читаемость. Существует три способа отобразить изображение:

— в колонке основного текста, — на полях, — во всю ширину экрана.

Такой подход особенно полезен для изображений с разной степенью детализации: если изображение сложное и подробное, его лучше размещать во всю ширину, чтобы читатель мог разглядеть детали.

Tufte CSS — пример того, что электронные экраны обладают возможностями, недоступными бумажным книгам. Хотя многие принципы организации текста одинаково применимы к бумаге и экрану, особенности цифровых устройств позволяют сделать чтение удобнее, чем с бумаги.