Tutorial


In this tutorial we’ll learn how to write (or code) a Superbook using Bubblin’s web-editor.

Using the web editor

Bubblin lets you write books online using its in-browser book playground—a simple code playground—that is powerful enough for short stories, comics, novellas, weekly or biweekly magazines and other miscellaneous items like brochures, greeting cards, restaurant menus etc. Theoretically speaking one could write a full length textbook using the same tool but this is not recommended. For a really long body of work we recommend using Bookiza Abelone, which is a professional book baking tool for the web.

The following tutorial will focus on using the in-browser book editor, or the book playground:

Step - 1: Start a new project

To start a new project, login into your Bubblin Account and click on the new button from the side panel under the Bubblin logo as shown below. Or press ‘⌘ + M’ to open a new manuscript project (See other relevant keyboard shortcuts).





New project

A new project will look something like this: Three large dark colored textareas at the bottom to punch in HTML, CSS and JavaScript for each page of the book. It will also show four empty bluish colored pages (two leafs) that can be navigated using left and right arrow buttons.





Step - 2: HTML structure and Layout

We’re going to construct an HTML wrapper for our pages next. Here’s a quick overview on what each page on the book looks like. 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 inside the template dropdown option as 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 that we’ll come to shortly. 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 a few more words, a little paragraph may be and then we’re ready to go to the next step: that is applying styled to make the content look formatted and 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.