How to write a superbook

Well, hello there. In this article we’re going to see how to write a Superbook.

If you don’t know what a Superbook is then see this demo first. Like it? Great! Let’s get straight to writing and publishing one then. This tutorial will assume that you have never written any HTML or CSS in your life before or have very little idea about what it is.

Don’t worry, we’ll walk through each step and get you going on an awesome new book project quickly. Good news is, it’s very simple.

There are only four steps to follow that will produce a responsive professional e-book on web that your readers will simply love. A book that is supported everywhere — on Android tablets, iPads, Kindle, iPhones, Android phones, FirefoxOS, Windows, Linux, Mac or simply TVs — and can also be read offline. You can sell it online too with Stripe Connect, but that will be explained in a later post.

So let’s get started.

Step One – New Project

First, login into your Bubblin account and click open a new project from the side panel. If you haven’t signed up already do so now before going further into this article.

Once logged in click on the Bubblin’s logo (Tiger Eye) or press ‘⌘ + M’ to slide out a menu from the left. Windows users may use ‘CTRL + M’ instead.

A new project will look something like this:


Four bluish pages (two leaves) with three large textareas at the bottom to type in HTML, CSS and JavaScript respectively will show up.

We’re gonna have to construct an HTML wrapper for our pages. Do not worry you don’t have to write HTML yourself (but you can if you want to!). Consider the following:

Here, paste the following code into the HTML textarea:

<div class="leaf flex">
<div class="inner justify ">
<h1> Hello world! </h1>
<p> Lorem ipsum dolor sit amet, <a href="">consectetur</a&gt; adipiscing elite… </p>

view raw


hosted with ❤ by GitHub

It is using a cool flexbox class. Awesome!

So now you’ll have a heading saying “Hello world!” and a bit of  a lorem ipsum text inside a paragraph tag. Try typing in a few words there, add a paragraph may be.

Good? Next we’ll make this HTML our superbook template so that we don’t have to copy-pasta it each time we want to add a new leaf (Two pages) to the book.

Go to the Template dropdown menu and click open the HTML option (see below).


Throw in the HTML we got, click save, and Bubblin is now ready to magically add our HTML in the new pages of our book. Yay!

Step Two – Styling with CSS

Now that we have HTML out of the way we need to sprinkle some style into our book — i.e. give it a layout and typeset it. Enter CSS.

CSS is nothing but a set of simple design rules for your text (book). It stands for Cascading Style Sheets. Copy the following style rules and paste it inside the CSS option of the Template dropdown menu:

@import url('//|Josefin+Sans');
body {
background: #fff;
margin: 0 0;
overflow: hidden;
color: #444;
font: 3.6vw/1.2 'Source Serif Pro', serif;
h1 {
margin: 1vw 0;
padding: 0;
color: #666;
font-size: 6vw;
font-family: 'Josefin Sans', sans-serif;
width: 100%;
text-align: center;
p {
margin: 3vw 0;
img {
border: 0;
-ms-interpolation-mode: bicubic;
a {
color: #0077ff;
outline: 0 none;
text-decoration: none;
text-rendering: optimizelegibility;
a:hover {
outline: 0 none;
text-shadow: 0 0 2px #0cf;
a:active {
text-shadow: 0 0 2px #fff;
/* Page specific */
.leaf {
height: 100%;
height: 100vh;
width: 80%;
margin: auto;
.inner {
margin: 12% auto;
width: 100%;
.flex {
display: -webkit-box;
display: flex !important;
align-items: center;
justify-content: center;
.justify {
text-align: justify;
/* Your custom styles below */

view raw


hosted with ❤ by GitHub

Wow. Did you notice what just happened?



It altered the typography in there and positioned the heading “hello world” in the middle of the page. It also set up appropriate margins on either sides of text — in a way that your content will organize itself.

Add no more than 2-3 paragraph of content in there and the book will auto-position the text centrally along the page – both vertically and horizontally. Live preview or full static preview (on a separate tab) can be seen by clicking the following link:


Do not cram in too much content on just one page,  stick to just two mid-sized paragraphs or three small ones at most. Flip over to the next content is about to overflow.

You’re all set for the whole book now.

Note: When you paste in style into the Template CSS option you’ll see that all of the pages will turn from default bluish color to white as soon as you hit save. This is a very powerful feature because it lets you apply layout to the entire book from just one place but at the same time gives flexibility to customize individual pages independently!

Step 3: Templates & Book Types

Finally, a consideration to what books can look like and the corresponding  starting point. For example, it could be a comics. Or a fashion magazine. Or simply ABC for babies.

Whatever it is that you’re plotting  you should be able to find a FREE template out there for that. I recommend to use lightweight web-compatible serif fonts hosted off Google or elsewhere to add flavorful typography to your book. Once you get comfortable with CSS & HTML, you might want to consider using JavaScript for a bit more advanced use cases.

That’s it. That is how I usually write my books, but more often than not I use bookiza.

P.S.: Well now it’s time to reveal the surprise: There is no fourth step!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: