Daniel Glazman: Ebook pagination and CSS |
Let's suppose you have a rather long document, for instance a book chapter, and you want to render it in your browser `a la iBooks/Kindle. That's rather easy with just a dash of CSS:
body { height: calc(100vh - 24px); column-width: 45vw; overflow: hidden; margin-left: calc(-50vw * attr(currentpage integer)); }
Yes, yes, I know that no browser implements that attr()
extended syntax. So put an inline style on your body for margin-left: calc(-50vw *
where
is the page number you want minus 1.
Then add the fixed positioned controls you need to let user change page, plus gesture detection. Add a transition on margin-left to make it nicer. Done. Works perfectly in Firefox, Safari, Chrome and Opera. I don't have a Windows box handy so I can't test on Edge.
http://www.glazman.org/weblog/dotclear/index.php?post/2016/01/16/Ebook-pagination-and-CSS
Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |