SlideShare a Scribd company logo
Justify, от которого не тошнит
Алексей Иванов (@iadramelk) и Александр Остапенко (@alexalx13)
Frontttalks nov2013
Frontttalks nov2013
Frontttalks nov2013
Типографика
1. mdash.ru
2. Типограф Лебедева
3. Тысячи других
Frontttalks nov2013
Frontttalks nov2013
Frontttalks nov2013
Frontttalks nov2013
Frontttalks nov2013
Frontttalks nov2013
Библиотеки для расстановки переносов
1. hyper.js + Словарь переносов
2. hypenator.js
3. http://quittance.ru/hyphenator.php
4. http://quittance.ru/blog/index.php?category=21 - описание алгоритма
Frontttalks nov2013
Frontttalks nov2013
Frontttalks nov2013
Frontttalks nov2013
Правильная настройка переносов
1. Минимальная длина для оставляемого куска 3 символа.
2. Минимальная длина для переносимого куска 3 символа.
3. Не допускается разделение переносами сокращений, набираемых
прописными буквами (ВЛКСМ), прописными с отдельными строчными
(КЗоТ) и с цифрами (ФАIООО).
4. Переносить последнее слово в абзаце не рекомендуется.
Frontttalks nov2013
Алгоритм Кнута-Пласса
Реализация для веба: http://www.bramstein.com/projects/typeset/

• Бокс: Базовый блок текста, у него есть ширина.
• Клей: Элемент с изменяемым размером. У него есть три параметра:
Базовая ширина, насколько его можно растянуть, насколько его можно
сжать. Пример: 1/3, 5/12, 1/12.
• Штраф: Место где допустим или недопустим перенос. У него есть
ширина и коэффицент штрафа и флаг.
Пример разбитого предложения
Вошел ямщик просить на водку.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.

box (w(indent))
penalty (0, ∞, false)
box (w("вошел"))
glue (1em/3, 5em/12, 1em/12)
box (w("ямщик"))
glue (1em/3, 5em/12, 1em/12)
box (w("про"))
penalty (w('-'), 100, true)
box (w("сить"))
glue (1em/3, 5em/12, 1em/12)
box (w("на"))
penalty (0, ∞, false)
glue (1em/3, 5em/12, 1em/12)
box (w("водку"))
penalty (0, ∞, false)
glue (0, ∞, 0)
penalty (0, —∞, false)

—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—

параграфный отступ
запрет переноса
"вошел"
пробел
"ямщик"
пробел
"про"
мягкий перенос
"сить"
пробел
"на"
запрет переноса
пробел
"водку."
запрет переноса
пробел а последней строке
принудительный перенос
Frontttalks nov2013
Frontttalks nov2013
Frontttalks nov2013
Frontttalks nov2013
Frontttalks nov2013
Ссылки
• Где поиграться: http://github.com/ridero/fronttalks
• Когда-нибудь тут будет сервис по подготовке книг к печати:
http://ridero.ru
• Мы в Твиттере: @iadramelk и @alexalx13
• Вопросы?

More Related Content

PDF
PPTX
Ruby and Ruby on Rails
PDF
Как выжить в условиях сложного продукта. Дарья Прокуда.
PPT
DUMP-2013 - Frontend: Преимущества разработки средствами BEM+Python+node.js
PDF
Об особенностях работы художника, который гипотетически может все
PDF
Автоматизация общения с менеджером, Полина Бынова, JetStyle
PDF
Нарративные игры как метод прототипирования, Алексей Кулаков, UWDC 2015
PDF
Минисервисы или микросервисы в условия цейтнота, Руслан Каримов, UWDC 2015
Ruby and Ruby on Rails
Как выжить в условиях сложного продукта. Дарья Прокуда.
DUMP-2013 - Frontend: Преимущества разработки средствами BEM+Python+node.js
Об особенностях работы художника, который гипотетически может все
Автоматизация общения с менеджером, Полина Бынова, JetStyle
Нарративные игры как метод прототипирования, Алексей Кулаков, UWDC 2015
Минисервисы или микросервисы в условия цейтнота, Руслан Каримов, UWDC 2015

Viewers also liked (8)

PPTX
Интерфейсы для Smart TV #uxsreda
PPTX
CPC-трафик в unit-экономике, Полина Бынова
PPTX
Как создать зарабатывающее приложение, UIN 2014
PDF
Управление - это игра. Алексей Кулаков, JetStyle
PPT
Мобильное приложение для бизнеса: взгляд со стороны разработчика
PDF
Создание нового стиля, дизайна и шрифта для "Батенька, да вы трансформер!"
PPTX
Эволюция корпоративных Web приложений. Молотков Андрей D2D Just.NET
PDF
Битва мух и котлет. Сторителлинг в проектировании взаимодействия.
Интерфейсы для Smart TV #uxsreda
CPC-трафик в unit-экономике, Полина Бынова
Как создать зарабатывающее приложение, UIN 2014
Управление - это игра. Алексей Кулаков, JetStyle
Мобильное приложение для бизнеса: взгляд со стороны разработчика
Создание нового стиля, дизайна и шрифта для "Батенька, да вы трансформер!"
Эволюция корпоративных Web приложений. Молотков Андрей D2D Just.NET
Битва мух и котлет. Сторителлинг в проектировании взаимодействия.
Ad

More from JetStyle (17)

PDF
Исследовательские проекты в жизненном цикле и рутинных процессах компании
PDF
Разработка MVP. Зачем это нужно и как это делать?
PDF
Постановка задачи на сайт. Алексей Кулаков
PDF
Данные на службе бизнеса
PDF
Как узнать о ваших покупателях все?
PPTX
Петли в проектировании интерфейсов, DUMP 2014
PDF
Разработка через тестирование в Python и Django #pyconru
PPT
Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdc
PDF
Илья Седов: Как заставить программу под iOS шевелиться? #uwdc
PDF
Алексей Кулаков: Суеверия vs научный подход в проектировании интерфейсов #uwdc
PPTX
Борис Касавин: Big data для нужд реального российского бизнеса #uwdc
PDF
Алексей Иванов: немного о grunt.js #FrontTalks
PPTX
Александр Устинов: Работа с существующими клиентами (бизнес-завтрак)
PPT
Сергей Наймушин: Управление привлечением новых клиентов (бизнес-завтрак)
PPT
Разработка сайта как создание мультфильма #oseminar
PDF
Алексей Кулаков: Доклад о ненависти к рыбе...и любви к осмысленному тексту
PDF
Алексей Кулаков: Теория ограничений Голдратта #oseminar
Исследовательские проекты в жизненном цикле и рутинных процессах компании
Разработка MVP. Зачем это нужно и как это делать?
Постановка задачи на сайт. Алексей Кулаков
Данные на службе бизнеса
Как узнать о ваших покупателях все?
Петли в проектировании интерфейсов, DUMP 2014
Разработка через тестирование в Python и Django #pyconru
Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdc
Илья Седов: Как заставить программу под iOS шевелиться? #uwdc
Алексей Кулаков: Суеверия vs научный подход в проектировании интерфейсов #uwdc
Борис Касавин: Big data для нужд реального российского бизнеса #uwdc
Алексей Иванов: немного о grunt.js #FrontTalks
Александр Устинов: Работа с существующими клиентами (бизнес-завтрак)
Сергей Наймушин: Управление привлечением новых клиентов (бизнес-завтрак)
Разработка сайта как создание мультфильма #oseminar
Алексей Кулаков: Доклад о ненависти к рыбе...и любви к осмысленному тексту
Алексей Кулаков: Теория ограничений Голдратта #oseminar
Ad

Frontttalks nov2013

  • 1. Justify, от которого не тошнит Алексей Иванов (@iadramelk) и Александр Остапенко (@alexalx13)
  • 5. Типографика 1. mdash.ru 2. Типограф Лебедева 3. Тысячи других
  • 12. Библиотеки для расстановки переносов 1. hyper.js + Словарь переносов 2. hypenator.js 3. http://quittance.ru/hyphenator.php 4. http://quittance.ru/blog/index.php?category=21 - описание алгоритма
  • 17. Правильная настройка переносов 1. Минимальная длина для оставляемого куска 3 символа. 2. Минимальная длина для переносимого куска 3 символа. 3. Не допускается разделение переносами сокращений, набираемых прописными буквами (ВЛКСМ), прописными с отдельными строчными (КЗоТ) и с цифрами (ФАIООО). 4. Переносить последнее слово в абзаце не рекомендуется.
  • 19. Алгоритм Кнута-Пласса Реализация для веба: http://www.bramstein.com/projects/typeset/ • Бокс: Базовый блок текста, у него есть ширина. • Клей: Элемент с изменяемым размером. У него есть три параметра: Базовая ширина, насколько его можно растянуть, насколько его можно сжать. Пример: 1/3, 5/12, 1/12. • Штраф: Место где допустим или недопустим перенос. У него есть ширина и коэффицент штрафа и флаг.
  • 20. Пример разбитого предложения Вошел ямщик просить на водку. 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. box (w(indent)) penalty (0, ∞, false) box (w("вошел")) glue (1em/3, 5em/12, 1em/12) box (w("ямщик")) glue (1em/3, 5em/12, 1em/12) box (w("про")) penalty (w('-'), 100, true) box (w("сить")) glue (1em/3, 5em/12, 1em/12) box (w("на")) penalty (0, ∞, false) glue (1em/3, 5em/12, 1em/12) box (w("водку")) penalty (0, ∞, false) glue (0, ∞, 0) penalty (0, —∞, false) — — — — — — — — — — — — — — — — — параграфный отступ запрет переноса "вошел" пробел "ямщик" пробел "про" мягкий перенос "сить" пробел "на" запрет переноса пробел "водку." запрет переноса пробел а последней строке принудительный перенос
  • 26. Ссылки • Где поиграться: http://github.com/ridero/fronttalks • Когда-нибудь тут будет сервис по подготовке книг к печати: http://ridero.ru • Мы в Твиттере: @iadramelk и @alexalx13 • Вопросы?