Creating an e-book. Part 3.

Continuing the series about how to create an e-book. Today we’ll have a much shorter post. Specifically, we’ll look at how to create the Title page.

So, what is a Title Page? According to dictionary.com, Title Page is: “the page at the beginning of a volume that indicates the title, author’s or editor’s name, and the publication information, usually the publisher and the place and date of publication.”

If you’ll search Google Images for “title page”, you see lots of examples of how a Title Page looks like. And, it seems to be the easiest to create. Technically speaking, a bunch of paragraphs and that’s it.

Ok, following dictionary.com’s description, let’s create our Title Page. We will need the following:

  • Book title: I will use “My Book’s Title”
  • Author name: this is simple, “Vitalie Ciobanu”
  • Publisher info: I do not have one so I will use “Lorem Ipsum Publishing Inc.”
  • Place and date of publication: “Madagascar 2018”. I still want to visit this island…

Open mybook.html page in Notepad and add above details right before your first chapter (which should be <h2> tag); each detail on different row and inside a paragraph element (<p></p>). Here is my <body> element now (trimmed):

[code language=”html”]
<body>My Book’s Title

Vitalie Ciobanu

Lorem Ipsum Publishing. All rights reserved.

Madagascar 2018
<h2>Lorem Ipsum</h2>
<h3>What is Lorem Ipsum?</h3>
<p class="first">Lorem ipsum dolor sit….</p>
<p class="quote">Nullam tortor orci…..</p>

Curabitur ligula tortor, ullamcorper….

</body>
[/code]

And here’s my page viewed in a browser:

Because we have p selector defined in our stylesheet file, you see above we have some formatting applied already. Let’s add additional selectors to the stylesheet to make Title page information differently looking. So, let’s add some different formatting for book title, author, publisher and date of publication. Here’s just some basic CSS added to my epub.css file:

[code language=”css”]
p.booktitle {
    text-indent:0em;
    text-align:center;
    margin-top:5em;
    font-weight:bold;
    font-size:150%;
}

p.bookauthor {
    text-indent:0em;
    text-align:center;
    margin-top:1em;
    font-weight:bold;
    font-size:130%;
}

p.bookpublisher {
    text-indent:0em;
    text-align:center;
    margin-top:3em;
    font-weight:bold;
    font-size:100%;
}

p.bookpublished {
    text-indent:0em;
    text-align:center;
    margin-top:1em;
    font-weight:bold;
    font-size:100%;
}
[/code]

For each selector I wanted no indentation so I added “text-indent:0em”. Also, everything is centered and bold. Font size is different, with Book Title being the biggest one, 150%em. Lastly, I added different top margins to visibly separate each line. Afterwards, I updated the class details on my newly added paragraphs in html file.

[code language=”html”]
<body>
<p class="booktitle">My Book’s Title</p>
<p class="bookauthor">Vitalie Ciobanu</p>
<p class="bookpublisher">Lorem Ipsum Publishing. All rights reserved.</p>
<p class="bookpublished">Madagascar 2018</p>

<h2>Lorem Ipsum</h2>
<h3>What is Lorem Ipsum?</h3>
<p class="first">Lorem ipsum dolor sit….</p>
<p class="quote">Nullam tortor orci…..</p>

Curabitur ligula tortor, ullamcorper….

</body>
[/code]

Here’s the updated view in browser.

Creating an e-book. Part 2.

Following on from previous post about creating an e-book, today we will make that “black on white” text look nicer and we will do it using CSS (Cascading Style Sheets).

I will not detail on what CSS is because this is not the purpose of this post. If you need to refresh your knowledge, please head over to W3School’s page.

Very shortly though, CSS helps HTML look nicer and it does so by defining how each HTML element should be displayed in a browser.

By now, we know that an e-book is basically HTML. Plain HTML documents can be read by most browsers in the same way, which is not the case about e-books. Because e-books can be read on e-readers, computers, tablets, phones etc., screen sizes will differ, same will font size, page width etc. With this in mind, we need to ensure that we use relative sizes and not sizes in pixel (PX); so we’ll use either percentage (%) or em (EM).

    Quoting W3Schools: What is the difference between PX, EM and Percent?

Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16). Look at CSS Units for more measurement units.

Again, very shortly, 1em equals to current device’s font size, 100%. 1.5em will be 150% of current font size. 2em will be 200%…, you got the idea.

Although we can add CSS properties and selectors inside .html file, we will create a separate .css file and will link it from .html file. This way, you can very easily use same CSS file as template for other books, instead of copy/pasting specific text from inside .html file.

OK, let’s open a blank notepad file and save it as epub.css in the same folder where mybook.html. Let’s add one additional line to our .html file so that it knows where to look for this .css file.

Right click mybook.html file and open it with notepad. Add one new line after <meta> and before <title> tags and add: <link rel=”stylesheet” href=”epub.css” />

[code language=”html”]
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="epub.css" />
<title>My Book’s Title</title>
[/code]

As mentioned previously, out of all HTML tags, we will use Headings and Paragraphs the most in any e-book, throughout the entire book. Let’s then start with defining Headings because we need them for Chapter titles and subtitles. Again, using CSS we can design our HTML to look awesome and each of you will have your own definition of awesome and, why not, design skills, which I surely lack.

Let’s say in our e-book we want Chapter Title to be 1) aligned to the right and 2) have an additional 2 free lines from the previous block of text. To accomplish all this, in our epub.css file we will write below code for h2:

[code language=”css”]
h2 {
text-align:right;
margin-top:2em;
}
[/code]

Save .css file and leave it open. Now open mybook.html in a browser. See how our Chapter Title changed from left to right and the space before and after it? Just to show you how easy it is to change something using CSS, let’s say we want Chapter Title to be in red… in epub.css add color:red; text on the next line after margin-top:2em;. Save the file and then refresh html file in your browser. Your title should now be in red.

Now think about it a little. What if you would have a book with hundreds of pages, with hundreds of Chapter Titles? With one line added the CSS file, you changed the look of all Chapter Titles. How cool is that?! Let your imagination flow and modify your CSS file as you wish to make your e-book look great!

Ok, before going on, let’s remove the line with red color, unless you want to leave it of course.

Regarding Chapter Subtitles, let’s say we want them also 1) right-aligned but 2) style should be italic. Below is the code to make this happen:

[code language=”css”]
h3 {
text-align:right;
font-style:italic;
}
[/code]

Regarding paragraphs, as you recall, I added 3 paragraphs in my .html file; I did this because I wanted to show you 3 different examples of paragraphs modified through CSS styles. So, let’s make all default paragraphs justified, first line indented by 2em, without any margins on left or right (because we want to use as much space as possible) but we do want to have a little bit of size before next paragraph starts. Here’s how we can accomplish this:

[code language=”css”]
p {
text-indent:2em;
text-align:justify;
margin:0em;
margin-bottom:0.25em;
}
[/code]

Next, we will also use a paragraph but with a purpose. For example, when we will want to quote something or add few lines of text that is totally different from other paragraphs etc. We’ll make it center aligned, italic and will add some space before and after so that it is visible and distinguished.

[code language=”css”]
p.quote {
text-align:center;
margin-top:0.5em;
margin-bottom:0.5em;
font-style:italic;
}
[/code]

In the above code you will notice a small addition to our CSS style. By adding p.quote, we’re just specifying that any paragraph with quote
class, should have these additional changes applied (for example, if we will not add text-align:center;, this paragraph will remain justified because this is what text-align for all paragraphs says).

If you’re more curious… similarly, if you will add only .quote for example, that means any HTML tag where you will add quote class will have those changes applied.

Seems easy and straightforward to me. Again, think about how easy you can modify an entire book?! You can take same .html file and only make changes in the CSS file to get a completely different book. Think about how easy you can create books for readers with low vision, blindness or visual impairments! Try and play with the menu from W3Schools and you’ll be amazed of what you can do with CSS.

For last paragraph mainly I want to make you interested in “what else can I do easily?”. Let’s modify only first paragraph in any chapter so that it has a visual delimiter from Chapter Subtitle.

[code language=”css”]
p.first {
margin-top:1em;
}
[/code]

At this point, I have defined my 3 paragraphs like this: First is first obviously; Second is a quotation-like and Third is just a normal paragraph. Here is my html code inside <body> tags (I’ve cut the text in code to make it shorter but it is visible in the screenshot in its full width):

[code language=”html”]
<body>
<h2>Lorem Ipsum</h2>
<h3>What is Lorem Ipsum?</h3>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="quote">Nullam tortor orci, dictum id vulputate ut, sagittis vel arcu.</p>
<p>Curabitur ligula tortor, ullamcorper placerat commodo eu, efficitur ut dui.</p>
</body>
[/code]

Here’s my webpage in IE:

Creating an e-book. Part 1.

As explained in Ok, E-Books post, this topic became of an interest just recently. I have never created an e-book so you will not see me saying that I’m usually doing it this way or that way or other crap like this. No, cards on the table. I’m just as curious as you are about e-books; I read quite a few online articles and even bought an e-book about how to create an e-book…

Following that book I was able to turn one of my procedure document from work into a fully working e-book. I uploaded it to Amazon’s Kindle Direct Publishing and it din’t complain at all. At KDP I reached the step where I could download a sample book file to see how it will look like. So, it works. fine In these series of posts, I’m just trying to put down the steps needed to create a simple e-book in .epub format. You’ll be free to further enhance it as much as your design and HTML skills are.

Just so this is clear from the beginning, an e-book is just a transformed XHTML, CSS and XML files. Because few people may not know what XHTML is, I quickly wrote HTML vs XHTML post yesterday. Regarding XML, I will show you later what it is for and how to create it.

Before we start, I’d like to tell those few basic HTML tags that we will use. I want you to understand  them, not just using them blindly.

  • Headings are defined with the <h1> to <h6> tags, with <h1> being the biggest heading and <h6> the smallest. Headings are really-really important because they will define your book’s Table of Contents. We will not use <h1> for Book Title mainly because we don’t need Book Title in the Table of Contents; we will use <h2> for Chapter Titles and <h3> for Chapter Subtitles.
  • A paragraph is defined using <p> tag only. We’ll see later how we can have differently formatted paragraphs using CSS.
  • We will also use <div> tag for other HTML elements, specifically when we will want to define specific blocks or divisions of text.
  • We will also use CSS a lot to format different blocks of text and images.

With that said, let’s get started.

  1. First and foremost, you need to write something. An article, a novel, something. Or take any document that you can test with. Format doesn’t matter now, it can be a text file, word file, anything.
  2. Again, we’ll use XHTML Strict so our html file will be well formatted. Initial code is nothing fancy, just basic html code. Copy below code to a notepad file and save it as mybook.html in a new folder [leave notepad file open]. Below is what I have so far in my file. Note that I added “My Book’s Title” as a page title, see line 7.

    [code language=”html” highlight=”7″]
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>My Book’s Title</title>
    </head>

    <body>

    </body>
    </html>
    [/code]

  3. Suppose you have your manuscript by hand. To start with, copy the contents of one chapter only and paste it exactly inside the <body> tag. Save the file.

    [code language=”html”]
    <body>
    Paste your first Chapter here.
    </body>
    [/code]

  4. Go to the folder where you have mybook.html file and double click it so that it opens in your default browser.
  5. For testing purposes, I used www.lipsum.com website to generate 3 paragraphs of dummy text. I placed this text inside the <body> tag and saved the file. If I run mybook.html now, my browser will show nothing except clear text; no breaks, no new lines, nothing.
    This is because we need to tell our browser where to start a new line, a new paragraph, where to put a heading and so on. This is done using tags described in the beginning.
  6. Next, we’ll add your chapter’s title and paragraphs. Going back to your notepad file, right where your chapter title begins, add <h2> tag. Where your chapter title ends, add </h2>. Backslash key is to tell the browser that here we are closing the previously opened tag, <h2> in our case.
    Now, if you have chapter subtitles, do something similar. Right before your chapter subtitle starts, add <h3> tag. Where your chapter subtitle ends, add </h3>.
    Similarly, where your paragraph starts, add <p> tag. Where your paragraph ends, close the tag with </p>. Do the same for all other paragraphs you have. Save the file and run it again in your browser. Looks nicer, isn’t it? Here’s what I have:As you can see, there seems to be a default space between chapter title, subtitle and the paragraphs. Also, everything is left centered and there are no other formatted elements. This is what we will work on in the next post.