Embed Size (px)
Citation preview
Книги в браузере
Олег Мохов
Зачем?
7
Приложения
Kindle
iBooks
FBReader
Adobe Reader
FuturePress EPUB Reader
10
12
Сделать читалку книг
Сделать читалку книглучшую
Даже бабушка сможет юзать
16
* Межстрочные интервалы, размеры шрифта и отступы
reset.css*
Иллюстрация из книги Яна Чихольда «Облик Книги»
Иллюстрация из книги Яна Чихольда «Облик Книги»
Две страницы
Paged Media
CSS Books
scroll
margin, transition, left, etc
22
Две страницы
Paged Media
CSS Books
scroll
margin, transition, left, etc
23
Две страницы
Paged Media
CSS Books
scroll
margin, transition, left, etc
23
Две страницы
Paged Media
CSS Books
scroll
margin, transition, left, etc
23
Две страницы
Paged Media
CSS Books
scroll
margin, transition, left, etc
23
Две страницы
Paged Media
CSS Books
columns
margin, transition, left, etc
24
columns
http://dev.w3.org/csswg/css-multicol-1/#columns
columns: 2;
Перелистывание страниц
columns: 2;
columns: 2;
columns: 2;
Перелистывание страницы
〉 scroll
〉 CSS (margin, left, transition, etc…)
30
Перелистывание страницы
〉 scroll
〉 CSS (margin, left, transition, etc…)
30
columns: 2;
columns: 1;
columns: 1;
columns: 1;
http://dev.w3.org/csswg/css-multicol-1/#the-multi-column-model
A multicol element is an element whose column-count property is not auto… Multi-column layout introduces a new type of container … the column box or column… Column boxes in a multi-column element are arranged into rows …
columns: 1;
ИИспользован фрагмент передачи КВН, правообладателем передачи является Первый Канал, Россия
ИИспользован фрагмент передачи КВН, правообладателем передачи является Первый Канал, Россия
columns: 1;
columns: 1; width: 200%;
columns: 2; width: 200%;
“Ни единого разрыва”
Разрывы заголовков
-webkit-column-break-inside: avoid; /* webkit */
page-break-inside: avoid; /* firefox */
break-inside: avoid; /* ie10+ */
42
Заголовок
h1 {
margin-bottom: 1em;
}
45
заголовокОднажды в студёную зимнюю
Заголовок
h1 {
padding-bottom: 2em;
}
46
заголовок
Однажды в студёную зимнюю
заголовокОднажды в студёную зимнюю
заголовок
h1 {
padding-bottom: 2em;
margin-bottom: -1em;
}
Однажды в студёную зимнюю
Заголовок
47
заголовокзаголовокОднажды в студёную зимнюю
заголовокзаголовокОднажды в студёную зимнюю
заголовок
Главы
Разрыв страницы
51
Разрыв страницы
-webkit-column-break-after: always;
51
Разрыв страницы
-webkit-column-break-after: always;
page-break-after: always;
51
Разрыв страницы
-webkit-column-break-after: always;
page-break-after: always;
page-break-inside: avoid;
52
Картинки
Иллюстрация из книги «Human Transit: How clearer Thinking about Pulbic Transit Can Enrich Our Communities and Our Lives»
Текст из книги «Human Transit: How clearer Thinking about Pulbic Transit Can Enrich Our Communities and Our Lives»
Картинки
img {
max-width: 100%;
max-height: 100%;
}
57
58
58
div {
position: absolute;
}
img {
max-width: 100%;
max-height: 100%;
}
opacity: 0;
Картинки
img {
max-width: 100%;
max-height: 100%;
}
59
Использован фрагмент передачи КВН, правообладателем передачи является Первый Канал, Россия
И вычислять при ресайзе :(
Зафиксировать размеры
63
64
height: 20px;
64
height: 20px;
height: 100px;
64
height: 20px;
height: 100px;
height: 200px;
64
height: 20px;
height: 100px;
height: 200px;
height: 201px;
65
height: 20px;
height: 100px;
height: 200px;
height: 201px;
max-height: 100%;
66
66
overflow: hidden;
max: 100%
display: flex;
flex-direction: column;max: 100%
68
68
69
70
70
.image-wrapper {
overflow: hidden;
}
71
71
flex-shrink: 0;
display: flex; flex-direction: column; max-height: 100%; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;
display: flex; flex-direction: column; max-height: 100%; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;
flex-shrink: 1; overflow: hidden; background-image: url(..) background-size: contain;
display: flex; flex-direction: column; max-height: 100%; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;
flex-shrink: 1; overflow: hidden; background-image: url(..) background-size: contain;
flex-shrink: 0;
73
Сноски
И ещё
Фичи
79
Фичи
〉 Сохранение позиции при изменении шрифта
79
Фичи
〉 Сохранение позиции при изменении шрифта
〉 Сохранение позиции при переходе к сноске
79
Фичи
〉 Сохранение позиции при изменении шрифта
〉 Сохранение позиции при переходе к сноске
〉Ширина листа в символах и браузерная математика
79
Фичи
〉 Сохранение позиции при изменении шрифта
〉 Сохранение позиции при переходе к сноске
〉Ширина листа в символах и браузерная математика
〉 Примерное время чтения книги
79
80
Использованы кадры сериала «The big bang theory», правообладатель телеканал CBS, США
Использованы кадры сериала «The big bang theory», правообладатель телеканал CBS, США
Сделать читалку книглучшую
Сделать читалку книглучшую
OpenSource is coming…@chitalkajs
Привет, Вадим!
86
Олег Мохов
Разработчик интерфейсов
Контакты
@olmokhov
olmokhov
+7 (912) 621 45 27
Ссылки
Доклад Лёши Иванова про Justify
Спецификация Multicolumn Layout
Спецификация CSS Books
Спецификация Paged Media
87
