«„Утиные истории“ – не все поймут, но многие вспомнят…»
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
images
node_modules
.gitignore
README.md
package.json

README.md

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

Скачать слайды презентации: 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-width​​​space ​ \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);
}

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

На «сладкое»

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

bit.ly

— От винта!

Спасибо за внимание, с вами был Роман Ганин,

  • @Realetive