blog.booki.cc

There is a lot of interesting stuff happening to the page right now. The page is changing in so many ways – time based media is making its way into book pages, reactive content, scrollable space, and a multitude of differing display devices make designing pages pretty hard work these days. How to design for so many possibilities? How to understand so many possibilities?

Craig Mod of flipboard makes a very compelling argument for two forms of page : formless and definite content in an article he wrote for Book: A Futurists Manifesto - the first book to be produced by PressBooks. Craigs argument in a nutshell and in his own words is:

the key difference between Formless and Definite Content is the interaction between the content and the page. Formless Content doesn’t see the page or its boundaries; Definite Content is not only aware of the page, but embraces it. It edits, shifts, and resizes itself to fit the page [...] Put very simply, Formless Content is unaware of the container. Definite Content embraces the container as a canvas.

Craig argues that most book content we know is formless – the text can reflow into other containers without effecting the meaning.  Its a really well argued position and one that is in tension to the current design methodologies of book designers today. Book designers are taught to design contained space – books are a very definite context in which they work. Desktop Publishing Applications are built to meet this methodology. Pixel perfect manipulation within a strictly contained space. If the designed digital article does not exactly match the printed artefact then something went wrong. A lot of energy has gone into this process.

Formless design principles are uneasy to consider for traditional book designers – how can you design for a page that does not yet know its container? It is literally like asking a book designer to design a book without telling them the page dimensions.

As it happens web designers have been thinking about page design too. For a long time now web designers have made pages that embrace differing containers – they have been working, at least in part, with formless content.

What is missing however are good tools for taking the web designers aptitude for working with formless content to enable them to produce books. A good tool set for designing formless books should not work with a constrained page dimensions. It is tempting, for example, to think of working with a design environment with constrained page-like artefacts - think of Google Docs as an example. Could something like Google Docs with its digital, scrollable, yet fixed page size be a good starting point for some kind of design tool? Place layout and typographical controls on top of Google Docs and do we have the next book design environment?

I don’t think so. I don’t think so because it is exactly the kind of idea that is blinded by the media of the past and cannot accept that things have changed. We must design tools that enable book design for formless content. What those tools look like is a very interesting question and one which Aleksandar Erkalovic (Booktype lead dev) and I have been working on with students (Hannes Bernard and Aiwen Yin) from the Sandberg Institute in Amsterdam.

Our argument is that the design of formless content is really a partially constrained environment since elements within the page have some kind of relationship to each other. This is an argument web designers are familiar with when using design tools like position:relative – a rule which sets a relative position relationships between objects. Relationships can be constrained or shaped by rules which will be at least partially preserved when displayed in different contexts. The meaning is preserved by the relationship between the elements more than by their relationship to the constraints of a page.

This is the reasoning behind Cascading Style Sheets – the design language of the web. It is rule based design and even partly conditional. It is possible to express conditions in CSS even though it is not done that often. A CSS rule such as :

h2+p {page-break-inside:avoid;}

is a conditional CSS rule which will apply the style only when a paragraph follows heading 2 (h2) element.

Web designers know this kind of thinking but book designers are going to have to let go of pixel perfect design and enjoy thinking and designing this way. It seems like a simple idea but it takes a lot to overcome legacy. The legacy is so strong that designers are pretending the issue does not exist. There are tools now appearing and sold as design environments for iPad books. They give near 1:1 page relationship between design environment and the final result. However we all know what happens to digital hardware – it changes. What is true now will not be true 5 years from now so the idea that an ebook is a contained space is very appealing to traditional book designers but it will be a short lived myth. iPads might keep the same form for 5 years, they might not but they certainly will not keep it over the next 5-10 years. Better to learn how to design in the new way than be fooled into thinking you can bring all the old methods to a new medium and get away with it for long.

What we are working on now is a way to meet the designers half way – a visual design environment which is used for rule and condition based design. Can book designers accept a tool like like this? Will web designers just step in and take the role of book designers? Its an interesting question and one we hope to have some more experience with soon.

I feel genuinely sorry for people that have authored content in iBooks author. Its not because I am feeling defensive since I am involved in the development of a book production platform. I just feel sorry for them because they are part of Apples lock in strategy and it has some very significant impacts on their content.

I was reading a slashdot thread about Booktype and enjoying the conversation. Some very interesting and informed takes on the whole book world (and some not so informed rants!). One of the very last comments was by someone that made a book with the iBook Author. Naturally curious I downloaded the book to have a look. Knowing that iBooks Author makes epubs I was surprised to see the ‘.ibook’ suffix to the file instead of ‘.epub’. So first I tried opening this with calibre. The book loaded into Calibre ok but when displayed all I got was a list of the folder contents. Epubs are archived zip files, when you open them with an ‘archive manager’ you just see a folder structure. Since Apple uses the wrong suffix any other application that opens it will only see that the file is a zip archive and open it like it would any other zip file and display the folders and files inside.

Apple .ibook viewed in calibre

It kind of kills me that this happens. Its not Cailbres issue its the non-standard way of Apple to screw everything up for everyone. Why not just call the file an epub?

So I changed the name of the file so that it ended with the ‘.epub’ suffix and I tried again. Of course now it opened. However the pages were scrambled.  Why? Because Apple uses non-standard CSS controls to layout the books. For a good article and insight into this strategy read Baldur Bjarnasons post about this.

Its really a pity. The author spent a lot of time on this book it seems and I would really like to enjoy their work. So even though this looks like it could be a very nice book I can’t read it. It really can only be read by the iPad. If thats ok by you then sure – but its probably a good idea to ask yourself why. Would you accept these conditions if they were true for books before the iPad came along? Imagine if all paper books made with an Apple desktop publisher application looked scrambled unless viewed with special Apple glasses? Well maybe for an art project it might sound kinda cool but for a normal book? Sound ridiculous? Thats where you are now if you make content with iBook Author.

There are some very interesting Javascript libraries available that are trying to make up for what is lacking in CSS typographical controls. Most are based on the well used and prolifically distributed JQuery Javascript libraries.

Of particular interest is the Kerningjs library which combines the previously available letteringjs library. What these libraries do is to make each glyph (letter/number) into its own element each of which can then be transformed by CSS like rules. In plain speak, these code libraries allow you to change each letter individually in a paragraph or heading etc.

There are some nice demonstrations online about why this is interesting, the most interesting demo can be found at kernjs. Try visiting that page, double click the big blue circle then click on and drag the letters individually.

Kernjs.com

If you then click ‘Finish Editing’ you will get the CSS controls necessary to implement this effect (if you had kerning.js linked from your page).

There is also another interesting typographical library called colorfont which enables dual toned glyphs.

Colorfontjs

It is a pretty good trick they used to achieve this. Essentially they created two fonts from the same master font each displaying just partial glyphs. When overlayed they display the full glyph. Hence each ‘layer’ can be targeted with a different color.

With libraries like this it is apparent that Javascript has a future with web typography but maybe it doesn’t stop at that. These kind of tricks can also be implemented with ebooks and with more and more book designers entering the world of ebook design I am sure we will see a growing need for more of these libraries.

I was watching the archives of re-publika and enjoying a lot of the speakers particularly Geert Lovink. Geert works at the Institute of Network Culture (he founded it) in Amsterdam. The Institute has been responsible for a lot of very interesting events  including The Unbound Book.

Geerts talk from 2010 at re-publika linked me to the 2008 essay “Is Google Making us Stupid” by Nicholas Carr which I downloaded to my Kindle and read over dinner. Its apparently a very well known essay but I had not picked up on it before now.

There are a couple of personal observations of this process before I go on – I was quite happy to pay a very small sum for the essay and read it on my kindle, also keeping it there to refer to later, although I could have read it online for free. Second, I brought the book at the  same time from which the essay was derived.

Anyways – one of Geerts arguments, also reflected in Nicolas Carrs writing, is that the web is changing our way of thinking. Essentially, as I understand them both, we fly through information looking for bits and pieces and compiling them in our brain on the fly. We no longer read a text more than a few paragraphs long but instead dive into a endless torrent of short information snippets – jumping from one hot source to the next, swapping context and media in rapid fire until we are fatigued or sated.

As a result we can’t read long form texts since our brains become reprogrammed. They simply work differently as a result of feasting on the net.

Most of which I agree with except I am curious about is why this is framed as a binary. From reading Carrs book I sense that he feels he has lost the ability to read long texts and claims this is true of most of us. But I dont think it is an either or situation. We have retained the ability to read long texts but we also have a new skill to read and compile hyper narratives on the fly.

The reason I believe we have both is partly from my internal sense of the issue gained to some degree by observing myself – I read Carrs long text about how I should not be able to read long texts anymore, and now I am reading his longer text about the same issue (his book).

Secondly – it seems the evidence is that people are buying long texts in amazing quantities. In 2011 Amazon announced that ebook sales had surpassed printed book sales. In some categories Amazon sold 105 times more ebooks than print books. What is difficult to discover is how many books that is exactly. It could be that consumption of books (print or digital) is plummeting so quickly that the total number read is still lower than the days before the net had its way with our brains.

I don’t have numbers on this – it would be useful to know, however it does seem to me that there is a lot of apparent consumption of long form text in the form of ebooks so until proven otherwise I am going to assume this is true.

What that indicates to me is that the problem is not that we can’t read long form text, but that we spend a lot of time online flying around looking for things that the web can’t deliver – or has not delivered. We jump around looking for facts and figures, changing contexts and sieving through information until we find the collection of snippets we want. However it could be that this behaviour is in part caused by the fact that there are no ‘contained spaces’ where we can find comprehensive information ‘in one place’.

The net once promised this – at least to me. ‘Organize the world’s information and make it universally accessible’ as Google would put it. But the web does not organise all the worlds information, the web is a chaotic medley of data thrown about the globe and intercepted by enormous quantities of spurious junk. The web needs Google to make some kind of sense of it but that is far from ‘organising’ it unless I am missing some nuance of the term.

Where is the place you go to find comprehensive information on a specific topic? It is not the web. You go there to assemble bit and pieces – be inspired by tangents, get some great quotes, and feed off the flotsam and jetsam of data flows.

If you want to find comprehensive information you go to a book. Its a self contained space.

What is interesting is that the web has not delivered these spaces and yet books now are webpages. Epub, the most commonly used standard for ebooks, is actually a self contained archive (zip) and it contains a website. Epubs are HTML files ordered in a particular way so that ebook readers can display the contents as ordered chapters.

It is peculiar that epubs are books because it means that books are webpages, and the apparent popularity of ebooks suggests to me that networked media has failed to deliver something we still want – comprehensive long form text in one place.

I can’t explain it in its entirety. It is a puzzle but it does suggest to me that the book is here to stay. The book as a place where we find comprehensive long form texts on a topic is something we can still consume, we still want, and more importantly we still need.

So, much has happened in the last months. Booki has grown up and has a new name – Booktype. You can find it here: http://www.booktype.org

Its pretty cool. Lots of new features and we now have a paid team behind the dev including myself and Aco – the lead dev.

Booki will persist but as a website – www.booki.cc – which actually removes some confusion since the software that runs booki.cc and the website itself were named the same. Now Booki.cc is powered by Booktype – less confusion and more room for Booki.cc to form its own identity.

There will be much more news about this all soon and some changes to Booki.

There are a few updates to Booki that you may be interested in :

• We had a serious problem where you could accidentally delete a book if you were deleting chapter statuses. Opppsss. This has been fixed now.
•  “django-admin bookrename” (terminal admin command) now rewrites attachment path correctly.
• Everyone has access to “Attachments” tab now, but only administrator can delete attachments at the moment.
• Show human readable error message when you have more then one chapter with the same name. There is not much help with this at the moment, Booki administrator should remove or rename one of the chapters to fix any duplicates.
• Now you can directly link to chapter editor or any other tab in editor interface. For instance: –
  http://www.booki.cc/my_book/_edit/#/edit/my_chapter/ (links to a chapter)
  http://www.booki.cc/my_book/_edit/#/settings/ (links to the settings tab)
  http://www.booki.cc/my_booki/_edt/#/history/ (links to the history tab)
• You can’t leave editor by accident anymore. A pop-up window will ask for confirmation. Yes…Yes…Finally!
• Default Django slugify function does not know how to work with non ASCII characters. This was a major problem with Asian scripts, Russian and some other languages… This has been fixed now. At the moment we have dependencies that could not handle pure Unicode names, so we are just converting it to ASCII characters… For instance “Добрый день” will become “dobryi-den” and etc.
• Booki Editor is now fully localized.
• You can upload PDF book to Lulu.com from “Export” tab.
• Boxes are rounded and have gradient background if you are using Chrome or Safari
• Some other small bug fixes….

(fwded from Aco)

The open source not-for-profit organisations FLOSS Manuals Foundation and Sourcefabric are pleased to announce their newly forged partnership to maintain and develop the code base behind FLOSS Manuals’ successful free software documentation platform.

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; 

}

Booki provides an RSS feed for everybook. This means you can follow a book and see the edits made etc. Each RSS feed is linked from the info page. For example the book about OpenMRS has an info page here http://www.booki.cc/openmrs/_info/ and the RSS is linked from the bottom as so : http://www.booki.cc/feeds/rss/book/openmrs

A few weeks ago we asked for some help creating a visualisation using this source. Pierre Commenge responded and started developing a Processing visualisation of the RSS feed. Processing is a free software used a lot for creating visualisations (http://fr.flossmanuals.net/Processing/Introduction).

Pierre has a prototype available that runs in a java applet (http://emoc.org/fmviz/0.5/) below is a screen shot of the visualisation of the CiviCRM book produced in a FLOSS Manuals Book Sprint.

Visualisation of a book being made

So this look pretty cool. The live version enables you to play a timeline and see the development of the book over the period of 1 day.

This not only looks cool but it enables you to see how a book is being made. This is extremely interesting – imagine if we had all the data about how every book has been made up until now…it would tell us a lot of things about book production process and the differences between different models etc…its a very exciting idea and we hope to be able to explode this idea in the following weeks and months in our experiments. Many thanks to Pierre for getting this underway.