Хочу поблагодарить Марию за помощь в подготовке иллюстраций.
On the other hand, cheap, rough paper with a beautifully set textblock hanging just so on the page makes those in the know, smile (and those who don’t, feel welcome). It says: We may not have had the money to print on better paper, but man, we give a shit. Giving a shit does not require capital, simply attention and humility and diligence. Giving a shit is the best feeling you can imbue craft with. Giving a shit in book design manifests in many ways, but it manifests perhaps most in the margins.
— Craig Mod, Let’s talk about margins
Должно быть, печать статей из Medium — банальность, но мы хотим сделать этот процесс красивым. Возможно, это дань памяти веку печати на бумаге и отчасти ностальгия (да-да, некоторые из нас когда-то создавали макеты печати страниц Medium, но прошло уже столько времени...). В конце концов, печать станиц относится к адаптивному дизайну. Практических способов применения тысячи, начиная от печати на память и вывешивания в рамочке и заканчивая передаче другу и выполнением последних правок перед публикацией. Должно быть, писатели часто так делают.
Но самая важная причина заключается вот в чем: мы уважаем труд наших писателей.
Мы хотели спроектировать наиболее красивый вывод на печать, какой только способны поддержать браузеры. Ниже мы перечислили некоторые различия между экранным и печатным Medium на примере фейковой статьи (тем не менее, Вы можете ее открыть).
Нет видимого пользовательского интерфейса. Мы удалили элементы интерфейса, так как на бумаге они ни к чему. Наши таблицы стилей настроены таким образом, что любые новшества UI не будут видны на листе.
Дополнительные верхние поля. Мы были щедры на размер верхнего колонтитула первой страницы. Он может пригодиться для заметок и прочих почеркушек.
Размер шрифта. Мы изменили размер с 22px на 15px (и все остальные размеры были заменены пропорционально), так как он наиболее прост для восприятия на бумаге.
Ширина страницы. При ширине основной колонки в 4.95" в строке умещается 50-70 слов, как и на экране. Пустое место по бокам листа также позволяет Вам расслабить свои пальцы и расположить более удобно.
Все это было сделано для стандартных размеров бумаги портретной и альбомной ориентаций, и мы не разрабатывали каких-либо исключений для экзотических видов. Заметьте, была изменена максимальная ширина, но не но не настоящая ширина страницы, так что печать на страницах уже 4.95" будет все равно работать без обрезки.
Каждое изображение на отдельной странице. Если вдруг изображение не умещается на странице, то оно будет перемещено на следующую.
Подчеркивания. Все подчеркивания, которые мы осторожно расставляем внутри текста на экране, были убраны из печати - не стоит перегружать глаза этими декорациями.
Цвет текста. Цвет на экране Medium не на 100% черный, так как его контраст чуть ниже, что лучше выделяет его. Однако, на печатт мы выводим чисто черный текст, так как не все принтеры способны справляться с дизерингом.
Фоновые изображения. На печати мы оставляем пустое пространство вместо фоновых картинок. Нельзя оставлять их, так как браузеры по-разному интерпретируют CSS подобных картинок, да и тонер тратить не стоит (уже молчим про удобство чтения).
Висячие строки/окна. Кто-то думает, что мы могли бы уместить эти две строчки на предыдущей странице, а мы так не считаем. Каждый раз наша система убеждается, что эти строки не становятся «висячими», закрывая конец или начало листа.
Футер. Внизу экрана остается только самое интересное — кнопки для отправки статьи в социальные сети. Очевидно, что на бумаге Вы делиться статьей ни с кем не будете (разве что отдадите распечатки другому человеку), так что уберем это из макета печатного вида.
(Нам очень грустно было наблюдать такую огромную трату бумаги… Но это было необходимо для дебага. К счастью, мы делали это единожды.)
Хочу поблагодарить за прочтение статьи и ответить на пару вопросов.
Автор: alexandfox
