The Indentation Problem

24 Oct 2004

I’ve posted a question along the lines of what follows below (indeed, some is copied verbatim) to the WSG mailing list, so apologies if you’ve seen this already.

Basically, there’s text which requires indentation in order to be true to the original form in which it was written, or simply for the purpose of legibility. The example I’ve used to demonstrate this is the first stanza of Lewis Carroll’s The Hunting of the Snark (a poem).

You can use CSS to indent text with padding and whatever else, but that’s a pain if you have a sitewide CSS file, and the text to be indented isn’t usually sitting in any defining container (be that a div element, or whatever else)

—
Example 1:

“Just the place for a Snark!” the Bellman cried, As he landed his crew with care; Supporting each man on the top of the tide By a finger entwined in his hair.

may be marked up as a single paragraph (as it corresponds to a single stanza of a poem — in this case, the first stanza of Louis Carroll’s “The Hunting of the Snark”, just for a random example.) as follows:

<p>“Just the place for a Snark!” the Bellman cried,<br /> As he landed his crew with care;<br /> Supporting each man on the top of the tide<br /> By a finger entwined in his hair.</p>

—

As line break tags “
” are self-closing elements, I don’t think it is possible to style with them (e.g. to indent the relevant lines) — and, even if it were, it would be an ugly solution (assuming I’m even thinking along the right lines, and that it would work at all):

—
Example 2:

<p>“Just the place for a Snark!” the Bellman cried,<br class=”indent” /> As he landed his crew with care;<br /> Supporting each man on the top of the tide<br class=”indent” /> By a finger entwined in his hair.</p>

—

Assuming the style would apply to the following, and not preceding, line. This example is untested, and would most likely not work at all. I’m just thinking out loud.

One potential solution (albeit a hideous and bloated one) is simply to use repeated non-breaking space characters:

—
Example 3:

<p>“Just the place for a Snark!” the Bellman cried,<br />    As he landed his crew with care;<br /> Supporting each man on the top of the tide<br />    By a finger entwined in his hair.</p>

—

but that, of course, probably isn’t the most desirable solution.

In terms of light markup (but of dubious semantic appropriateness), I’ve seen definition lists employed to this end quite effectively:

—
Example 4:

<dl> <dd>“Just the place for a Snark!” the Bellman cried, <dl> <dd>As he landed his crew with care;</dd> </dl> </dd> <dd>Supporting each man on the top of the tide <dl> <dd>By a finger entwined in his hair.</dd> </dl> </dd> </dl>

This renders without any problems in visual user agents without styling required, and is apparently valid XHTML — but it seems dubious to me. It appears structurally better, at least to me (my eyes follow the markup flow more easily than the other examples above), but that doesn’t deal with the issue of semantics.

Neerav recommended the use of blockquote elements to markup indentation, which I think is about as semantically correct as using definition lists, and said as much in another email:

In the HTML4 recommendation (http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.2), the semantic meaning of blockquote and q is defined as being for quotations. That’s okay — for the purpose of the example I used, at least. If I were to reproduce the whole 8 fits of the poem, then it ceases to be a quotation, and begins to be a work in its own right…

…[this website] demonstrates the use of a blockquote element, with styling appropriate to the purpose (or at least, my understanding of the purpose of the element at the time I developed the CSS file). Imagine if I were to attempt to apply that to the example below… [Lewis Carroll’s poem] …I’d have a mess.

Admittedly, if I defined a class for blockquotes in my CSS file, and specified this class for relevant blockquote elements, then I could achieve my purpose visually — but I’m still stuck out in a semantic hole.

So far, we’ve got a whole bunch of solutions, none of which are really any better than the others. I was nearly resigned to the fact that there were no semantically-correct ways in which to mark indented poetry up! Now is as good a time as any to remark that this is (in the case of most poetry) purely presentational, and I’m being pedantic in looking for a solution. Having said that, this is twice in two days now I’ve wanted to be able to indent content on this website properly, and haven’t been able to.

Mordechai Peller shares his thoughts on the issue, providing significant insight into the problem at hand, and ultimately a working solution. His response is reproduced in part as follows:

Joshua Street wrote:

Is it okay to use definition lists like this at all?

I wouldn’t say a dl is totally out out place here, as there is quite a
bit of flexibility in where a dl is proper, but I think here it is a bit
of a stretch. But were you to use it, it should be done like thus:

<dl> <dt>“Just the…</dt> <dd>As he…</dd> <dt>Supporting…</dt> <dd>By a….</dd> </dl>

Or, better still, does someone have another solution which I’ve missed completely?
With XHTML2 ans CSS3 this would be much easier. XHTML2 has the <l> tag,
though I suppose a <span> can sit in its stead. The lack of CSS3, where
you could select each (2n) lines (I forget the exact syntax), or even
full implementation of CSS2, is more of a problem. Since you need to
work with what’s available, how’s about:

<p class=”stanza”> <span class=”lineA”>“Just the…</span> <span class=”lineB”>As he…</span> <span class=”lineA”>Supporting…</span> <span class=”lineB”>By a….</span> </p>

or:

<p class=”stanza”> “Just the… <span class=”lineB”>As he…</span> Supporting… <span class=”lineB”>By a….</span> </p>

or:

<p class=”stanza”> <span>“Just the… <span>As he…</span></span> <span>Supporting… <span>By a….</span></span> </p>

or:

<div class=”stanza”> <p> “Just the… <span>As he…</span> </p> <p> Supporting… <span>By a….</span> </p> </div>

or even:

<p class=”stanza”> <span>“Just the…<br /> As he…</span> <span>Supporting…<br /> By a….</span> </p>

with:

p { padding-left : 2em; } span { text-indent : -2em; display : block; }

This is one of the few places where a <br /> is semantic.

I’m sure there are more possibilities, but this is what I came up with.

As you can see, he had more than a handful of suggestions, which were quite workable. I’ve got significant issues with most of them, though, because all but the last solution (marked in red) would not render correctly as unstyled content. This ceases (at that point) to be a purely presentational issue — the markup simply doesn’t reflect the line (foot structure, meter, etc.) as composed by the poet. And, at this point it is necessary to point out that accessibility isn’t just about non-sighted users — it’s also about graceful failure in browsers which don’t support every feature the developer may desire. This means Internet Explorer, it means Netscape 4, it means screen readers and it means users who choose to browse with either stylesheets or images disabled, for whatever reason.

The only reason consecutive span tags as in the example would function is because of the CSS information which specifies display: block;. As soon as you disable styles, your content begins to be displayed inline (as span tags will behave by default), and the structure of the poem (or whatever other text) disappears.

With the last example, the line break tag preserves standard formatting without requiring any degree of styling. The indentation disappears, but that doesn’t leave us in any worse a situation than when we began.

So, there we go. A semantic solution! Go forth and use it, or something. I’ll be working it into my style sheets here at some point, and using it as required.