HTML book-like pagination
Best HTML/CSS books ?
CSS & HTML book for print - Stack Overflow
Что случилось с htmlbook.ru?
Videos
» npm install htmlbook
Building on Dan's answer here is my solution for this problem, with which I was struggling myself until just now. (this JS works on iOS Webkit, no guarantees for android, but please let me know the results)
var desiredHeight;
var desiredWidth;
var bodyID = document.getElementsByTagName('body')[0];
totalHeight = bodyID.offsetHeight;
pageCount = Math.floor(totalHeight/desiredHeight) + 1;
bodyID.style.padding = 10; //(optional) prevents clipped letters around the edges
bodyID.style.width = desiredWidth * pageCount;
bodyID.style.height = desiredHeight;
bodyID.style.WebkitColumnCount = pageCount;
Hope this helps...
Speaking from experience, expect to put a lot of time into this, even for a barebones viewer. An ePub reader was actually first big project I took on when I started learning C#, but the ePub standard is definitely pretty complex.
You can find the latest version of the spec for ePub here: http://www.idpf.org/specs.htm which includes the OPS (Open Publication Structure), OPF (Open Packaging Format), and OCF (OEBPS Container Format).
Also, if it helps you at all, here is a link to the C# source code of the project I started on:
https://www.dropbox.com/sh/50kxcr29831t854/MDITIklW3I/ePub%20Test.zip
It's not fleshed out at all; I haven't played with this for months, but if I remember correctly, just stick an ePub in the debug directory, and when you run the program just type some part of the name (e.g. Under the Dome, just type "dome") and it will display the details of the book.
I had it working correctly for a few books, but any eBooks from Google Books broke it completely. They have a completely bizarre implementation of ePub (to me, at least) compared to books from other sources.
Anyway, hopefully some of the structural code in there might help you out!
That has:
Exercises (5-10 per chapter) (preferably with solution either in the book itself or somewhere in the internet)
Structured and a proper flow
Explanations with relevant mind touching figures.
I'm not a fan of book with too many projects or projects only focus where you copy paste code and fix errors copying code from stackoverflow more than you learn "how to markup/program".
https://cseducators.stackexchange.com/questions/7538/how-to-actually-learn-while-building-dummy-applications-that-have-already-been-b Like said in the answer, building projects should be done by yourself once your basics are very clear.
What I'm already using or know of?
The Odin Project
Full stack open
MDN docs and RFCs from w3 (my personal favorite)
w3schools, tutorialspoint.....javatpoint,css-tricks,FCC
Books recommendations from reddit:
Jon dockett
Sams teach yourself HTML/CSS and javascript
3)Learning Web Design by Jennifer Niederst Robbins
I can't use jon dockett book because I can't buy it here and it's not very printer friendly. So, recommend an alternative for it.
My level: I'm halfway through a html course. I've a degree in computer engineering(60% cs+40% electronics) form a half decent university and I was a mediocre student there.
This was my solution:
<div id='document'>
<div class='page'>
<div class='header'></div>
<div class='footer'></div>
<div class='content'></div>
</div>
</div>
Everything went in <div id='document'>. For each .page, the .header, .footer, and .content had the right height and width for a page.
After that, I used JavaScript to cut out everything that was overflowing outside the div.content. I then cloned div.page, updated the page number inside of the new page's header <div>, and filled the new page's content <div>.
This was repeated until I had like 100 pages and nothing was sticking out of the last page's content <div>.
I am assuming that you are using pure HTML and there is no code behind.
Because if there is any code behind then its a different story.
Define a main div having class="page". Inside that define 3 divs for header, content and
footer.
.page {
display: block;
height: 800px;
width: 100%;
/*Give margin as per your requirement.*/
}
.header {
display: block;
height: 50px;
}
.content {
display: block:
height: 700px;
}
.footer {
display: block;
height: 50px;
}
Add additional style as per your requirement.
create another style sheet with media type ="print"
There add the following style for page.
.page {
display: block;
height: 800px;
width: 100%;
/*Give margin as per your requirement.*/
/* this will print the page in new paper*/
page-break-after: always;
}
and the HTML for one page will look like this
<div class="page">
<div class="header">HEADER CONTENT</div>
<div class="content"> MAIN PAGE'S CONTENT</div>
<div class="footer"></div>
</div>
Repeat the above code an per the number of page you need.
You can also use table layout for this purpose.
And if you use code behind, then the content can be generated dynamically.
Hope this helps.