Styling books – Fronteers 15 Jam Session

Transcript

1. Styling books Oleg Mokhov, Fronteers Jam Session
4. Pain
6. Page width
8. ? 8
9. 60-80 characters 9
10. 20px 0 10
11. 20px 0 *60 = 1200px 10
12. https://developer.mozilla.org/en/docs/Web/CSS/length 11
13. 1ch 0 12
14. 1ch 0 *60 = 60ch = 1200px 12
15. Images
19. .page { columns: 2 } 17
20. A cat with a hat A cat without a hat 18
22. img { max-width: 100%; max-height: 100%; } 20
23. img { max-width: 100%; max-height: 100%; display: block; } 21
24. <figure> <img/> <figcaption>text</figcaption> </figure> 22
25. figure { max-height: 100%; -webkit-column-break-inside: avoid; page-break-inside: avoid; } 23
26. figure { display: flex; flex-direction: column; } 24
27. figure { display: flex; flex-direction: column; } 24
28. .image-wrapper { overflow: hidden; } 25
29. .image-wrapper { overflow: hidden; } 25
30. 26 .image-wrapper { background-image: url(…) 50% no-repeat; background-size: contain; }
33. figcaption { flex-shrink: 0; } 28
34. Footnotes
40. Swipe right and go back
43. ::after { content: attr(title); } 35
44. Moar
45. More features Correct indentation of the first lines Page breaks between chapters Position saving based on the first visible paragraph Collecting information about user reading speed Estimated time of book reading 37
46. https://github.com/chitalka/ @chitalkajs
47. 39 Oleg Mokhov Frontend Developer Contacts @olmokhov_en olmokhov +7 (912) 621 45 27 mokhov@yandex-team.ru