Case Study: MOBI publishing from Docbook

BACKGROUND

In October of last year (2012) i was contacted by a German developer to do consulting on Docbook based ebook design and publishing. Because I had recently started a full time job I had to turn him down.

4 months later things had slowed down at work enough for me to reach out and check with the potential client to check if I could offer any assistance. I was sad to find out that he had given up and pretty much abandoned the project.

I offered to run the project for free in exchange of being allowed to write a case study on the experience.

This is the first time I work with content I didn’t author. It might have had something to do with some of the issues discussed throughout or it might not.

Source material and initial challenges.

The source material was a set of Docbook XML files along with the corresponding images in the screenshot directory. Since i cloned the files from a Github repository i shouldn’t have been surprised that thee were more inages tha those i needed and in different formats. This only became aparent later in the process.

The main file (index.xml) used XInclude to reference the rest of the content. Working on an integrated file (Docbook and XInclude have their own separate namespaces) required some modifications to my XML validation process. It wasn’t anything major (just use a different grammar file) but it’s important to keep it in mind for when using XInclude in the future.

FILES TO NOTICE

  • build.xml The Apache Ant build script
  • local-style.css Additional CSS classes to make the ePub document look nicer. It will only work with Kindle Fire devices (those supporting the KF8 format)
  • docbook-custom.xsl The Docbook customization layer.

This project also makes use of open source fonts for the ePub3 and KF8 versions:

THE PROCESS

My standard Docbook to ePub process looks like this

  1. Prepare the Docbook customization layer
  2. Clean the working directory from prior conversion files
  3. Validate the XML file using Jing
  4. Fix any XML/Docbook structural and syntax errors
  5. Repeat the XML validation as many times as necessary
  6. use XSLTproc to convert the XML file to (X)HTML
  7. Create and test the CSS stylesheets you want to use with your content
  8. Copy images, fonts and additional CSS stylesheets to the book directory
  9. Zip the content according to the ePub specification requirements
  10. Validate the ePub file using epubcheck
  11. Fix any ePub validation errors and rerun epubcheck
  12. Convert to Mobi and KF8 using kindlegen
  13. Test on your target devices

THE TOOLS

And and Ant build script

Rather than do all the steps manually I build an Ant build file that takes care of all the steps and the some additional stuff for general house keeping.

I picked Ant rather than a make file because it is truly cross platform. It is written in Java which may cause a problem for the most security conscious people but it is a command line application and in all the years I’ve used it it has never caused a problem.

The Ant build script is an xml-based file that contains one or more targets to accomplish your project goals.

XSLTProc

I use XSLTProc as my transformation engine for a variety of reasons. It is a part of the OS X. Developer tools (or you can install it using Homebrew if you don’t want the full multi-gig download from Apple) and it is the fastest XSLT 1.0 processor that I’m aware of.

It also handles XInclude without needing extensions or additional software.

For XSLT 2.0 and beyond I will most likely use Saxon. It is java based and authored by the editor of the XSLT specification at the W3C.

Jing

Until last ear I used XMLlint as my XML validator. When using a RelaxNG vocabulary such as Docbook, it is not enough. When I first encountered this problem it was suggested that I move to Jing, mostly because it was built to validate RelaxNG rather than older W3C Schemas and DTDs.

In order to validate Docbook / XInclude documents you have to download a RelaxNG grammar file from the Docbook website.

epubcheck

Tool developed by idpf to validate ePub 2 and 3 documents. It is a pain in the ass sometimes as it will not validate things we know are correct but it also has a great group behind it and bugs are fixed fairly quickly.

Current version is 3.0 (final)

Kindlegen

Kindlegen is a command line tool that allows you to convert your ePub 3 file into a Kindle file for both the older eInk devices as well as the newer Kindle Fire readers.

Because I’ve automated my workflow I use Kindlegen rather than the Kindle Previewer for the automatic validation. I will still use Kindle Previewer to validate the content.

THE PROCESS

Developing your customization layer.

As counterintuitive as this may sound this is always my first step. There are things I know I’ll need and they need to be used from the first test of the book conversion.

Some of the things I knew I needed for this particular project:

  • kindle.extensions: Provides an umbrella for all Kindle-specific changes the stylesheets need to make to the ePub. Since the target platform is the Kindle family of devices we need to make sure that whatever is Kindle specific is addressed

  • html.stylesheet: Adds additional CSS stylesheets to use with your book. This is important as the default stylesheet provides only minimal styling support

  • user.manifest.items: The template, empty by default, allows you to add additional elements to the book package manifest (package.opf). In this particular instance we use it to add fonts for the ePub3 and KF8 (Kindle Fire) formats. ePub2 and eInk kindles (I believe all of them except the white paper model) will ignore material

What’s a customization layer, why would you create one and how to do it is best covered in Bob Stayton’s book Docbook XSL: The Complete Guide, particularly chapter 9.

Create and test the CSS stylesheets

At this time we can’t do much with the stylesheets other than set up the default fonts using @font-face CSS rules. My normal process includes adding a font for the body (usually a sans serif font like Adobe Code Sans) and a font for any pre formated styles like program listings or screen captures (using Ubuntu Mono as my font)

There are times when this is all that is needed but more often than not you need to do additional CSS work based on the specific classes and structure created during the conversion process.

Clean up the working directory from prior conversion files

I know it shouldn’t make a difference but I’ve learned over time to always clean up prior conversion artifacts from the working directory. This has saved a lot of grief when trying to identify problems with the CSS styles in particular. There is no real way to tell if the changes you’re making is based on the old or the new code so I tend to err on the side of being OCD

Validate the XML file using Jing

Fix any XML/Docbook structural and syntax errors

Repeat the XML validation as many times as necessary

Run the Docbook file (index.xml in this case) through Jing using a command similr to this:

java -jar /path/to/jing/jing -jar /path/to/jing/lib/docbookxi.rng index.xml

Before converting the Docbook file into our ePub (X)HTML we need to make sure that the file is valid XML or it’ll cause no end of problems later on. Validating the XML gives use the chance to work with the Docbook content and fix any issues that we find.

This is an iterative process: Run Jing, fix any issues that it reports and the run Jing again. The idea is to have no issues in the Docbook XML code.

Use XSLTproc to convert the XML file to (X)HTML

We will use XSLTproc to convert the valid XML file into a set of (X)HTML pages. At this point I’m confident that the input XML file has no serious issues that will affect the remaining stages of the process.

Two important things to remember are XIncludes and to set ups base directory for the transformed content.

While XSLTProc supports XInclude you have to tell it to use them as it is not a default activity.

XSLTProc, by default, will work in the directory where it is run. We need to tell it not to do that and to create a directory for our ePub content. We use the following command:

xsltproc --xinclude --stringparam base.dir OEBPS/ docbook-custom.xsl index.xml
  1. The first parameter (–xinclude) tells XSLTProc to process any XInclude references and add them to the document

  2. The second parameter (–stringparam base.dir OEBPS/) tells XSLTProc to create the OEBPS directory if it doesn’t exists and to create all the files in this directory.

  3. docbook-custom.xsl is the Docbook customization layer we created earlier in the process.

  4. index.xml refers to the main Docbook file. It contains all the XInclude references and will generate all out XHTML content.

Copy images, fonts and additional CSS stylesheets to the book directory

In the step above we only created the XHTML files with their references to images and other internal resources. We now need to copy all additional resources (in this case they are: CSS, fonts, and images) to the corresponding directory. For example, if we referenced the images like this:

images/sample.png

We would copy the image to:

OEBPS/images

Otherwise you will get validation errors later in the process. We need to do the same thing with all additional resources.

Zip the content according to the ePub specification requirements

Ziping the epub book is a two step process.

The first step is to add the mimetype file (generated by Docbook) into the ePub archive without any compression. This is required by the ePub specification.

zip -X0 mybook.epub mimetype

The second zip command will add the remaining content, the OEBPS directory and the META-INF with normal compression settingsand exclusing all metadata; excluding the metadata is also required by the ePub specification.

zip -r -X9 mybook.epub META-INF OEBPS

Some people say that it’s OK to work both steps in a single zip command but I’ve had enough issues with it in the past that I always run the two commands even if it’s not needed.

Validate the ePub file using epubcheck

Fix any ePub validation errors and rerun epubcheck

Running epubcheck will detect a variety of ePub specific errors that can happen with your HTML’s structure, the CSS, whether content should be present or not, among other events.

These errors may or may not have been caught by Jing when we validated the XML structure of the document. I’m assuming that if we get this far the HTML product is valid and will pass structural validation without a problem.

This is also an itertive process. If there are errors you will have to go back to your HTML, CSS or XML manifest package, make any changes, zip the content again and validate it. I know it’s a pain in the ass but right now it’s the only way to do it.

To run epubcheck type the following command:

java -jar /path/to/epubcheck/epubcheck.jar mybook.epub

Convert to Mobi and KF8 using kindlegen

Once you have validated your ePub3 file you can use Kindlegen to convert it to both eInk (KF6) and Kindle Fire (KF8) formats. The resulting Mobi file contains both versions, you have no choice.

Kindlegen is a command line application chosen because it is easier to merge with the command line based Ant workflow. Another possibility worth exploring but it’s beyond the scope of this essay.

Tu run Kindlegen run it like this:

/path/to/kindlegen mybook.epub

If there are any errors at this point the fixes have to be made on the XHTML documents, then zipped and validated as ePub before validating it again as Mobi. Warnings are, for the most part, OK. Make a note of what they are and, if so inclined, report them to the docbook-apps mailing list.

Test on your target devices

The final thing to do is test in as many actual devices as you can. It is important to test in as many devices as you can; the experience with the cloud readers is definitely not the same as reading in the device, particularly the older Kindle and Kindle DX devices that only support the KF6 format (no fonts, no colors, no audio and video).

Once you are happy with the final product you can submit it through the KDP program.

Happy publishing!

CSS regions, exclusions, shapes and new publishing paradigms

Introduction

Smashing Magazine Newspaper Designs article shows examples of what printed media can do. Having learned to use InDesign for ePub-based ebooks I’ve come to respect the power and flexibility of printed media… working primarily in web environments I’ve always wondered what it would take to do similar layouts.

Over the last year at the two HTML5 Developer Conferences I’ve heard more and more about new CSS technologies that would make print-like layouts possible:Regions, Shapes and Exclusions.

Adobe has been championing these technologies, not surprising since they also create DTP and Layout programs.

While these technologies (Exclusions, Shapes and Regions) are still experimental and supported by a limited number of browsers, it is still an exciting possibility for designers and developers. We can match print layouts (almost) in our web content.

Supported browsers

These technologies are still experimental and subject to change. Best place to keep up to date with the development of these CSS specs is the W3C site. Adobe may also have updated articles and tutorials.

The following browser supports the standard:

  • IE, IE Mobile (-ms- flag)
  • Webkit nightly (-webkit-flag)
  • iOS (-webkit- flag)
  • Fully supported on iOS 7
  • Chrome Canary
    • Enable with Enable CSS Regions flag
    • For Chrome 23 and later enable with: Enable experimental WebKit features)
    • Latest Chrome Nightly uses Enable Experimental Web Platform Features to enable regions

Can we use this for publishing projects now?

While the technology is available and work to reach full recommendation status continues on the W3C’s CSS working group we can still play with the technology and crete prototypes.

It may be a while, if ever, before ebook readers’ rendering engines catch up wit the standard but let’s remember that we can build web applications that will run on both Kindle Fire and iOS devices. These applications can use polyfills to accomplish the same or similar functionality using something like Modernizr.load or similar loader libraries. How to do polyfill work will be explained later.

Regions

Regions allow you to create flows of content inside your web content.

For those familiar with InDesign think of regions as threaded text frames that can then be laid out and changed as needed without having to change the layout of all spreads just to make one change.

For those not familiar with InDesign, regions and flows look something like this:

Getting Started

In supported browsers the code for something like the example above is fairly simple. Code First, explanation later

CSS code:


#source {
    -webkit-flow-into: main-content;
    -ms-flow-into: main-content;
}

.region {
    -webkit-flow-from: main-content;
    -ms-flow-from: main-content;
  height:300px;
  border: 1px solid #f00
}

The #source element creates the flow for our regions. This text will disappear from the regular flow of text and will be placed in our regions.

Every container with the class .region will be used to flow the text into. We can position the regions any way we want and use other CSS tools such as flexible boxes layouts, animations and transitions to place our content.

Combining the HTML below:

<div id="source">Some long chunk of text goes here</div>

<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>

with the CSS that we looked at earlier will produce a result like the one in the Codepen below:

See the Pen CSS Regions Example #1 by Carlos Araya (@caraya) on CodePen

One thing to notice is that the #source disappears from the flow of your page’s content and only appears once, on our regions. This will be interesting later when we start working with multiple flows in the same layout.

Moving the regions around

We have our basic regions layout… it’s nothing to write home about, is it? Let’s do something about it.

We will change the regions on our HTML to add an ID attribute to each. Our HTML code now looks like this:


<h1>Positioned Regions</h1>

<p>Each of the 4 regions (marked with a 1px red border) below has been positioned using CSS attributes (top and left)</p>

<div id="reflowing-content">
  <div class="region" id='region1'></div>
  <div class="region" id='region2'></div>
  <div class="region" id='region3'></div>
  <div class="region" id='region4'></div>
</div>

<div id="source">Some long chunk of text goes here</div>

I have added a wrapper div to the regions called reflowing-content. This allowed me to use absolute positioning on the regions inside.

I also added individual ID attributes to each region so we can style them independent from each other. In the first version of our code, all regions got the same style… simple but not really useful.

Now that we’ve identified each region on our content we will play with style. We will change the size of the region and play with their positions.


#source {
    -webkit-flow-into: main-content;
    -ms-flow-into: main-content;
}

#reflowing-content {
  position: absolute;
}
.region {
    -webkit-flow-from: main-content;
    -ms-flow-from: main-content;
  position:absolute;
  width: 300px;
    height: 400px;
  border: 1px solid red;
}

#region1 {
    left: 10px;
}

#region2 {
  left: 320px;
}

#region3 {
  top: 420px;
    left: 10px;
}

#region4 {
    top: 420px;
    left: 320px;
}

The resulting modifications produce the result below:

See the Pen CSS Regions Example2: Positioned flow by Carlos Araya (@caraya) on CodePen

Making it more flexible

Now we get to what, for me, is one of the hardest parts of working with CSS across browsers and sometimes even within versions of a browser: relative positioning. Whenever I get confused or need a refresher for the different positioning values and the resulting layout, I go to CSS Positioning 101, a 2010 article in A List Apart that still helps me make sense of the mess in the positioning game (or my head, haven’t quite decided where the problem really lies).

The example in the previous section uses absolute positioning to layout the content. It works but it lacks flexibility or responsiveness

So we’ll change the CSS to make the code more responsive while keeping the HTML the same. The new CSS looks like the one below:

html, body {
  width: 100%;  
}

#source {
    -webkit-flow-into: main-content;
    -ms-flow-into: main-content;
    flow-into: main-content;
}

.region {
    -webkit-flow-from: main-content;
    -ms-flow-from: main-content;
    flow-from: main-content;
  position:relative;
  width: 300px;
    height: 400px;
  border: 1px solid red;
}

#region1, #region3 {
    left: 10px;
}

#region2, #region4 {
  left: 320px;
}

Changing the regions’ positioning to relative allows us more flexibility. While we can keep the order of the elements, we can now position them anywhere in the screen we want. In developing the example below I also played with negative values for the top element to move content up from its original position.

See the Pen CSS Regions Example3: Positioned flow with relative elements by Carlos Araya (@caraya) on CodePen.

Will this work with older browsers?

As mentioned earlier, the technology is still experimental and supported wither through css vendor prefixes (Webkit and Microsoft) or behind a flag (Chrome Canary and, I believe, release).

So how do we make it work?

This is where polyfills and resource loaders come into play. While no browser supports regions out of the box, Adobe has provided a polyfill for regions that levels the playing field while the technology is in development.

Modernizr.load (also know as yepnope.js) allows you to conditionally load javascript based on Modernizr tests. The example below makes sure we supports both columns, shapes and regions before we do anything:

Modernizr.load([
  {
    // List of things we need
    test : 
            Modernizr.regions 
            && Modernizr.shapes 
            && Modernizr.columns,
    // Modernizr.load loads css and javascript as needed
    nope : ['css-regions-polyfill.js', 'css-regions-polyfill.css']
  }
]);

In the code above we test to see if the browser supports regions, shapes and columns. If it does then we do nothing, everything is good, we have a cool browser and we move on.

For browsers who do not support the technologies we are using, we load a JavaScript polyfill and the corresponding CSS file; while older browsers will not have the exact same experience as newer browsers, they will get enough of the experience for it to work.

Adobe has created a CSS regions polyfill as a research platform while the standard is finalized. The polyfill introduces the -adobe prefix as a way to avoid collisions with other vendor prefixes and the un-prefixed recommendation.

Final Example

We will take one of our example images from the top newspapers and convert it into a fluid web layout that uses regions and shapes to layout multiple flows of content in the same page.

dmn7

I know that you can do some of the same things that you use regions for. It is true that the CSS uses a combination of flexbox and regions. The looks of the example are a limitation of my skills with CSS and not necessarily a reflection of the recomendations and their implementations.

I will continue working on this final example in Codepen. Comments and feedback asked for and encouraged.

See the Pen apnou by Carlos Araya (@caraya) on CodePen

Outstanding Issues and Questions

As seen in the examples above, learning how to work with regions can be a big challenge but it’s one that I think it’s going to be worth it in the long run; that said there are still some questions I haven’t been able to figure out and that I’m throwing out there for comments and possible solutions 🙂

  1. How do you deal with scroll overflow?

Shapes

The CSS shapes recommendations are like Drop Caps or floated images on steroids.

For the unintiated drop caps are the large letters used in the first paragraph of a chapter or a page. The CSS code for a drop cap may look something like this:

p:first-child:first-letter { 
    float: left; 
    color: #903; 
    font-size: 75px; 
    line-height: 60px; 
    padding-top: 4px; 
    padding-right: 8px; 
    padding-left: 3px; 
    font-family: Georgia; 
}

The code above will take the first letter (using the first letter pseudo class) of the first paragraph child (using the first-child pseudo class) and apply the style above.

Why use them

Even when we use the float CSS property we can’t float content fully around an image; you can only float the text to one side of the image and, as far as I know, you are limited to floating block objects.

Shapes give you control of the shape (duh) that the content is floated.

Furthermore, shapes allow to float text both inside and outside the shape you’ve defined. Once again we get close to professional print layouts for our web content.

Supported browsers

Support for shapes is in a much larger flux than regions as no single browser supports the complete recommendation. That said Adobe maintains an up to date compatibility table for the different shape attributes.

How to use shapes?

The simplest example is to use them alongside floated content. In the example below we’ve taken the Dunetocat image from Github and floated it both left and right and used CSS shapes and float attributes.

<div id="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus   vel leo pharetra malesuada. Nulla risus magna, vulputate id elit quis, luctus ullamcorper ligula. Nam at faucibus massa, sed elementum tellus. Proin et dictum ligula. </div>
#container{
  border: 1px solid blue;
}

.float-left {
  float: left;
  shape-outside: rectangle(0, 0, 100%, 100%, 60%, 50%);
}

.float-right {
  float: right;
  shape-outside: rectangle(0, 0, 100%, 100%, 40%, 50%);
}

In the codepen below notice the way in which the text wraps around the text around the image and how it is wrapped differently depending on where the object is placed. You can play with the values for the rectangle shape-outside CSS property to see how the wrapping changes.

See the Pen Shape example 2: Shape Inside by Carlos Araya (@caraya) on CodePen

The next easiest example is to use shape inside to put our text inside a shape. We are flowing the content using regions like we did above and then shape the area we are flowing our content to and use the CSS shape-inside property to define the shape we are flowing our content into… in this case a circle.

<div id="region1"></div>

<div id="content" align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus vel leo pharetra malesuada. Nulla risus magna, vulputate id elit quis, luctus ullamcorper ligula. Nam at faucibus massa, sed elementum tellus. Proin et dictum ligula. Nulla rutrum bibendum mauris et porttitor. Donec luctus, ante vitae tincidunt ultricies, mi leo ultrices lacus, ac elementum urna metus in lorem. Suspendisse non feugiat risus. Nullam congue a est nec consequat. Aliquam gravida sem sit amet tellus vulputate sollicitudin. Cras feugiat est et turpis scelerisque auctor.
<div>
#content {
  flow-into: flow;
  font-size: 11pt;
  hyphens: auto;
}
#region1 {
  flow-from: flow;
  width: 200px;
  height: 200px;
  background-color: #9BBCE3;
  shape-inside: circle(50%, 50%, 50%);

As usual you can play with the CSS definitions on the Codepen below to test what would happen if you make changes in the shape you’re flowing your content into.

See the Pen Shape example 2: Shape Inside by Carlos Araya (@caraya) on CodePen

Getting fancy

There are areas of the regions specification that I will touch on briefly because they are just the “nitpicky” aspects or regions. To check if a property is support in any of the supported browsers (if it’s supported at all) check Adobe’s shapes support matrix

If the browser supports the techniques they are cool to play with and, when they work, they lend a more precise and professional look to our web content.

Defining Complex Shapes

Defining anything beyond simple circles and rectangles is a pain in the butt, isn’t it? Wouldn’t it be nice to have a visual tool available to help us plot all the points on the image? Adobe’s Bear Travis, has made available a collection of tools that can help you when working with complex CSS shapes. The tools are hosted on github at<http://betravis.github.io/shape-tools”> and they are very useful unless you want to learn how to calculate shapes on your own.

Exclusions

Exclusions are a complement to shapes that will tell the browser engine how to float the content. and will let you exercise a much finer level of control regarding how the content is floated.

What they are

Exclusions allow you to float arbitrarily shaped objects using values created using CSS shapes and attach additional properties that will allow you to float the content in different ways.

Exclusions are expressed using CSS attributes wrap-around and wrap-through.

Browser support

Surprisingly, at least for me, exclusions are only supported on IE 10+ (I imagine IE 11 will support them too). If in doubt, please test with Chrome Canary, WebKit Nightly and IE10 or IE11 Developer’s preview.

How to use them

The first example we’ll look at is text wrapping around a straight image. We will use the same code that we used on our first shape example and modify it slightly:

Big Example Title


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus vel leo pharetra malesuada. Nulla risus magna, vulputate id elit quis, luctus ullamcorper ligula. Nam at faucibus massa, sed elementum tellus. Proin et dictum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus

This is a test

    <p>This is a major quote for this document and we'll have to offset it from the rest of the text</p>
  </div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus vel leo pharetra malesuada. Nulla risus magna, vulputate id elit quis, luctus ullamcorper ligula. Nam at faucibus massa, sed elementum tellus. Proin et dictum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus

With the following CSS:

#container {
  position: relative;
  padding: 20px;
  border: 1px solid red;
  width: 90%;
  text-align: justify;
  column-count: 2;
}

.excluded {
background: #0ff;
opacity: 0.6;
padding: 10px;
width: 150px;
height: 150px;
left: 45%;
position: absolute;
shape-outside: rectangle(0, 0, 100%, 100%);
float:left;
wrap-flow: both;
}

Currently the example above Only works in IE 10 using the -ms vendor prefix

The final example

Larger and more complex example, including both regions and shapes is forthcoming