You might have noticed that I blogged much less during the past 3 months, that was for the most part because almost all of my programming time went into a secret project for Scribd. Something that is finally revealed to the public on July 19th 2011.
Preempting the next question I am usually asked at this point: “What is Scribd?” Scribd is often described as “the YouTube of Documents”. You can upload and share any kind of document on their network and they have an HTML5 reader that you can embed on your blog.
At the time the official statement was that Scribd is working on a mobile reader for iOS and they needed much more control over the rendering and interactivity of HTML-based content than UIWebView would afford them.
Let me tell you how Scribd has completely ditched UIWebView and is revolutionizing the way you read on your iPhone. Introducing Float.
What is Float? Think of it like this: everything digital that you are reading today (blogs, tweeted articles, articles you have on a reading list, eBooks, documents, etc.) in one amazing mobile native app that displays the content in the most perfect way possible on your device.
What follows here is a look at Float from a technical point of view, which I can provide because I was put in charge of the rich text display. If you are interested in reading more about the user experience itself then have a look at the reviews on all the other major blogs. I especially liked the review on Wired.com, which mentions me by name. 🙂
Only The Best Ingredients
My story with Float started 3 months ago. Sam Soffes – whom I greatly admire – discovered my work on CoreText and got me in contact with Scribd’s CTO Jared Friedman. We both were excited by the prospect of doing something on iOS that had never been done before, both technically as well as for the user experience.
The basic approach that almost everybody in our industry takes when it comes to displaying rich text is to use UIWebViews. Which leads to several problems because Apple does not let us at the inner workings of WebKit which ticks inside of these web views. Instead you have to resort to complicated hacks to find out things like the content size of a web page or inject JavaScript commands to implement any sort of non-standard communication.
Oh and it is slow to load, takes enormous amounts of memory and is almost impossible to customize visually if you don’t want to swizzle methods or hack the view hierarchy. Long story short: UIWebView sucks. Ok, you get the picture, now let me tell you how the grown-ups do it.
With iOS 3.2 Apple brought over CoreText to the mobile platform. CoreText brings you NSAttributedString which is basically an NSString where certain areas of text can have different attributes. These attributes – like a certain font or text color – are contained in NSDictionaries that have a certain range for which they are valid. Problem is, Apple forgot to include the initWithHTML method that exists on OSX. So on Macs you can easily create an attributed string from an HTML file and render this in a CATextLayer. Not so on iOS, where you have to painstakingly construct the attributed strings yourself and not just that, CATextLayer exists, but it ignores certain attributes altogether to make it practically unusable.
Enter NSAttributedStrings+HTML, my Open Source project to make it all much easier. It contains three major parts:
- A category for NSAttributedString that gives you an initWithHTML
- Objective-C wrapper classes to wrap CoreText objects
- UI Classes to render this rich text
The main reason why I chose to make it FOSS is because as a single person I can never hope to implement all of HTML. If I had chosen to make this a for pay software people might have felt entitled to get certain things implemented. Instead, on GitHub, they can make they additions they need and can send me a pull request to merge their changes into the master to benefit all.
Scribd is a big believer in Open Source and so you can thank them for sponsoring the project for the past 3 months. Almost all the commits I made during this time came out of that. A few of the most recent ones came from John Engelhart who famously created the fastest JSON parser of the world: JSONKit. BTW, John recently signed up full-time to work on Scribd’s iOS Team. And so can you, they are now hiring more than ever, especially since Sam Soffes moved on to new horizons.
Personally I am too old and too married here in Austria to move to San Francisco, so I’ve been working under contract with Scribd. Because of this our contract contains three levels of licensing in to cover the various levels of ownership and rights of the source code involved:
- Open Source – code is owned by me, licensed publicly, Scribd would pay for the continued development necessary to provide the foundation for the other levels
- Proprietary – there is a great deal of proprietary code I developed on top of the open source. This code is owned by Scribd.
- Cross-Licensed – a few bits of code are owned by me and developed for use in my rich text editor. These I need to own so that I can sell it in other components, but Scribd has an automatic license.
At this point I probably should give you a demo of the app so that you see what I am talking about.
All the rendering you see is in the Open Source project. Everything related to user interaction is the proprietary part. To give some examples for Scribd proprietary tech: dynamic switching between paging and scrolling mode, fast font resizing and style changing and multi-threaded layouting. Imagine me tinkering, programming, experimenting for the better part of two months to get the performance and responsiveness to where it is today.
How Float Got It’s Name
Let me also tell you the story of how Float got it’s name because this is closely related to this topic. Scribd’s CEO Trip Adler had a certain vision of how the ideal reading experience would look like. He felt that the user/reader should be able to decide for himself whether he preferred scrolling or paging through text. This is what he called “the Floating Reading Experience”. The user should be able to float around without such artificial bounds.
I have to admit – at that time – I was unsure how I would pull that off, secretly I thought Trip was crazy, pardon the pun: tripping. But I kept experimenting, tinkering, threw away a couple of failed approaches until I ended up with what you see today. Lo and behold, it is amazingly close to the original vision which is why Scribd rebranded the app as Float.
I learned one thing from this experience: as an engineer you might consider some ideas that your leaders come up with as crazy and impossible. But if you put enough work into it, even the impossible becomes possible after a while. The “Impossible” takes around 2 months.
There is one other ingredient in Float’s secret sauce that makes this possible. Scribd has developed amazing server-side technology to break apart fixed-structure documents of any kind and make then reflowable. For example they can dissolve a PDF and provide output where you can change the font size and pagination based on the device you are reading on. If there is something that is too complex to be put as pure text (like tables or a signature) then they render an image of that.
This is actually the much greater feat because at my end CoreText only has to worry about displaying this custom “clean room” HTML as opposed to having to worry about malformed tags and what not. I keep telling people that NSAS+HTML is great if they control the HTML and this is the perfect example. I know exactly which tags can come out of this reflow process and this predictability is key in having the display of text work all of the time.
So these are the two main ingredients that make Float unique and miles ahead of any kind of competition. And of course it gives me as a contributor a good feeling to be associated with a company that is in this position.
Try It Out Now!
Only time can tell if users will understand and accept how revolutionary Float actually is. But from a technical perspective I can honestly say that we did all that is humanly possible to make the greatest app (and service) we can. Please try it out now, it’s free. And once you have sufficiently marveled at it, let us know – preferably publicly – how you like it.
Categories: Projects
