«„Утиные истории“ – не все поймут, но многие вспомнят…»

Скачать слайды презентации: https://github.com/Realetive/lecture-duck-tales/releases

План

Рассказать об особенностях типографики (и её месте в вебе);
привести примеры инструментов, решающих «проблемы» типографики;
сказать: «Для этого есть плагин на PostCSS!»;
показать практические примеры (и приёмы) оформления текста.

Вступление

Мы ежедневно решаем проблемы пользователей, создаем новые интерфейсы, сеем «чистое, доброе, светлое» в мир веб-технологий. Мы используем самые современные инструменты и библиотеки, пишем тысячи строк кода, оптимизируем и рефакторим их, но…

Пользователю плевать на наши трудности

Пользователь хочет «здесь» и «сейчас», ему нужен контент. «Контент» – это, в первую очередь, текст.

«Текст — не наша работа!»,

скажете вы, и будете правы. Текст предоставляют контент-менеджеры, копирайтеры, дизайнеры макетов. Но если это не сделаем мы, этого не сделает никто. Мы – __ФРОНТ__енд-разработчики, последний бастион на защите пользователя.

~~Рассказать об особенностях типографики (и её месте в вебе);~~

Типографика

Далеко ходить не надо: большинство вопросов оформления текста — школьная программа. Использование типографического набора там, где это необходимо – вполне посильная задача: правил не так много и они диктуются стандартами куда более древними, чем спецификации HTML или JavaScript.

Примеры типографических символов:

… — многоточие
« и » или „ и “ – кавычки
− – минус
- – дефис
– – короткое тире
— – тире
• – центральная точка
° – градус
пробелы

Переносы (2 класс)

Проблема

Наиболее распространённый пример острой необходимости в переносах – колонки с выравниванием по ширине.

Пример


Скриншот сайта «МИТТЕК» с Бизнес-линча студии Артемия Лебедева


Комментарий Артемия Лебедева: «Так верстают только мудаки».

Решение

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

CSS: спецификация описывает автоматическую поддержку переносов браузерами:

.column {
  hyphens: auto;
}


Поддержка переносов браузерами по данным caniuse.com

JavaScript: есть фолбэк – Hyphenator.js.

Проблема

Перенос ссылок — длинные ссылки могут выходить за рамки блока:

Перенос ссылок

CSS:

.link {
  word-wrap: break-word;
  word-break: break-all;
  hyphens: auto;
}

Пробелы

https://habrahabr.ru/post/136348/

https://habrahabr.ru/post/23250/

http://prgssr.ru/development/vse-o-probelah.html

Существует больше десятка разновидностей пробелов [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;
}

Числа

https://habrahabr.ru/post/24544/

CSS: позволяет управлять использованием альтернативных начертаний для цифр, дробей и порядковых числительных:

.numeric {
  font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]
}

Оформление телефонных номеров

Источник: https://www.artlebedev.ru/kovodstvo/sections/91/

Обычные городские номера

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

Тире (5 класс)

Кавычки (5 класс)

Списки

Тут всё более-менее просто… В предложении перед списком ставится двоеточие, если оно является вводным к списку. Точка ставится, если предложение слабо связано с перечислением. Каждый элемент начинается со строчного символа и заканчивается точкой с запятой.

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

Типографы

Типо граф

студии Артемия Лебедева

http://www.artlebedev.ru/tools/typograf/

Муравьёва (PHP и Python)

http://mdash.ru/

Антона Шувалова

http://a.github.io/textr/

Дениса Селезнева

https://typograf.github.io/

Максима Оранского и Александра Макарова (PHP)

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

Инструменты:

http://topfunky.com/baseline-rhythm-calculator/

http://drewish.com/tools/vertical-rhythm

http://toki-woki.net/p/Boks/

http://baselinecss.com/

https://github.com/markgoodyear/postcss-vertical-rhythm

https://github.com/F21/postcss-vertical-rhythm-function

Буквица

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

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

Название пробела	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 сущность	Код юникода
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

lecture-duck-tales lecture-duck-tales copied to clipboard

Metadata

«„Утиные истории“ – не все поймут, но многие вспомнят…»

План

Вступление

Пользователю плевать на наши трудности

«Текст — не наша работа!»,

Типографика

Переносы (2 класс)

Проблема

Пример

Решение

Проблема

Пробелы

Числа

Оформление телефонных номеров

Тире (5 класс)

Кавычки (5 класс)

Списки

Типографы

студии Артемия Лебедева

Муравьёва (PHP и Python)

Антона Шувалова

Дениса Селезнева

Максима Оранского и Александра Макарова (PHP)

Оформление

Ширина текстового блока

Адаптивный кегль

Полноширный заголовок

Висячая пунктуация

Подчёркивание ссылок

Вертикальный ритм

Инструменты:

Буквица

КАПИТЕЛЬ

Заключение

Многоточие

Дополнительные материалы

На «сладкое»

Вопросы? Жалобы? Предложения?

— От винта!

← Metadata

Owner

Metadata

lecture-duck-tales
lecture-duck-tales copied to clipboard

Название пробела	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