Home Hanging Justification / indent after line break <br>?

# Hanging Justification / indent after line break <br>?

Oberon
1#
Oberon Published in 2018-01-13 05:49:40Z
 I am building a site with WordPress, and a lot of content is in verse. If a given line of verse breaks the line, it should be indented. Every line of verse gets a break, obviously, but since content needs to be responsive cannot insert breaks and spacing within any given line. I was originally using 
for the line breaks within a verse, and each verse was within its own 

. However, text-indent only works on the first line of text. The solution I determined was to create a class like this: .Verse { padding-left: 2em; text-indent: -2em; margin: 0; }  and then I would input the HTML as 

Verse Line 1

Verse Line 2

Verse Line 3

Verse Line 4

Verse 2 Line 1...(etc)  With that extra 
after each verse to deal with the 0 margin. This solution displays fine, so one would hope my search is over. But it isn't. Due to factors that, as of right now, are our of my control, I cannot separate each line with a 

. The reason is that I am using a plug-in that allows visitors to export any given page as a PDF, ePub, or mobi, and that plug-in does not seem to read the paragraph styling. So when it exports something coded as I have done above it ignores the margin 0; which results in, as you would expect, large amounts of white space between every line of any given verse, and no distinction between verses. So what can I do that would allow me to instead code it with 
between lines 

Verse Line 1
Verse Line 2
Verse Line 3
Verse Line 4

Verse 2 Line 1...(etc)  Which would allow the plug-in doing the exporting to maintain proper line spacing? Since 
isn't an element I cannot control style using it, but I need to do something to get the indent of -2em to adjust the line and compensate for the padding. I thought it might be possible to create a span which has text-indent of -2em and I apply it to the first word of every line after the 
, and have it work inline so whatever text comes after it follows immediately... But I couldn't figure out exactly how to make that work, even if it will. So any advice would be appreciated. Thanks! (I have poked around in the plugin to try and figure out if I can force it to take the paragraph formatting, and also to embed the fonts, for that matter, but I do not know Javascript and can't make any sense of it, and the plugin author does not seem to respond to requests).

Oberon
2#
Oberon Reply to 2018-01-13 06:06:50Z
 OK, after posting that question I did figure out a solution using a span style: CSS .Verse { padding-left: 2em; text-indent: -2em; } .vspace { margin-left: -2em; }  HTML 

Verse Line 1
Verse Line 2
Verse Line 3
Verse Line 4

Verse 2 Line 1...(etc)  and that seems to work. It is a bit of a pain to code it like that, when any given piece I put may have hundreds of lines of verse, but at least it works. If anyone has better or more streamlined solutions though I would be very interested in them!

 You need to login account before you can post.
Processed in 0.355547 second(s) , Gzip On .