View Single Post
Old 01-03-2017, 04:29 PM   #20
cadele
Addict
cadele ought to be getting tired of karma fortunes by now.cadele ought to be getting tired of karma fortunes by now.cadele ought to be getting tired of karma fortunes by now.cadele ought to be getting tired of karma fortunes by now.cadele ought to be getting tired of karma fortunes by now.cadele ought to be getting tired of karma fortunes by now.cadele ought to be getting tired of karma fortunes by now.cadele ought to be getting tired of karma fortunes by now.cadele ought to be getting tired of karma fortunes by now.cadele ought to be getting tired of karma fortunes by now.cadele ought to be getting tired of karma fortunes by now.
 
cadele's Avatar
 
Posts: 372
Karma: 3710372
Join Date: Feb 2010
Device: Kindles, Sony 650
Quote:
Originally Posted by RbnJrg View Post
Yes, there are several ways to do what you want. One aproximation could be:

1. In the .css stylesheet:

Code:
p {
   font-size: 1em;
   text-indent: 1.2em;
   text-align: justify;
}

div.epigraph {
   text-indent: 0;
   text-align: center;
   font-style: italic;
   font-weight: bold;
   font-size: 1.1em;
}

div.epigraph div.stanza {
   width: 60%;  /* You can play here with the width */
   margin: 1em 20%; /* Left and right margins are linked with the width you set */
   padding: 0.5em; /* This is not necessary, only if you want a border around the stanza */
   text-indent: 0;
   text-align: left;
   font-size: 0.8em;
   font-weight: normal;
   border: 1px solid; /* This is not necessary */
} 

div.stanza p {
   margin: 0;
}
2. In your .xhtml file:

Code:
<div class="epigraph">
    This is the title
    <div class="stanza">
       <p>"The Spirit of the Lord is upon me,</p>
       <p>because he has anointed me</p>
       <p>to bring good news to the poor.</p>
    </div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula.</p>
This is how it looks in Sigil:

Attachment 141488

Below you can check the respective epub.

Regards
Rubén
I know this is an old thread, but thank you so much for this. Karma to you.

I am useless at CSS, but this has been a great help to me
cadele is offline   Reply With Quote