«„Утиные истории“ – не все поймут, но многие вспомнят…»
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
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