Nicely done! We've been using a very similar setup at the Dutch public library for the last many years - e.g. https://www.bibliotheek.nl/catalogus/titel.263072924.html/th... - complete with thickness based on number of pages (though only in three steps) - but it took a lot of tinkering to get the CSS down to something relatively clean. Great job making something like this accessible to everyone with a handy tool like this!
One trick we're using which you might care to copy over (and improve upon) is a linear gradient to fake the pages. I think for thin books, I prefer your white version, but for thick books, it feels pretty sterile.
Nice work. It looks like the book thickness isn't corrected for rotation angle. If you made the horizontal width of the inside pages = thickness * sin(rotation angle) it'll be zero when laying flat and full thickness when rotated 90 degrees.
Very cool. The rule for class "book" is missing a border-radius as far as I can tell.
Test: set color to e.g. pink, increase radius to maximum value, see that the front image gets cropped but the pink area behind it is not. The backside of the book has a border-radius by the way.
Edit: might be nice to only apply it to the right-hand side as the side with the spine is unlikely to have rounded corners.
For some reason the Width parameter is working weirdly in Firefox on Android. Dragging the slider halfway resizes the book to become larger than the whole screen.
Screenshot: https://9gag.com/gag/aLwvLY6 (because I don't have accounts elsewhere)
Same for Firefox on desktop. The book gets too wide to fit in its row, and moves down. This causes the controls to change their size as well, which then starts breaking things.
Would it be possible to add a different set of parameters that describe the physical book instead? What I mean is specifying the page size in some standard way (e.g. A3 or letter size) and the number of pages and let the algorithm decide the parameters of book thickness (in pixels) automatically.
This is nice work and furthermore I would also like to commend the author for the elegant way of integrating marketing of their own book that they are writing into it.
This is really nice. I have a personal book library app too, also in PHP/MySQL, though as a former library employee I ended up focusing more on cataloguing and checkout. (I import from the Library of Congress API rather than Amazon, for example.)
Also, I wrote a bunch of me-specific hacks and am still working on patching all those out (ten years later, lol) with the intention of making it usable to others and publishable as a Sandstorm app.
I'm also still in the process of open sourcing it, mostly for some of the same reasons you mentioned. Right now my library-specific code is open sourced but the core framework I built it on top of is not yet: I've only recently begun modernizing the security code.
I would love to see your code someday if you ever get around to sharing it though!
Well each page is 100mic roughly for 80gsm paper which is pretty standard. So if you did something like a 200 page book that is 20mm's which at 72 dpi roughly 54px's or roughly 27px's for a 100 page book.
That's excluding any cover page, which heavily depends on binding/hard cover/what ever else.
It’s totally feasible, but cover generator is a lot of complexity to add: you want to be able to move the text, resize it, change the color, add some other text, etc.
Many websites are doing it a lot better than I can (in a weekend), but it’s definitely something that I would do in the future.
That is quite impressive. Setting the perspective to 0 made the cover look like it was a front on shot but I could still see the side of the book which looks strange to me. Still nice though.
edit: please take this as a helpful suggestion and not a criticism. I still really like the work you've done.
Thanks! Yes in CSS the perspective set to 0 basically removes all perspective (but for the pages it’s a different element in perspective, this is why you can still see it ;))
This is awesome, thanks for sharing! Would've been great for my latest release, https://music101.press/, but I'll definitely use it for the next book I release
This might just be tangentially related, but I recently built a css booklet that has turnable pages for my personal website https://andykais.com/moleskine
Thanks! That’s on my to do list! For now the best I can suggest is to make a screenshot (not ideal, especially because you don’t get a transparent background…).
One trick we're using which you might care to copy over (and improve upon) is a linear gradient to fake the pages. I think for thin books, I prefer your white version, but for thick books, it feels pretty sterile.