Скачать слайды презентации: https://github.com/Realetive/lecture-duck-tales/releases
- Рассказать об особенностях типографики (и её месте в вебе);
- привести примеры инструментов, решающих «проблемы» типографики;
- сказать: «Для этого есть плагин на PostCSS!»;
- показать практические примеры (и приёмы) оформления текста.
Мы ежедневно решаем проблемы пользователей, создаем новые интерфейсы, сеем «чистое, доброе, светлое» в мир веб-технологий. Мы используем самые современные инструменты и библиотеки, пишем тысячи строк кода, оптимизируем и рефакторим их, но…
Пользователь хочет «здесь» и «сейчас», ему нужен контент. «Контент» – это, в первую очередь, текст.
скажете вы, и будете правы. Текст предоставляют контент-менеджеры, копирайтеры, дизайнеры макетов. Но если это не сделаем мы, этого не сделает никто. Мы – __ФРОНТ__енд-разработчики, последний бастион на защите пользователя.
Рассказать об особенностях типографики (и её месте в вебе);
Далеко ходить не надо: большинство вопросов оформления текста — школьная программа. Использование типографического набора там, где это необходимо – вполне посильная задача: правил не так много и они диктуются стандартами куда более древними, чем спецификации HTML или JavaScript.
Примеры типографических символов:
- … — многоточие
- « и » или „ и “ – кавычки
- − – минус
- - – дефис
- – – короткое тире
- — – тире
- • – центральная точка
- ° – градус
- пробелы
Наиболее распространённый пример острой необходимости в переносах – колонки с выравниванием по ширине.
![]() |
---|
Скриншот сайта «МИТТЕК» с Бизнес-линча студии Артемия Лебедева |
![]() |
---|
Комментарий Артемия Лебедева: «Так верстают только мудаки». |
HTML: когда использование стандартной выключки по левому краю неприемлемо, исправить ситуацию может расстановка «мягких» ­
переносов.
CSS: спецификация описывает автоматическую поддержку переносов браузерами:
.column {
hyphens: auto;
}
![]() |
---|
Поддержка переносов браузерами по данным caniuse.com |
JavaScript: есть фолбэк – Hyphenator.js.
Перенос ссылок — длинные ссылки могут выходить за рамки блока:
CSS:
.link {
word-wrap: break-word;
word-break: break-all;
hyphens: auto;
}
Существует больше десятка разновидностей пробелов [wiki]!
Название пробела | HTML сущность | Код юникода |
---|---|---|
Em space |   |
\u2003 |
Ideographic space |   |
\u3000 |
Figure space |   |
\u2007 |
En space |   |
\u2002 |
Punctuation space |   |
\u2008 |
Three-per-em space |   |
\u2004 |
Normal space |   |
\u0020 |
No-break space |   |
\u00A0 |
Mathematical space |   |
\u205F |
Four-per-em space |   |
\u2005 |
Thin space |   |
\u2009 |
Six-per-em space |   |
\u2006 |
Hair space |   |
\u200A |
Narrow no-break space |   |
\u202F |
Zero-widthspace | ​ |
\u200B |
HTML: есть тег <nobr>неразрывный пробел</nobr>
— deprecated никогда не был частью стандарта
CSS: определяет отображение пробелов между словами.
.nobr {
white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit;
}
CSS: позволяет управлять использованием альтернативных начертаний для цифр, дробей и порядковых числительных:
.numeric {
font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]
}
Обычные городские номера
- 123-45-67
- 12-34-56
- 1-23-45
- 12-34
Номера с кодом города
- (123) 123-45-67
- (12-34) 12-34-56
- (123-45) 1-23-45
- (12-34-56) 12-34 54
Номера мобильных телефонов
- +7 123 123-45-67 (предпочтительнее)
- 8 123 123-45-67 55
Российские номера телефонов за рубежом
- +7 123 123-45-67
- +7 12-34 12-34-56
- +7 123-45 1-23-45
- +7 12-34-56 12-34
- (+7 123) 123-45-67
- (+7 12-34) 12-34-56
- (+7 123-45) 1-23-45
- (+7 12-34-56) 12-34
Тут всё более-менее просто… В предложении перед списком ставится двоеточие, если оно является вводным к списку. Точка ставится, если предложение слабо связано с перечислением. Каждый элемент начинается со строчного символа и заканчивается точкой с запятой.
В нумерованных списках, элементы которых завершаются запятой или точкой с запятой, должны крайне желательно использование круглых скобок после номера.
http://www.artlebedev.ru/tools/typograf/
http://rmcreative.ru/blog/post/tipograf
привести примеры инструментов, решающих «проблемы» типографики;
@TODO: единицы измерения для текста.
-
postcss-responsive-type — часть пакета Rucksack;
-
bower-пакет Typographic (SASS→PostCSS)
-
сказать: «Для этого есть плагин на PostCSS!»;
https://amplifr.com/ru используют висячую пунктуацию
http://vithar.github.io/bem.info/ru/methodology/solved-problems/
http://prgssr.ru/development/estetichnyj-sass-chast-3-tipografika-i-vertikalnyj-ritm.html
уквица — художественный приём оформления текста за счёт увеличенния первой буквы главы или раздела, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. В рукописных книгах буквицы часто украшались миниатюрами и орнаментами, на смену которым пришли простые буквы в виде обычной литеры наборного шрифта, но увеличенного кегля.
CSS: как такового правила нет, но эффект без проблем достигается с помощью псевдоэлемента ::first-letter
:
.initial-letter::first-letter {
font-size : 3em; /* Размер буквицы */
padding : 3px; /* Поля вокруг первой буквы */
margin-right : 5px; /* Отступ справа */
color : #e7685d; /* Цвет буквицы */
float : left; /* Обтекание по правому краю */
line-height : 0.33em; /* Положение относительно текста */
}
.initial-letter {
clear: left;
}
КЁРНИНГ, ШРИФТЫ?
В П#%$У ЭТУ КАШУ!
СМОТРИТЕ, КАК ЛИХО
Я КАПИТЕЛЬЮ Е#%$У!
![]() |
---|
Влади́мир Влади́мирович Маяко́вский — русский! Советский! Поэт! |
КАПИТЕЛЬ ≠ КАПС.
Начертание в гарнитуре, в которой строчные знаки выглядят как уменьшенные заглавные. Чтобы подчеркнуть разницу между капителью и строчными буквами, её делают немного выше строчных, а полуапроши капительных знаков увеличивают.
показать практические примеры (и приёмы) оформления текста.
Помимо типографического символа – …, приём сокрытия текста, не вошедшего в блок.
CSS:
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Но этот способ имеет один недостаток – он рассчитан на однострочный блок. Для многострочного блока есть:
- префиксное -webkit-свойство
-webkit-line-clamp : <integer>
- кроссбраузерное решение:
$line-height : 1.2;
$block-height : 1em * $line-height;
@mixin line-clamp_line($line) {
-webkit-line-clamp : $line;
height : calc($block-height * $line);
}
.line-clamp {
display : block;
position : relative;
line-height : $line-height;
overflow : hidden;
text-overflow : ellipsis;
padding : 0;
&:after {
content : '…';
display : block;
position : absolute;
bottom : 0;
right : 0;
text-align : right;
width : 25%;
height : calc($block-height);
background : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
}
}
@supports (-webkit-line-clamp: 1) {
.line-clamp:after {
display : none;
}
}
.line-clamp_line_5 {
@include line-clamp_line(5);
}
- решение на JavaScript: Clamp.js, jQuery.dotdotdot и др.
- Главред и советы Максима Ильяхова;
- электронный учебник «Типографика и вёрстка» от дизайн-бюро Артемия Горбунова;
- Типографская раскладка Ильи Бирмана – альтернативная языковая раскладка для MAC OS и Windows, упрощающая ввод популярных типографических символов;
- TypoWolf – журнал c примерами типографических приёмов в вебе. Ежедневные подборки, статьи и руководства;
- Gutenberg – настраиваемый типографический стартовый набор на Sass, основанный на вертикальном ритме;
- typebase.css – своеобразный «normalize.css» для типографики.
- ё-фикация текста: https://github.com/hcodes/eyo
- Яндекс.Спеллер: https://github.com/hcodes/yaspeller
bit.ly
Спасибо за внимание, с вами был Роман Ганин,
- @Realetive