Aligning poetry lines flush that begin with left quotation marks

[Derek R]

Whenever I encounter a poem in which the first line opens with a double left quotation mark [“] and the lines below need to be aligned flush with the first letter of the first word of the first line, e.g. with the 'C' of 'Cuckoo' below, I have been using a double non-breaking space:

<p class="stanza">&ldquo;Cuckoo, cherry tree,</p>
<p class="line">&nbsp;&nbsp;Good bird tell me</p>
<p class="lastline">&nbsp;&nbsp;How many years I have to live.&rdquo;</p>

Is there any other (better) way of creating the necessary alignment?

[odedta]

CSS rule: text-indent: #px/em/pt;

You should read about Semantic HTML, basically it means you should separate content and design where content is your HTML and design goes through CSS

[Derek R]

Thanks. I use css for styling, hence the paragraph classes, and the 'em' unit for margins and indents, but what would the double quotation mark equate to in terms of em width? I am probably missing the obvious here.

[odedta]

I guess trial and error is in order

Maybe...

text-indent: 0.1em

[Derek R]

text-indent: 0.5em seems to be approximately right.

[odedta]

If you want to be 100% sure the lines will fall into place you can use a table.
It requires some styling but that way you can be certain everything is always aligned in the right proportions, view attached (the image has borders for visualization)

[Derek R]

Yep, I had thought of it, but I always avoid tables where possible, and I suppose the purists might take a choking fit at the thought of it However, the extra 0.5em does appear to work pretty well.

[Derek R]

Just as a postscript, 0.4em seems to work well with most fonts, but changing to Courier threw the alignment. It would be interesting to know if there is a neat solution that avoids the use of a table.

[SBT]

You could use css visibility:hidden. Then the text is not shown, but it still takes up space

«The first line,<br>
<span style="visibility:hidden">«</span>the second line

[Derek R]

Thank you, SBT, I'd tried that in my html editor and it works fine. My only worry there is that in a different thread it was pointed out to me that:

But "visibility" is not among the CSS properties required for ePub 2.0.1, so don't be surprised if it is not supported by some reader.

So I'm in a quandary. Styled tables resolve the problem perfectly well, but it seems a bit like using a sledgehammer to crack a nut

[Hitch]

Originally Posted by Derek R

Just as a postscript, 0.4em seems to work well with most fonts, but changing to Courier threw the alignment. It would be interesting to know if there is a neat solution that avoids the use of a table.

No. There is not. The quotation marks will have a different width for virtually every font. You're beating yourself to death for no reason. TRUST me on this.

Simply drop in styling for a slightly-indented line--all that matters is the ability to convey to the reader that a new line has started. Perfect alignment in this situation is daft. Don't forget that you'll need to use settings with a negative indent, as well (and padding), so that when people use enormous font settings, which MANY do, particularly on smartphones, you'll get an indented line-wrap for material too long for (that) line.

Hitch

[RbnJrg]

Hi Derek;

What you are looking for is a css3 property called "hanging-punctuation". Regrettably, so far is not supported for any web browser and, AFAIK, for any device reader (maybe iPad can have support for it but I don't know). If it were to work, you just would need to add to your css stylesheet the following:

.hang {
    hanging-punctuation: first;
}

and in your .xhtml file:

<p class="hang">"This is the first line</p>
<p>This is the second line</p>
<p>...</p>

and you would have something like what you can see in this page:

http://stevehickeydesign.com/blog/20...tion-with-css/

But I'm afraid of this is for the future Let's hope a near future

Regards
Rubén

[odedta]

Hitch, why wouldn't a table solve this?

[Derek R]

Rubén - the "hanging-punctuation property is EXACTLY what is required. It is such a common feature in hard copy publications that it is surprising that the css isn't widely supported yet.

Hitch - thank you. I have several levels of indentation in place using left padding and negative first line indents.

However, at this point it seems as though using tables is the only way of assuring consistent alignment in such cases.

[Derek R]

P.S. Floated divs will also do the trick, of course, but when I later import into Indesign to set up a hard copy version I've noticed that the program seems to ignore them.