Tutorial


Learn how to write a Superbook on web.

Using the web editor

Bubblin allows short storybook writing over the web using its in-browser editor.

It’s a simple web editor (a code playground) that is good enough for creating short to medium length stories, greeting cards, novellas, weekly/biweekly magazines, brochures, restrarent menus or comics, i.e. small sized packages. Theoretically, one could write a full textbook using the editor on web but it is not recommended.

Use Bookiza, the professional manuscript manager to write and build longform Superbooks from your local.

This tutorial focuses on using the former, i.e. in-browser editor:

A simple static book.

Let us begin with the a simple example. It’s fine if you don’t understand everything immediately, we will go into all the basics through this article and learn how to create and publish a Superbook. Superbook here means superclass of books. It is an empty container that holds the pages of your story, which could be anything, a comics book or a magazine or textbook or a greeting card, anything you wish to publish.

Here’s a demo of a live Superbook on production.

Step - 1: Start a new project

This tutorial will assume that you haven’t written any HTML or CSS before or have only limited knowledge of it. We’ll walk through every step of the book making process and there are not many to see as you’ll soon learn. Our book for the purpose of this tutorial will work everywhere — on Android tablets, iPads, Kindle, iPhones, Android phones, FirefoxOS, Windows, Linux, Mac and even the LCD TVs with a web browser.

It can be read offline too, thanks to the power of serviceworkers. 

To start, login into your Bubblin Account and click on the new button from the side_panel as shown below to start a new project,: 

(Or press ‘⌘ + M’ to open the menu on left. See keyboard shortcuts)





A new project will look something like this: with four bluish colored empty leafs and three large textareas at the bottom to type in HTML, CSS and JavaScript each.





Step - 2: Layout

We’re gonna have to construct an HTML wrapper for our pages next. Do not worry if you haven’t written HTML all your life because we’re going to use an HTML template anyway:

Copy and paste the following code into the HTML textarea of the editor (bottom left on screenshot shown above) and also into the template dropdown (show below). Yes, in both the places!:

<div class="leaf flex">
  <div class="inner justify ">
    <h1> Hello world! </h1>
    <p> Lorem ipsum dolor sit amet, <a href="https://wikipedia.com">consectetur</a> adipiscing elite... </p>
  </div>
</div>

Note, we’re using a cool flexbox class here. Awesome!

So now we have a heading text saying “Hello world!” and a bit of lorem ipsum inside a paragraph tag on the first page, but there is no styling. Try adding in a few words, add a little paragraph may be and we’re ready to try the next step: Apply styling to make the contents look pretty.

Go to the template dropdown menu again and click open the CSS option (see below).

Sprinkle the following style rules into the CSS template to apply a layout and typesetting to the book, and hit save.

@import url('//fonts.googleapis.com/css?family=Source+Serif+Pro|Josefin+Sans');

html, 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:focus,
a:active,
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;
}

/* Custom style below line */

Wow. Did you notice what just happened?

When we saved the style rules into the CSS template box, all the pages of the book turn white simulatneously. This is a very powerful feature because it lets us apply a uniform layout across the entire book from just one place. At the same time we get to keep the flexibility of customizing individual pages using the editor.

How cool is that!?





CSS will format the content of your book, add typography in there and position the content i.e heading with “hello world” and paragraphs near the mid-axis of the page. It will also set up a faux margin & padding on either sides of text, both above and below—in a way that your content will always self-organize near the center of the page. Say thank you to flexbox for this!

Stick no more than 2-3 paragraph of text in there and always test/preview your book by clicking the following button:

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 page if the content is about to exceed visual symmetry or simply overflow. Continue adding new pages to your book until the story finishes. New pages will automatically use the CSS and HTML template we just applied.

When your book is ready, hit publish and serve it hot.

That’s it: in just two bold steps your book is now available to anyone on the planet, from Australia to the ISS.