Последние полгода я занимался задачей разработки инструмента для чтения книг в браузере. Эта задача оказалась сложнее, чем просто сконвертировать книгу в html и отобразить его, собственно о том, как всё-таки это сделать и будет мой доклад. В частности, я рассмотрю основные проблемы вёрстки и отображения книг в разных браузерах, а также расскажу про некоторые баги специфичных для книг CSS-свойств. Поделюсь некоторыми трюками, которые могут пригодиться вам не только в вёрстке книг, но и в вёрстке вообще. А так же расскажу о том, чего не хватает в браузерах, чтобы чтение книг стало действительно удобным.

3. Книги в браузере
Олег Мохов

4. Зачем?

7. 7

10. Приложения
Kindle
iBooks
FBReader
Adobe Reader
FuturePress EPUB Reader
10

12. 12

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

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

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

17. 16

18. https://vimeo.com/82527410

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

21. Иллюстрация из книги Яна Чихольда «Облик Книги»

22. Иллюстрация из книги Яна Чихольда «Облик Книги»

23. Две страницы
Paged Media
CSS Books
scroll
margin, transition, left, etc
22

24. Две страницы
Paged Media
CSS Books
scroll
margin, transition, left, etc
23

25. Две страницы
Paged Media
CSS Books
scroll
margin, transition, left, etc
23

26. Две страницы
Paged Media
CSS Books
scroll
margin, transition, left, etc
23

27. Две страницы
Paged Media
CSS Books
scroll
margin, transition, left, etc
23

28. Две страницы
Paged Media
CSS Books
columns
margin, transition, left, etc
24

29. columns
http://dev.w3.org/csswg/css-multicol-1/#columns

31. columns: 2;

32. Перелистывание страниц

33. columns: 2;

34. columns: 2;

35. columns: 2;

36. Перелистывание страницы
〉 scroll
〉 CSS (margin, left, transition, etc…)
30

37. Перелистывание страницы
〉 scroll
〉 CSS (margin, left, transition, etc…)
30

38. columns: 2;

39. columns: 1;

40. columns: 1;

41. columns: 1;

42. 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 …

43. columns: 1;

44. Использован фрагмент передачи КВН, правообладателем передачи является Первый Канал, Россия

45. Использован фрагмент передачи КВН, правообладателем передачи является Первый Канал, Россия

46. columns: 1;

47. columns: 1;
width: 200%;

48. columns: 2;
width: 200%;

49. “Ни единого разрыва”

51. Разрывы заголовков
-webkit-column-break-inside: avoid; /* webkit */
page-break-inside: avoid; /* firefox */
break-inside: avoid; /* ie10+ */
42

55. Заголовок
h1 {
margin-bottom: 1em;
}
45
заголовок
Однажды в студёную зимнюю

56. Заголовок
h1 {
padding-bottom: 2em;
}
46
заголовок
Однажды в студёную зимнюю
заголовок
Однажды в студёную зимнюю
заголовок

57. h1 {
padding-bottom: 2em;
margin-bottom: -1em;
}
Однажды в студёную зимнюю
Заголовок
47
заголовокзаголовок
Однажды в студёную зимнюю
заголовокзаголовок
Однажды в студёную зимнюю
заголовок

58. Главы

61. Разрыв страницы
51

62. Разрыв страницы
-webkit-column-break-after: always;
51

63. Разрыв страницы
-webkit-column-break-after: always;
page-break-after: always;
51

64. Разрыв страницы
-webkit-column-break-after: always;
page-break-after: always;
page-break-inside: avoid;
52

65. Картинки

66. Иллюстрация из книги «Human Transit: How clearer Thinking about Pulbic Transit Can Enrich Our Communities and Our Lives»

67. Текст из книги «Human Transit: How clearer Thinking about Pulbic Transit Can Enrich Our Communities and Our Lives»

69. Картинки
img {
max-width: 100%;
max-height: 100%;
}
57

70. 58

71. 58
div {
position: absolute;
}
img {
max-width: 100%;
max-height: 100%;
}
opacity: 0;

72. Картинки
img {
max-width: 100%;
max-height: 100%;
}
59

73. Использован фрагмент передачи КВН, правообладателем передачи является Первый Канал, Россия

74. И вычислять при ресайзе :(
Зафиксировать размеры

77. 63

78. 64
height: 20px;

79. 64
height: 20px;
height: 100px;

80. 64
height: 20px;
height: 100px;
height: 200px;

81. 64
height: 20px;
height: 100px;
height: 200px;
height: 201px;

82. 65
height: 20px;
height: 100px;
height: 200px;
height: 201px;
max-height: 100%;

83. 66

84. 66
overflow: hidden;

85. max: 100%

86. display: flex;
flex-direction: column;
max: 100%

87. 68

88. 68

89. 69

90. 70

91. 70
.image-wrapper {
overflow: hidden;
}

92. 71

93. 71
flex-shrink: 0;

95. display: flex;
flex-direction: column;
max-height: 100%;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;

96. 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;

97. 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;

98. 73

99. Сноски

106. И ещё

107. Фичи
79

108. Фичи
〉 Сохранение позиции при изменении шрифта
79

109. Фичи
〉 Сохранение позиции при изменении шрифта
〉 Сохранение позиции при переходе к сноске
79

110. Фичи
〉 Сохранение позиции при изменении шрифта
〉 Сохранение позиции при переходе к сноске
〉 Ширина листа в символах и браузерная математика
79

111. Фичи
〉 Сохранение позиции при изменении шрифта
〉 Сохранение позиции при переходе к сноске
〉 Ширина листа в символах и браузерная математика
〉 Примерное время чтения книги
79

112. 80

113. Использованы кадры сериала «The big bang theory», правообладатель телеканал CBS, США

114. Использованы кадры сериала «The big bang theory», правообладатель телеканал CBS, США

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

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

118. OpenSource is coming…
@chitalkajs

119. Привет, Вадим!

120. 86
Олег Мохов
Разработчик интерфейсов
Контакты
@olmokhov
olmokhov
+7 (912) 621 45 27
mokhov@yandex-team.ru

121. Ссылки
Доклад Лёши Иванова про Justify
Спецификация Multicolumn Layout
Спецификация CSS Books
Спецификация Paged Media
87