Booki Blog

So last week we finished the Freedom Fone Book Sprint. Olaf, Laleh and Lynne were there working on design and tech implementation of design. Working together they pushed the current booki css a bit further to do some cool stuff. you can see the results here:

http://objavi.booki.cc/books/freedomfone-en-2011.12.05-10.50.21.pdf

note the use of images for section breaks.

Section 1 header for Freedom Fone book. Achieved with CSS.

This can be achieved by css like this:

#section-1 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/01_whatisff.png) no-repeat  center center;
}

the entire css is included below for your hackery resuse and inspiration

@font-face{
 src: url("http://www.freedomfone.org/booki/AllumiPtf-Bold.otf");
 font-family:AllumiPtf;
}
body {
 font-family: "fontin sans";
 background: #fff;
 color: #000;
 font-size:12pt;
} 

.objavi-chapter{
 color: #000;
 display:none;
} 

a {
 text-decoration:none;
 color:#000;
} 

h1 .initial{
 color: #000;
 display:none;
} 

ol#InsertNote_NoteList{
page-break-before:always;
font-size:8pt;
} 

.objavi-subsection{
 display: block;
 page-break-before: always;
} 

body .objavi-subsection:first-child{
 page-break-before: avoid;
} 

.objavi-subsection .initial {
 color: #000;
 display:none;
} 

.objavi-subsection-heading {
 font-size: 20pt;
 text-align: center;
 line-height: 300px;
 font-weight: normal;
} 

h1 {
 page-break-before: always;
 font-weight:normal;
 margin-top:10px
} 

h2 {
 margin-bottom:-10pt;
 font-weight:normal;
 font-size:15pt;
} 

h3 {
 margin-bottom:-10pt;
 font-weight:normal;
 font-size:12pt;
 font-style:italic;
} 

table {
 float: none;
} 

h1.frontpage{
 page-break-after:always;
 margin-top:70%;
 font-size: 20pt;
 text-align: center;
 page-break-before: avoid;
 max-width: 700pt;
 font-weight: normal;
} 

div.copyright{
 padding: 1em;
}
/* TOC ******************************/
table {
 float: none;
} 

table.toc {
 font-size: 1.1em;
 width: 95%;
} 

table.toc td{
 vertical-align:top
 padding-left: 0.5em;
} 

td.chapter {
 padding: 0 0.5em;
 text-align: right;
} 

table.toc td.pagenumber {
 text-align: right;
 vertical-align:bottom;
} 

td.section {
 padding-top: 1.1em;
 font-weight: bold;
}
/* End TOC **************************/ 

p, ul, ol {
 page-break-inside: avoid;
} 

pre, code, tt {
} 

pre {
 max-width:700px;
 overflow: hidden;
} 

img {
 max-width: 500px;
 height: auto;
} 

.objavi-no-page-break {
 page-break-inside: avoid;
} 

.unseen{
 z-index: -66;
 margin-left: -1000pt;
} 

body{
 font-size:12pt;
 color:#000;
 font-family:"Fontin Sans";
 line-height:16pt;
}
sup{
 vertical-align:text-top;
 font-size:0.7em;
}
a{
 color:#000 !important;
 text-decoration:none
} 

h1, h2, h3{
 color:#666;
 margin:0;
 padding:0;
 font-weight:normal !important;
 text-decoration:none !important;
 line-height:normal;
 font-family:AllumiPtf !important;
 text-transform:uppercase; 

}
h1{
 font-size:24.3pt;
}
h1+p{
 padding-top:20pt;
 margin-top:0;
}
h2{
 font-size:14pt;
 padding-top:20pt;
}
h2+p{
 padding-top:10pt;
}
h3{
 font-size:9pt;
 padding-bottom:5pt;
}
h3+p{
 margin-top:0;
}
p+h3{
 padding-top:10pt;
}
ul{
 list-style-image:url(http://www.freedomfone.org/booki/images/bullet.png);
 list-style-position:outside;
 margin-left:-25px;
}
ol{
 margin-left:-25px;
}
li{
 padding-left:5.5mm;
}
.starred{
 padding-left:50px;
 background-image:url(http://www.freedomfone.org/booki/images/star.png);
 background-repeat:no-repeat;
 background-position:center left;
 font-weight:bold;
 min-height:40px;
}
.speechBox{
 padding:5mm;
 padding-top:0;
 background:#ebebeb  url(http://www.freedomfone.org/booki/images/boxBottom.png) no-repeat  bottom right;
 padding-bottom:60px;
 margin-bottom:-55px;
}
.breakPage{
 page-break-before:always;
}
.speechBox:before{
 background:#ebebeb  url(http://www.freedomfone.org/booki/images/boxTop.png) no-repeat top left;
 height:44px;
 content:" ";
 display:block;
 margin:-5mm;
 margin-bottom:5mm;
}
.objavi-subsection-heading{
 height:860px;
 font-size:0px;
 display:block;
}
#section-1 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/01_whatisff.png) no-repeat  center center;
}
#section-2 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/02_realworld.png) no-repeat  center center;
}
#section-3 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/03_scenarios.png) no-repeat  center center;
}
#section-4 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/04_creatingservice.png)  no-repeat center center;
}
#section-5 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/05_settingup.png) no-repeat  center center;
}
#section-6 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/06_techstuff.png) no-repeat  center center;
}
#section-7 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/07_gettinghelp.png)  no-repeat center center;
}
#section-8 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/08_troubleshooting.png)  no-repeat center center;
}
#section-9 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/09_appendices.png) no-repeat  center center;
}
#section-10 .objavi-subsection-heading{
 background:#fff  url(http://www.freedomfone.org/booki/images/10_notes.png) no-repeat  center center;
}
.page{
 font-size:15pt;
 color:#666;
 font-weight:bold; 

}

Two lessons ago, we looked at applying styles to paragraphs, this lesson we will look at changing how these styles appear when we export our books. And of course we will be using CSS to do it all.

To keep things simple, we will focus on the Normal <p> element and the heading <h1> to <h6> elements. Each of these elements associated with our paragraph styles has the same properties that can be adjusted using CSS. There are a lot of properties an element can have, but in this tutorial we will look at two text properties, text-align and color.

CSS Recap

First a recap – a CSS declaration starts with a selector (this is the element whose properties we want to adjust), and is followed by a declaration (a list of one more properties followed by a value that we want to set the property to). To make changes to the CSS of a book, go to the book’s Export tab, click on Show advanced options and then set CSS mode to Custom. Changes are made in the Custom CSS text panel.

To set the text-align property for an element use the following notation:

h1 { text-align:center; }

As you can see at the beginning of the rule we set the element we want to adjust (h1). The declaration used to adjust the style of our element is enclosed in braces ( { } ). The property we want to change, text-align is separated from the value we want to change it to, center by a colon (:). Finally the declaration finished with a semi-colon (;).

Every declaration ends in a semi-colon and all declarations are enclosed between the two braces. In the above example the entire rule is placed on one line, to aid human readibilit of CSS sheets, especially when there is more than one declaration, a rule is often split over several lines as follows:

p {
text-align:center;
color:red;
}

Basic Text Properties

text-align
As it’s name implies, text-align adjusts the alignment of the element. There are 4 basic values for this property: left, center, right, justify. these all apply the same settings as we covered in Tutorial #15: Paragraph Formatting.

color
This property sets the colour of the text for an element, the values used can take many forms: For common colours you can use their names, e.g. blue, red, green, black. For a complete list of predefined colour names visit http://www.w3schools.com/css/css_colornames.asp; For more comeplex colours you can use Hexidecimal, RGB or HSL colour notations. Hexadecimal defines a colour value using: #RRGGBB, where RR, GG, BB are values between 00 and FF representing levels of the three primary colours. RGB defines a colour using: rgb(red, green, blue), the parameters red, green, blue are specified by a number from 0 – 255 or a percentage from 0% – 100% and represent levels of the three primary colours present in the text colour. HSL defines a colour using: hsl(hue, saturation, lightness), hue is a value between 0 and 360 (o or 360 give red, 120 gives green and 240 is blue); saturation is a value from 0% – 100% and represents the level of the colour defined with hue (0% gives grey while 100% gives the colour’s full intensity); lightness is also a percentage from 0% – 100% and defines the amount of light in the colour (0% gives black, 100% gives white and 50% gives the full colour defined with hue and saturation).

The following rules all give the same colour to h1:

h1{color:green;}

h1{color:#00FF00;}

h1{color:rgb(0,255,0;}

h1{color:rgb(0%,100%,0%;}

h1{color:hsl(120,100%,50%;}

h1 {
text-align:right;
color:blue;
}

h2 {
text-align:center;
color:#FF00F0
}

h3 {
text-align:left;
color:rgb(255,50,0);
}

p {
text-align:justify;
color:hsl(180,100%,30%);
}

Sourcefabric just did a Book Sprint using the FLOSS Manuals implementation of booki (http://booki.flossmanuals.net). They produced a rather nice book for their Newscoop software. They are a friendly Open Source company so they wanted to share their CSS with others so you too can learn some nice Booki CSS tricks…here it is:

body {
font-family: "Gill Sans";
font-size:11pt;
background: #fff;
color: #000;
}

.unseen{
z-index: -66;
margin-left: -1000pt;
}

.objavi-chapter{
color: #000;
font-family: "Gill Sans Condensed";
}

h1 strong.initial{
color: #000;
font-size: 2em;
font-family: "Gill Sans Condensed";
}

.objavi-subsection{
display: block;
page-break-before: always;
/*  page-break-after: always;*/
text-transform: uppercase;
font-size: 20pt;
}

body .objavi-subsection:first-child{
page-break-before: avoid;
}

.objavi-subsection .initial {
font-size: 1em;
color: #000;
}

.objavi-subsection-heading{
font-size: 36pt;
font-weight: bold;
font-family: "Gill Sans Condensed";
margin-bottom: 2em;
}

h1 {
text-transform: uppercase;
page-break-before: always;
background: white;
font-family: "Gill Sans Condensed";
}

/*h1.first-heading {
page-break-before: avoid;
}*/

h2 {
text-transform: uppercase;
font-family: "Gill Sans Condensed";
}
strong {
font-family: "Gill Sans MT";
font-weight:normal;
}
a {
text-decoration:none;
color:#000;
word-wrap: break-word;
}

table {
float: none;
}

h1.frontpage{
font-size: 64pt;
text-align: center;
page-break-after: always;
page-break-before: avoid;
max-width: 700px;
}

div.copyright{
padding: 1em;
}

table.toc {
/*border: 1px dotted #999;*/
font-size: 11pt;
width: 95%;
}

td.chapter {
padding-right: 2em;
text-align: right;
}

td.pagenumber {
text-align: right;
}

td.section {
font-size: 1.1em;
/* this takes care of padding in toc */
padding-top: 1.3em;
text-transform: uppercase;
font-weight: bold;
font-family: "Gill Sans Condensed";
}

p, li {
page-break-inside: avoid;
}

pre, code, tt {
font-family: "Courier", "Courier New", monospace;
font-size: 0.8em;
}

pre {
max-width:100%;
word-wrap: break-word;
}

img {
max-width: 80%;
height: auto;
border: 1px solid #aaa;
}

/* this makes sure h2 + h3 stick with next paragraph */
.objavi-no-page-break {
page-break-inside: avoid;
}

The book they worked on can be seen here:
http://booki.flossmanuals.net/newscoop-cookbook2/edit/

Here is an example PDF output of the book using this CSS:

http://objavi.flossmanuals.net/books/newscoopcookbook2-en-2011.04.22-14.03.27.pdf

We just changed the new default CSS for Booki PDF book exports. If you press ‘publish this book’ you get this as the default although it is not yet the same CSS as appears in the ‘custom css’ textfield. This will be updated shorty.

body {
font-family: “fontin sans”;
background: #fff;
color: #000;
font-size:12pt;
}

.objavi-chapter{
color: #000;
display:none;
}

a {
text-decoration:none;
color:#000;
}

h1 .initial{
color: #000;
display:none;
}

ol#InsertNote_NoteList{
page-break-before:always;
font-size:8pt;
}

.objavi-subsection{
display: block;
page-break-before: always;
}

body .objavi-subsection:first-child{
page-break-before: avoid;
}

.objavi-subsection .initial {
color: #000;
display:none;
}

.objavi-subsection-heading {
font-size: 20pt;
text-align: center;
line-height: 300px;
font-weight: normal;
}

h1 {
page-break-before: always;
background: white;
font-weight:normal;
}

h2 {
margin-bottom:-10pt;
font-weight:normal;
font-size:15pt;
}

h3 {
margin-bottom:-10pt;
font-weight:normal;
font-size:12pt;
font-style:italic;
}

table {
float: none;
}

h1.frontpage{
page-break-after:always;
margin-top:70%;
font-size: 20pt;
text-align: center;
page-break-before: avoid;
max-width: 700pt;
font-weight: normal;
}

div.copyright{
padding: 1em;
}
/* TOC ******************************/
table {
float: none;
}

table.toc {
font-size: 1.1em;
width: 95%;
}

table.toc td{
vertical-align:top
padding-left: 0.5em;
}

td.chapter {
padding: 0 0.5em;
text-align: right;
}

table.toc td.pagenumber {
text-align: right;
vertical-align:bottom;
}

td.section {
padding-top: 1.1em;
font-weight: bold;
}
/* End TOC **************************/

p, ul, ol {
page-break-inside: avoid;
}

pre, code, tt {
}

pre {
max-width:700px;
overflow: hidden;
}

img {
max-width: 500px;
height: auto;
}

.objavi-no-page-break {
page-break-inside: avoid;
}

.unseen{
z-index: -66;
margin-left: -1000pt;
}

Book creation is usually managed in multiple environments – the simplest tool chain consists of the writing and editing environment – usually a word processor – and the design environment – usually a Desktop Publishing software such as Scribus or InDesign. The transition is time consuming and ‘clunky’ and made worse if multiple text sources are to be combined in the design processes.

Additionally this process means there are 2 sources for the text. Changes made to the text once the source is in the design environment usually have to be copied also into the word processing files if the integrity of that source is to be maintained and vice versa.

It would be simpler if there was one environment that could be used for creating and editing AND for design. That is what we have created with Booki.

Booki enables content creation through a web interface. Chapters can be easily moved around and content can be easily modified through a very simple WYSIWYG interface. The design environment is also booki and is web based, and we have developed a technology for creating book formatted PDF using CSS.

The interface is simple to use – in the ‘export’ tab of any book you can paste CSS into the text field provided in the ‘Advanced Options’ press ‘export’ and a very short time later you have the book-formatted PDF complete with Table of Contents, numbering, headers, and margin control.

While the interface is easy to use the tool does not ‘by itself’ create a good looking book. The secret to a good looking book is a well defined style sheet and time spent manually tweaking some ‘content’ elements in the WYSIWYG editor (paragraph breaks, placement of images).

To understand the relationship between CSS and the final result there is no substitute for trial and error. Designers must first understand how a ‘web native’ technology – CSS – applies to page based media (books). This paradigm appears simple but it requires a slight re-alignment of how book designers think about designing books, and to do this designers must try the process and persevere until they succeed. After that initial success things become easier.

Probably the best way to start is to take an existing book and look at the CSS, then change it and see what happens. Generating a PDF takes anywhere from half a minute to a few minutes so this is a pretty quick method for seeing how CSS effects the layout of the book. For experimenting first create an account in Booki (http://www.booki.cc/accounts/signing/?redirect=/) and then visit the following page:

http://www.booki.cc/collaborativefutures/_v/1.0/edit/

When on this page goto the ‘export’ tab and press the ‘Publish this book’ button. The PDF will be quickly generated – beware the ‘progress bar’ is rather fake…the PDF might be ready quicker or slower than the progress bar suggests.

Next, click on ‘Show Advanced Options’ scroll down and choose ‘Custom’ from the ‘CSS mode’ drop down menu. Now a text field will appear with the default CSS – the same CSS that was used for the design of the book you just created.

Now either change the CSS in the text box OR visit this site:

http://collaborative-futures.org/

At the bottom of this page you will find a link to the CSS used for the print version of the second edition of this book – its the same book you are currently working on. You can see the CSS states:

/* Main CSS File: */
@import url("http://collaborative-futures.org/material/styles.css");

/* Uncomment based on the book size you export: */

/* A5 */
/* @import url("http://collaborative-futures.org/material/size/a5-hacks.css"); */

/* 5.5"x8.5" */
/* @import url("http://collaborative-futures.org/material/size/5.5x8.5-hacks.css");*/

This is CSS syntax that imports the ‘real’ CSS used which can be found here:

http://collaborative-futures.org/material/styles.css

Copy this CSS, change it, and enter it in the CSS text field of booki then try exporting the book again. Experiment with changing the CSS and see what happens..

One of the things that attracted me to the Booki project was the possibility of creating a printed book.  I learned about Booki through the FLOSS Manuals website, which hosts several manuals written by Sugar Labs and the One Laptop Per Child project.   These manuals had been written using an software which became the prototype for Booki.

I had been involved with Sugar Labs and OLPC for several years, and had written several Activities that run under Sugar, the operating environment used by the One Laptop Per Child project.  I had learned to do this by reading Wiki posts, asking questions on mailing lists, looking at other people’s code, etc.  It had been a long, frustrating process.  There was only one manual for making Sugar Activities, created by OLPC Austria, and it wasn’t something that you could give to a new programmer.   I program computers for a living and I still had to learn a lot before I could make my first Activity.

One of the goals of OLPC and Sugar Labs is to have teachers and students write their own Activities, and we really needed a manual aimed at that audience.  It needed to be a manual that anyone could read for free on the web or as a downloadable e-book, but I wanted a printed book to be available too.

Booki has a lot to offer an author, even without the possibility of creating a bound and printed book, but there is something real about a printed volume that is a great motivator.  Authors of printed books get invited on Oprah, are given respect, and get to trade wisecracks over lunch at the Algonquin Hotel.  You don’t get all that from making websites and e-books.

I have a pretty good collection of old books in my home and have a great deal of respect for the people who design books.  I never bargained for being one of them, though.  When we submitted my first book to Lulu I just used the default style sheet of OBJAVI (the part of Booki that generates PDFs from your HTML) and I was not too happy with the copy of the book I received.  The font for the body text was too small, the font used for the formatted code samples was even smaller, chapter headings and subheadings were ALL CAPS, and there were some odd page breaks.  For instance, subheadings would appear at the bottom of a page with the content for the subheading on the following page.

I really should have caught all this before submitting my PDF to the printer, but I didn’t for a couple of reasons:

• Adobe Reader displays pages in a PDF magnified 160% or whatever it takes to fill the screen.  At that magnification it looked OK.
• Lulu actually shrinks the pages in the PDF a bit to create a book.  “Crown Quarto” actually prints out larger than the size of the published book.

Fortunately Lulu is print on demand so you don’t have a warehouse full of books to deal with, and we were able to remove it from Lulu while I worked on these problems.  This meant creating my own style sheet.

Anyone who has ever printed out a web page knows that the state of HTML printing is lamentable.  (At times as a professional web developer I’ve used stronger words, but “lamentable” gets the idea across.)  The W3C has created some standards for style sheets that are used specifically for printing.  No web browser actually implements all of these, and the “Webkit” browser engine used by OBJAVI doesn’t either, but it does enough that you can use HTML and style sheets to create a usable and attractive book.  There are some tricks involved, which I’ll explain.  First let’s have a look at my style sheet:

body {
  font-family: "Palatino Linotype", Georgia, Serif;
  font-size: 14pt;
  background: #fff;
  color: #000;
}

h1, h2, h3, h4, h5, h6{
  font-family: "Gentium Book Basic";
  page-break-after: avoid;
}

.unseen{
  z-index: -66;
  margin-left: -1000pt;

}

.objavi-chapter{
  color: #000;
}

h1 .initial{
  color: #000;
  font-size: 2em;
}

.objavi-subsection{
  display: block;
  page-break-before: always;
  font-size: 15pt;
}

body .objavi-subsection:first-child{
  page-break-before: avoid;
}

.objavi-forcebreak {
  page-break-after: always;
}

.objavi-subsection .initial {
  font-size: 1em;
  color: #000;
}

.objavi-subsection-heading{
  font-size: 24pt;
  font-weight: bold;
}

h1 {
  page-break-before: always;
  background: white;
}

table {
  float: none;
}

h1.frontpage{
  font-size: 48pt;
  text-align: center;
  page-break-after: always;
  page-break-before: avoid;
  max-width: 700px;
}

div.copyright{
  padding: 1em;
}

table.toc {
  /*border: 1px dotted #999;*/
  font-size: 17pt;
  width: 95%;
}

td.chapter {
  padding-left: 2em;
  text-align: right;
}

td.pagenumber {
  text-align: right;
}

td.section {
  font-size: 1.1em;
  font-weight: bold;
}

p, ul, ol {
  page-break-inside: avoid;
}

pre, code, tt {
  font-family: "Courier New", "Courier", monospace;
  font-size: 12pt;
}

pre {
  max-width:700px;
  overflow: hidden;
}

img {
  max-width: 700px;
  height: auto;
}

This style sheet is mostly the same as the default one, with the following changes:

• I changed the fonts used for headings and body text to be the same ones used by the Collaborative Futures book.
• I changed the font sizes for body text and preformatted text to be point sizes rather than  “ems”.  I used 14 points for the Palatino body text and 12 point Courier for the formatted code examples.  For some reason Serif fonts look smaller in the same point size than Sans Serif fonts.  At 12 points the Palatino text was actually about the same size as the text I was trying to correct.
• I removed the style that made headings, etc. ALL CAPS.
• I temporarily put a border around the PRE tag text.  (I don’t show the border style in the example above, but it’s similar to the commented out entry for table.toc). When I made my formatted text larger some of it got chopped off.  I needed a way to easily spot when that happens and the border did that.  Since most of the book was formatted code samples I spent a LOT of time reformatting Python code to fit on the page.
• Last but not least I created my own style for class “objavi-forcebreak”.  I needed this to force page breaks into the PDF where needed.

The last point needs some explanation.  Ideally OBJAVI would know better than to put a subsection header at the bottom of a page and have the paragraph following on the next page.  If Webkit supported the keep-with-next property of CSS this would be possible, but it doesn’t.  We need to give Webkit some help by inserting page breaks where they are needed.  To do this we need to edit raw HTML.

Fortunately, this is not too awful.  You need to turn on HTML mode in the page editor, then look for the heading you want to move down.  It will look like this:

<h2>My Badly Placed Heading</h2>

Insert a DIV tag like this to force a page break:

<div class="objavi-forcebreak"></div>
<h2>My Badly Placed Heading</h2>

When you use the new stylesheet this DIV will force a page break wherever you put it.

After reading this you may wonder why I didn’t just use Open Office to write my manual and create a PDF from that for Lulu.  Wouldn’t that have been less work?  That was certainly an option, but if I had done that I would have missed out on the wonderful collaboration features offered by Booki.  “Collaboration?” I can hear some of you saying.  “Didn’t you write that manual all by yourself?  Where did collaboration enter into it?”

But that’s a topic for another day.

James Simmons

This week Objavi (the publishing engine for Booki) has changed the way it adds page numbers to PDF output. Previously the numbers were added to the PDF after it had been generated, and were always in 11 point Helvetica Western-Arabic numerals, regardless of the document’s style or language. Now they are laid out at the same time as the rest of the book, and you can use CSS to determine appearance. Objavi also now tries to use the appropriate numeric characters for the language, although this can be overridden.

Styling the numbers with CSS

The numbers will by default be in the document body font in the outside bottom corners: in left-to-right books, odd numbers are on the right, and even numbers on the left. You can change their appearance using a CSS selectors. The page number HTML effectively looks like this:

<div class="page-footer" id="right-footer"><!-- or id="left-footer" -->
  <div class="page">42</div>
</div>

And the default CSS goes something like this (feel free to skip to the recipes):

.page-footer .page {
  display: inline-block;
}

#right-footer {
text-align: right;
}

#left-footer {
text-align: left;
}

You can override this by customising the CSS in either the Booki Export Tab or the advanced section of the Objavi form.

So what can you do?  To affect both left and right pages, the simplest thing is to use the .page-footer selector. For example, to change the font:

.page-footer {
  font-family: 'Inconsolata';
}

To do different things to the right and left pages, you are probably best using #right-footer and #left-footer.  If you want to apply a style to the number locally, rather than to the whole line that it sits in, you need to use .page.  The next example uses all of these in conjunction with CSS pseudo-selectors to add a little bit of text just inside the page number:

#right-footer .page:before{
  content: " FLOSS Manuals ";
  font-size: 85%;
}

#left-footer .page:after{
  content: " FLOSS Manuals ";
  font-size: 85%;
}

Changing the numeric script

There are many variations of the Hindu-Arabic numeral system, which all use different glyphs to identify the same ten digits. Most people, but by no means all, use some kind of Hindu-Arabic numerals, of which the Western Arabic numerals are the most common. As far as I know, among Booki books, there are currently four languages that could use a non-Western Hindu-Arabic numeral set: Farsi, Arabic, Hindi, and Burmese, and these are now automatically provided with page and chapter numbers in the proper glyphs. But it might be the case that a book’s language is misidentified, or that the “old” numerals are not actually appropriate in a technical book, or you might just want to see what page numbers look like in other numerals. For any of those cases, there is an option in the Objavi interface to override the numeral system (under “advanced”, near the bottom) – this functionality will also soon be added to Bookis Export Tab.

What actually changed and why

As mentioned above, Objavi used to add the page numbers in a separate pass after the PDF was made. It did it that way mainly because when Objavi was young, there was no other option, but it had two (or perhaps more) slightly useful abilities that have now been lost. One is that it made dinky lower-case roman numbers for the preamble pages, and the other is that it was able to number newspaper pages properly. Both of these are recoverable, but are not immediate priorities.

The change was mainly motivated by the excessive resource use of the previous system, not the stylistic improvements. Objavi used pdfedit to add the page numbers, and pdfedit has an intractable tendency to eat up more memory than is really available. Now Objavi uses the –footer-html option of wkhtmltopdf. As a result of these changes, Objavi is not only more friendly to designers and users of non-western Arabic numerals, it is also faster, smaller, and simpler.