Blog: #design

I wanted to add small timelines to a little web-based genealogy proof-of-concept I’m working on, and I realized that it’d be pretty easy to make the tick marks using CSS box-shadows. And it was.

There are some caveats (if you change the background color, you have to edit the CSS to match — you can’t use an rgba color with an opacity of 0 because then the tick marks fill the whole space), but overall it works well.

Reply via email

2018 note: this post has some formatting issues from when I migrated to a new blog engine. Until I get time to get it fixed, you’ll have to view source to see the markup correctly. (The post is also somewhat obsolete now, I think.)

A lot of the ebooks I’m working on have poetry, and after struggling with the formatting for a while, I think I’ve finally found some methods that are quite acceptable for EPUB (iBooks and Adobe Digital Editions) and somewhat acceptable for Kindle.

Without line numbers

This is the easiest. We’ll be working with the first two stanzas of “Adam-ondi-Ahman”, aiming for the following formatting:

EPUB

First off, there’s no standard way to mark up poetry. This works for me, but if you’ve got a better way, let us know in the comments.

Markup

    
This earth was once a garden place,
        
With all her glories common,
    
And men did live a holy race,
    
And worship Jesus face to face,
        
In Adam-ondi-Ahman.

    
We read that Enoch walk'd with God,
        
Above the power of mammon,
    
While Zion spread herself abroad,
    
And Saints and angels sung aloud,
        
In Adam-ondi-Ahman.

So, encapsulate the poem in a .poetry div, put each line in a <p> tag, and use the .indent class for indenting lines. For new stanzas, add a .stanza class to the first line.

CSS

.poetry                 { margin: 1em 0; }
.poetry p               { margin: 0 0 0 4em; text-indent: -2em; }
.poetry p.stanza        { margin-top: 1em; }
.poetry p.indent        { margin-left: 5em; }
.poetry p.indent2       { margin-left: 5.5em; }
.poetry p.indent3       { margin-left: 6em; }

And that’ll give you hanging indents and proper indentation and all that good stuff, indenting the whole poem 2em from the left; if you need further indentation, you can use the .indent2 and .indent3 classes (and of course modify them however you need).

To set the poetry flush left, by the way, change margin: 0 0 0 4em to margin: 0 0 0 2em and set the .indent classes to start at 3em instead of 5em.

Kindle (no hanging indent)

If your lines are short enough that you don’t need to worry about using hanging indents, this markup is clean and short:

Markup

This earth was once a garden place,
    
With all her glories common,
And men did live a holy race,
And worship Jesus face to face,
    
In Adam-ondi-Ahman.

We read that Enoch walk'd with God,
    
Above the power of mammon,
While Zion spread herself abroad,
And Saints and angels sung aloud,
    
In Adam-ondi-Ahman.

CSS

p           { text-align: left; }
p.stanza    { margin-top: 1em; }
p.indent    { text-indent: 3em; }

Fairly simple.

Kindle (hanging indent)

With longer lines, you’ll usually want to give them hanging indents, as is traditional in formatting poetry. We can do this on the Kindle using nested “ tags.

There’s a catch, though: if you use this technique for hanging indents, you can’t do further indentation using CSS (like line 2 in our example poem) — as soon as you try to add the hanging indent, the whole thing goes flush left again. Instead, you have to resort to the dreaded   entity. If any of you figure out how to get indents and hanging indents on the Kindle, let me know.

Markup

This earth was once a garden place,
    
     With all her glories common,

And men did live a holy race,

And worship Jesus face to face,

    
     In Adam-ondi-Ahman.


We read that Enoch walk'd with God,

    
     Above the power of mammon,

While Zion spread herself abroad,

And Saints and angels sung aloud,

    
     In Adam-ondi-Ahman.

Note that for a new stanza, we replace the .inner class with .stanza (since the Kindle parser can’t handle two CSS classes on the same element).

CSS

p           { text-align: left; }
p.outer     { text-indent: 2em; }
p.inner     { text-indent: -2em; }
p.stanza    { text-indent: -2em; margin-top: 1em; }

With line numbers

Now it gets a little more complicated. For all of these, I’m using manually entered line numbers. Once EPUB readers support more CSS selectors (like :nth-child), though, it’ll be possible to do this automatically.

There are two basic styles of line numbers in poetry. Here’s left-aligned, using the first twelve lines of the Old English poem “Dream of the Rood” as an example of what we’re trying to achieve:

And right-aligned:

EPUB markup (left- and right-aligned line numbers)

The markup is the same for both left-aligned and right-aligned line numbers:

    
Hwæt! Ic swefna cyst  secgan wylle,
    
hwæt me gemætte  to midre nihte,
    
syðþan reordberend  reste wunedon!
    
þuhte me þæt ic gesawe  syllicre treow

    5

    
on lyft lædan,  leohte bewunden,
    
beama beorhtost.  Eall þæt beacen wæs
    
begoten mid golde.  Gimmas stodon
    
fægere æt foldan sceatum,  swylce þær fife wæron
    
uppe on þam eaxlegespanne.  Beheoldon þær engel dryhtnes ealle,

    10

    
fægere þurh forðgesceaft.  Ne wæs ðær huru fracodes gealga,
    
ac hine þær beheoldon  halige gastas,
    
men ofer moldan,  ond eall þeos mære gesceaft.
    
Syllic wæs se sigebeam,  ond ic synnum fah,
    
forwunded mid wommum.  Geseah ic wuldres treow,

EPUB CSS (left-aligned line numbers)

.poetry             { margin: 1em 0; }
.poetry p           { margin: 0 0 0 6em; text-indent: -3em; }
.poetry p.indent    { margin-left: 7em; }
.poetry .num        { float: left; margin-left: 5px; font-size: .8em;
                        color: #999; font-style: italic; }
.poetry .caesura     { display: inline-block; width: 2em; }

EPUB CSS (right-aligned line numbers)

.poetry             { margin: 1em 0; }
.poetry p           { margin: 0 2em 0 2em; text-indent: -2em; }
.poetry p.indent    { margin-left: 1em; }
.poetry .num        { float: right; margin-left: 2em; margin-right: 5px;
                        font-size: .8em; color: #999; font-style: italic; }
.poetry .caesura     { display: inline-block; width: 2em; }

Kindle (right-aligned)

With Kindle, alas, there’s no good way to set line numbers with poetry. The best I’ve come up with has the line numbers right aligned on their own line, which means every five lines (or however often you put line numbers in) there’s a stanza-like blank line. You’ll also notice that the .caesura spans have been replaced with manual strings of  , because the spans don’t work on Kindle.

Markup

Hwæt! Ic swefna cyst       secgan wylle,

hwæt me gemætte       to midre nihte,

syðþan reordberend       reste wunedon!

þuhte me þæt ic gesawe       syllicre treow


5

on lyft lædan,       leohte bewunden,

beama beorhtost.       Eall þæt beacen wæs

begoten mid golde.       Gimmas stodon

fægere æt foldan sceatum,       swylce þær fife wæron

uppe on þam eaxlegespanne.       Beheoldon þær engel dryhtnes ealle,


10

fægere þurh forðgesceaft.       Ne wæs ðær huru fracodes gealga,

ac hine þær beheoldon       halige gastas,

men ofer moldan,       ond eall þeos mære gesceaft.

CSS

p           { text-align: left; }
p.outer     { text-indent: 2em; }
p.inner     { text-indent: -2em; }
p.num       { font-style: italic; text-indent: 90%; }

Conclusion

Nice as it would be to have a cross-platform EPUB/Kindle solution for formatting poetry, that day hasn’t yet come. But in spite of the occasional hassles (I’m looking at you, Kindle), you can get decent-looking results without resorting to too much hackery.

Reply via email

For those who liked the project tracker, here’s a PDF version (I’m now calling it a project tracker instead of a project calendar):

You can print it out, fold it up, and carry it in your pocket, or post it on your refrigerator or desk, or three-hole punch it (there’s room on the top margin for that) and put it in a binder. You do have to fill out the month, days, and days of the week manually, but there’s a little more flexibility this way.

Reply via email

It’s a project calendar for keeping track of (a) which projects I’m working on and (b) when I’ve worked on them. That way I can easily see where my time is spent and possibly where I need to adjust things. (“Looks like I’m neglecting my writing. Time to fix that.”)

I started out using the back of my Field Notes notebook, since it has a handy grid, but I ran into a problem: when I finish the notebook, I no longer have my project calendar with me.

Enter Google Spreadsheets:

The grey boxes mean that the project has ended. Each month is its own sheet, which keeps things tidy. (Projects that end don’t need to be on the next month’s sheet.)

And the best part? It’s super easy to maintain. I can just copy and paste the black boxes, and when I start a new month, it only takes a few seconds to clear out the boxes and change the days of the week.

Speaking of tracking things, I forgot to blog about my writing log (which I used to use back when I was writing more frequently):

I’m also planning to make a grid-based log for scripture reading and family history and other church-related things I want to do more diligently.

Update: You can now download a Google Docs template of the project tracker.

Another update: There’s now a project page for this.

Reply via email

I fell asleep while doing homework this evening, and when I woke up, I knew I had to finish the Plan of Salvation. So, two hours later, here it is:

I’ll have the multilingual editions up soon, along with printable PDFs for full-size and card-size.

Reply via email