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

Hanging Justification / indent after line break <br>?

user2922
1#
user2922 Published in May 25, 2018, 11:10 am

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 <br /> for the line breaks within a verse, and each verse was within its own <p>. 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

<p class="Verse">Verse Line 1
<p class="Verse">Verse Line 2
<p class="Verse">Verse Line 3
<p class="Verse">Verse Line 4</p>
<br />
<p class="Verse">Verse 2 Line 1...(etc)

With that extra <br /> 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 <p>. 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 <br /> between lines

<p class="Verse">Verse Line 1
<br />Verse Line 2
<br />Verse Line 3
<br />Verse Line 4</p>

<p class="Verse">Verse 2 Line 1...(etc)

Which would allow the plug-in doing the exporting to maintain proper line spacing? Since <br /> 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 <br />, 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).

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.303595 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO