pixelfaith

A Multi-Column Layout Module Experiment

Blown away by the hits this weekend on my experiment. Boredom leads to amazing things, in my experience. So what is this experiment you speak of, Jay? A Bible.

You see, I wanted to experiment with some new CSS3 stuff that I hadn't touched yet, including the multi-column layout module. But to truly see the beauty of the multi-column layout module, you need enough text to work with. So what better text to use than the Word of God? I know, brilliance, right?

So the first test was using The Message translation text for Acts 5. I splashed in some Helvetica Neue Light (only visible on the Mac) for a smooth, elegant feel, and the wonderful multi-column layout module did the rest. So here is the code:

-webkit-column-count: 3;
-webkit-column-gap: 20px;
-moz-column-count: 3;
-moz-column-gap: 20px;
column-count: 3;
column-gap: 20px;

This makes it work in Webkit (Safari, Chrome) and Mozilla (Firefox) browsers. The column-count tells the module to create 3 equally sized columns, and the column-gap adds a 20px gutter between each column. Cool, eh?

So then, here I am looking at the beautiful text of the Bible, formatted beautifully in columns and Helvetica Neue Light, and I said to myself, "Dude, this is the Web, let's make this sucker move!" But, unfortunately, when it comes to the Bible, there are not a lot of good sources to get it on the Web. There are plenty of good Bible readers, but not much in the way of Bible text API's. The most open translation (that isn't open domain like the KJV) is the ESV (English Standard Version, for those that are getting last in acronyms). They actually have their own API, and it is amazingly awesome! With it, one can load entire chapters (or single verses) that are beautifully HTML formatted.

The next step, obvious to the boredom inside me, was to start loading the Bible from ESV's API. So I built a basic interface to jump next and previous chapter/verse, and search for a specific chapter, and then used jQuery to load out the Bible. Since ESV returns as HTML, and AJAX doesn't work cross-domain, this required creating a small proxy script on my server to handle getting and returning the text.

<?php

//get passage
$passage = urlencode($_GET['passage']);

$key = "IP";
$options = "include-first-verse-numbers=0&include-footnotes=1&include-audio-link=0&include-copyright=0&include-short-copyright=0";
$url ="http://www.esvapi.org/v2/rest/passageQuery?key=$key&$options&passage=$passage";

//get data
$ch = curl_init($url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $response = curl_exec($ch);
curl_close($ch);

//print out
print $response;

This simple PHP script uses CURL to load out a passage specified in the GET variable passage. So with a little jQuery action now, we can load out verses/chapters from the Word of God.

$.get('http://pixelfaith.com/bible/bible.php?passage=John+3', function (html) {
    $('#bible').html(html);
}, 'html');

This experiment is continuing, bringing support for this Bible reader to advanced mobile devices and other features. If you have any suggestions, shout it out in the comments below or hit me on Twitter @thefinley