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

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

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

More Related Content

Viewers also liked

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

Viewers also liked (8)

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

More from JetStyle

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

More from JetStyle (17)

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

Frontttalks nov2013

  • 1. Justify, от которого не тошнит Алексей Иванов (@iadramelk) и Александр Остапенко (@alexalx13)
  • 2.
  • 3.
  • 4.
  • 5. Типографика 1. mdash.ru 2. Типограф Лебедева 3. Тысячи других
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12. Библиотеки для расстановки переносов 1. hyper.js + Словарь переносов 2. hypenator.js 3. http://quittance.ru/hyphenator.php 4. http://quittance.ru/blog/index.php?category=21 - описание алгоритма
  • 13.
  • 14.
  • 15.
  • 16.
  • 17. Правильная настройка переносов 1. Минимальная длина для оставляемого куска 3 символа. 2. Минимальная длина для переносимого куска 3 символа. 3. Не допускается разделение переносами сокращений, набираемых прописными буквами (ВЛКСМ), прописными с отдельными строчными (КЗоТ) и с цифрами (ФАIООО). 4. Переносить последнее слово в абзаце не рекомендуется.
  • 18.
  • 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) — — — — — — — — — — — — — — — — — параграфный отступ запрет переноса "вошел" пробел "ямщик" пробел "про" мягкий перенос "сить" пробел "на" запрет переноса пробел "водку." запрет переноса пробел а последней строке принудительный перенос
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26. Ссылки • Где поиграться: http://github.com/ridero/fronttalks • Когда-нибудь тут будет сервис по подготовке книг к печати: http://ridero.ru • Мы в Твиттере: @iadramelk и @alexalx13 • Вопросы?