Книги в браузере, fdconf

Книги в браузере

Олег Мохов

Зачем?

7

Приложения

Kindle

iBooks

FBReader

Adobe Reader

FuturePress EPUB Reader

10

12

Сделать читалку книг

Сделать читалку книглучшую

Даже бабушка сможет юзать

16

https://vimeo.com/82527410

* Межстрочные интервалы, размеры шрифта и отступы

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

mokhov@yandex-team.ru

Ссылки

Доклад Лёши Иванова про Justify

Спецификация Multicolumn Layout

Спецификация CSS Books

Спецификация Paged Media

87