Combining Class IDs In CSS to Control Left-Indent

SeaCanary · 02-22-2014, 09:01 PM

I want to accomplish this:

Code:

There lived a lady in Scotland,
      Hey my love and ho my joy
There lived a lady in Scotland,
      Who dearly loved me
There lived a lady in Scotland,
An she's fa'n in love wi an Englishman,
      And bonnie Susie Cleland is to be burnt in Dundee

The father unto the daughter came,
      Hey my love and ho my joy
The father unto the daughter came,
      Who dearly loved me
...

I've already accomplished this:

Code:

I had a true love, if ever a girl had one
I had a true love, a brave lad was he
One fine Easter morning, with his gallant comrades
He started away for to set Ireland free.

      cho: All round my heart, I'll wear the tri-colored ribbon
      All 'round my heart I'll wear the green white and gold;
      And if anyone should ask me the reason that I'm wearing it
      It's for my true love (I never more shall see) or (in the I.R.A.)

He whispered, "Goodbye, love, Old Ireland is calling
High over Dublin the tricolour flies;
In the streets of the city, the foeman is falling
...

Using this CSS code:

Code:

.verse {
    margin-bottom: 0.5em;
    }
.verse p {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 1em;
    text-indent: -1em;
    }
.chorus p {
    margin-left: 2em;
    font-style: italic;
    }

And this HTML code:

Code:

  <div class="verse">
    <p>I had a true love, if ever a girl had one</p>
    <p>I had a true love, a brave lad was he</p>
    <p>One fine Easter morning, with his gallant comrades</p>
    <p>He started away for to set Ireland free.</p>
  </div>

  <div class="verse chorus">
    <p>cho: All round my heart, I'll wear the tri-colored ribbon</p>
    <p>All 'round my heart I'll wear the green white and gold;</p>
    <p>And if anyone should ask me the reason that I'm wearing it</p>
    <p>It's for my true love (I never more shall see) or (in the I.R.A.)</p>
  </div>

  <div class="verse">
    <p>He whispered, "Goodbye, love, Old Ireland is calling</p>
    <p>High over Dublin the tricolour flies;</p>
...

Can anyone suggest a way to accomplish what I want using CSS, perhaps similar to what I've aalready done?

theducks · 02-22-2014, 09:58 PM

Quote:

Originally Posted by SeaCanary

I want to accomplish this:

Can anyone suggest a way to accomplish what I want using CSS, perhaps similar to what I've aalready done?

That is being done by the CSS along with the HTML

Your chorus is appears to be creating a <blockquote>

Are you expecting some sort of CSS magic so you don't have to wrap those divs around the Paragraphs?

SeaCanary · 02-22-2014, 10:21 PM

Quote:

Originally Posted by theducks

<snip>
Are you expecting some sort of CSS magic so you don't have to wrap those divs around the Paragraphs?

Sorry for the confusion. I'm quite happy to use HTML code along with CSS.

theducks · 02-22-2014, 10:56 PM

Looks good to me.
There are poetry CSS samples down in EPUB

SeaCanary · 02-23-2014, 12:18 AM

I scanned thru the Poetry section of EPUBS. There are a few examples that include the use of <br/> like Kalevala.epub. The use of <br/> is counter indicated. I'd much rather do this using CSS and HTML <div class="..."> if at all possible.

Any suggestions would be most welcome.

Jellby · 02-23-2014, 02:54 AM

Code:

<div class="poetry">
<div class="stanza">
<div class="line">There lived a lady in Scotland,</div>
<div class="line in">Hey my love and ho my joy</div>
<div class="line">There lived a lady in Scotland,</div>
<div class="line in">Who dearly loved me</div>
<div class="line">There lived a lady in Scotland,</div>
<div class="line">An she's fa'n in love wi an Englishman,</div>
<div class="line in">And bonnie Susie Cleland is to be burnt in Dundee</div>
</div>

<div class="stanza">
<div class="line">The father unto the daughter came,</div>
<div class="line in">Hey my love and ho my joy</div>
<div class="line">The father unto the daughter came,</div>
<div class="line in">Who dearly loved me</div>
...
</div>
</div>

Code:

div.poetry {
  margin: 1em 0 2em;
  text-align: left;
}
div.poetry div.stanza {
  margin-top: 0.5em;
}
div.poetry div.line {
  padding-left: 3em;
  text-indent: -3em;
}
div.poetry div.in {
  margin-left: 2em;
  font-style: italic;
}

I've decided against using "<p>" in poetry, since lines are not paragraphs, although "<p>" is more convenient than "<div class="line">", but the latter behaves nicer when the CSS is not supported at all.

SeaCanary · 02-23-2014, 07:35 AM

Thank you. I came up with a solution using both <div> and <p>.

Code:

  <div class="verse">
    <p>There lived a lady in Scotland,</p>
    <div class="ILC">Hey my love and ho my joy</div>
    <p>There lived a lady in Scotland,</p>
    <div class="ILC">Who dearly loved me</div>
    <p>There lived a lady in Scotland,</p>
    <p>An she's fa'n in love wi an Englishman,</p>
    <div class="ILC">And bonnie Susie Cleland is to be burnt in Dundee</div>
  </div>

  <div class="verse">
    <p>The father unto the daughter came,</p>
    <div class="ILC">Hey my love and ho my joy</div>
    <p>The father unto the daughter came,</p>
    <div class="ILC">Who dearly loved me</div>

With the following CSS code.

Code:

.verse {
    margin-bottom: 0.5em;
    }
.ILC {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 2em;
    text-indent: -1em;
    font-style: italic;
    }
.verse p {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 1em;
    text-indent: -1em;
    }

Which generates this:

Code:

There lived a lady in Scotland,
   Hey my love and ho my joy
There lived a lady in Scotland,
   Who dearly loved me
There lived a lady in Scotland,
An she's fa'n in love wi an Englishman,
   And bonnie Susie Cleland is to be burnt in Dundee

The father unto the daughter came,
   Hey my love and ho my joy
The father unto the daughter came,
   Who dearly loved me

Jellby · 02-23-2014, 07:51 AM

Quote:

Originally Posted by SeaCanary

Thank you. I came up with a solution using both <div> and <p>.

Ugh! I can't say I like that, but it's your code

SeaCanary · 02-23-2014, 07:56 AM

I think I understand why. Have you tested your solution on a Nook?

SeaCanary · 02-23-2014, 07:57 AM

Or a Cybook Orizon?

Jellby · 02-23-2014, 02:08 PM

That's my usual coding for poetry, which does work fine in my reader (Cybook Orizon). You can find it in some of the books I've uploaded to the library. But I haven't tried this particular bit, I might have done some mistake

Hitch · 02-23-2014, 04:24 PM

My sole comment about all of this:

If you plan to use this in any form or fashion for Kindle books (mobi) you are in for a rude surprise on KF8 devices if someone enlarges the fonts. That cute negative indent "trick" that used to work for poetry? Can't be done alone any longer.

Hitch

SeaCanary · 02-23-2014, 05:27 PM

Quote:

Originally Posted by Hitch

My sole comment about all of this:

If you plan to use this in any form or fashion for Kindle books (mobi) you are in for a rude surprise on KF8 devices if someone enlarges the fonts. That cute negative indent "trick" that used to work for poetry? Can't be done alone any longer.

Hitch

What does one have to do to accomplish what I want?

Hitch · 02-24-2014, 01:58 PM

Quote:

Originally Posted by SeaCanary

What does one have to do to accomplish what I want?

You need padding, not margin, to offset. Otherwise, at larger font sizes, the left-hand-text will run off the edge of the screen.

Hitch

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Combining Italics And Normal Text In One Line Via CSS	SeaCanary	Sigil	4	02-09-2014 10:36 AM
Bug converting html css text-indent and left-margin	bhoyt	Conversion	15	01-24-2014 07:28 PM
Reducing left-margin indent	Siavahda	ePub	1	02-10-2013 12:40 PM
indent control	cybmole	Conversion	18	02-18-2011 11:12 AM
Too much left indent!	Barty	Amazon Kindle	12	11-09-2010 02:43 PM

02-22-2014, 10:56 PM	#4
theducks Well trained by Cats Posts: 30,882 Karma: 59840450 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Looks good to me. There are poetry CSS samples down in EPUB

02-23-2014, 12:18 AM	#5
SeaCanary Enthusiast Posts: 34 Karma: 10 Join Date: Jan 2014 Device: Nook	I scanned thru the Poetry section of EPUBS. There are a few examples that include the use of <br/> like Kalevala.epub. The use of <br/> is counter indicated. I'd much rather do this using CSS and HTML <div class="..."> if at all possible. Any suggestions would be most welcome.

02-23-2014, 07:56 AM	#9
SeaCanary Enthusiast Posts: 34 Karma: 10 Join Date: Jan 2014 Device: Nook	I think I understand why. Have you tested your solution on a Nook?

02-23-2014, 07:57 AM	#10
SeaCanary Enthusiast Posts: 34 Karma: 10 Join Date: Jan 2014 Device: Nook	Or a Cybook Orizon?

02-23-2014, 02:08 PM	#11
Jellby frumious Bandersnatch Posts: 7,543 Karma: 19001583 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	That's my usual coding for poetry, which does work fine in my reader (Cybook Orizon). You can find it in some of the books I've uploaded to the library. But I haven't tried this particular bit, I might have done some mistake

02-23-2014, 04:24 PM	#12
Hitch Bookmaker & Cat Slave Posts: 11,503 Karma: 158448243 Join Date: Apr 2010 Location: Phoenix, AZ Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2	My sole comment about all of this: If you plan to use this in any form or fashion for Kindle books (mobi) you are in for a rude surprise on KF8 devices if someone enlarges the fonts. That cute negative indent "trick" that used to work for poetry? Can't be done alone any longer. Hitch

Advert

Advert