I’m creating pages of hymns. Some lines of the stanzas are flush-left, while others are indented.
<p>First line of the stanza is flush left
<br><span style="padding-left:1em">second line of the stanza is indented</span>
<br>third line of the stanza is flush left
<br><span style="padding-left:1em">fourth line of the stanza is indented</span></p>
However, some lines are long and wrap around. In that case, the line that wraps starts under where it began, either flush left or indented. What I’d like to do is make all wrapped lines indent 1.5em. Is this possible via CSS?
Hi, I’m not quite sure on the best possible way to do this, although wrapping each indented line with a <span> or something, and given a left padding should achieve the ersults (only wrap the lines with the indent around with <span>s I mean :))
I think you are suggesting I manually wrap each line. No, not practical. I’m doing this in the iPhone with the ability for the user to change font size.
That’s how the pre element works. You “preformat” the text and indent them by using tabs or spaces. It doesn’t indent itself automatically but exactly how you indent your text in the HTML document.
OK, I see how to do it. Indent everything leftward in a div, then individually indent each line to the right. The wrapped lines wrap to the div:
<div style="margin-left:2em">
<p>
<span style="margin-left:-1.5em">FIRST line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left
</span>
<br><span style="margin-left:-1em">SECOND line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left
</span>
<br><span style="margin-left:-1.5em">THIRD line of the stanza is flush left
</span>
<br><span style="margin-left:-1em">FOURTH line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stan
</span>
</p>
</div>
Basically the PRE element contains preformatted text. Visual browsers should render preformatted text in a fixed-pitch font, should not collapse whitespace, and shouldn’t wrap long lines.
Obviously you can style it but the reason it is preferred as fixed-pitch; is so it preserves and clearly displays any pre-formatted text and whitespace values.
That makes it unsuitable for my case, because I can’t tell where the line will wrap. The user will be able to change the text size at will. Thanks for the clarification.
…can’t tell where the line will wrap. The user will be able to change the text size at will.
Wrap every pair of lines in a paragraph and use left padding for the second line(s) and pull the first flush left with a negative indent:
p{
padding-left:2em;
text-indent:-2em;
}
<p>First line of the stanza is flush left.
<br>Second line of the stanza is indented, and also next line if it wraps.</p>
<p>Third line of the stanza is flush left.
<br>Fourth line of the stanza is indented.</p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p {
margin:0 0 1em 2em
}
span {
display:block;
text-indent:-1.5em;
margin:0 0 1em
}
span.even {
margin-left:1em
}
</style>
</head>
<body>
<p>
<span>FIRST line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left </span>
<span class="even">SECOND line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left </span>
<span>THIRD line of the stanza is flush left </span>
<span class="even">FOURTH line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stan FOURTH line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stan FOURTH line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stan</span>
<span>FIFTH line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stan</span>
</p>
</div>
</body>
</html>
Before we go any further, I need to tell you something. This will be used on the iPhone. When the user clicks on the email icon, the hymn will be placed in the message box of the email programmatically. Unfortunately, CSS is not ported over. I need <br> next to each line and in the space between stanzas. Then they are spaced correctly. My post #8 satisfies this requirement.
I’m glad you told it will be used in an email and also work in an iPhone. I assume the inline css will be ported. Still I think it should be done with less code.
Now assuming also the first line could wrap but stay flushed left, which outrules the text-indent; The styled second spans could be replaced by a left margin on the container and a block display on the first spans, and any extra spacing breaks by a bottom margin on the container. Obviously you could loose either the div or the p tag too by the resulting margins on either.
From your code-example in post #8:
<<div style="margin-left:2em">
<p style="margin:0 0 1em -1em">
<span style="display:block; margin-left:-.5em">FIRST line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left
</span>
SECOND line of the stanza is indented
<span style="display:block; margin-left:-.5em">THIRD line of the stanza is flush left
</span>
FOURTH line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stan
</p>
</div>
That would save some bytes. And we are happy to be the sounding board.
Thanks for your contribution, but it will not do. The OP was about making the wrapped line indented further in, and your code indents the wrapped line at the same indent as where it started (the line above). My code wraps the wrapped line further right than the previous line.
Ok, you prolly got an answer already… BUT what if for the sake of ease of update you did this :
.stanza span:first-child{text-indent:-2em;}
.stanza span{display:block}
.stanza br{display:none}
.stanza{margin-left:2em}/*use a margin left IF YOU dont want the text to break out of the paragraph box}
<p class=“stanza”>
<span> Your first line of verse. it wont matter if it wraps</span></br>
<span>the edge and position of the the verse</span></br>
<span>Will be controlled by the class: stanza</span></br>
<span>btw, the display:none for the BRs is in case is in a browser thats not getting CSS</span>
</p>
Well not to be nitpicky, but you do <br>'s wrong, instead of <span> couldn’t you have just done a block element instead? And finally, the :first-child isn’t supported in IE6/7 and finally, you’d only be able to select the first line in that case (although iuf you used nth-child it’d be possible, though highly inflexible due to you’d have to update the CSS to make sure each line got indented correctly.
