Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 05-27-2014, 02:21 PM   #1
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
Aligning poetry lines flush that begin with left quotation marks

Whenever I encounter a poem in which the first line opens with a double left quotation mark [“] and the lines below need to be aligned flush with the first letter of the first word of the first line, e.g. with the 'C' of 'Cuckoo' below, I have been using a double non-breaking space:

Code:
<p class="stanza">&ldquo;Cuckoo, cherry tree,</p>
<p class="line">&nbsp;&nbsp;Good bird tell me</p>
<p class="lastline">&nbsp;&nbsp;How many years I have to live.&rdquo;</p>
Is there any other (better) way of creating the necessary alignment?

Last edited by Derek R; 05-27-2014 at 02:44 PM.
Derek R is offline   Reply With Quote
Old 05-27-2014, 02:24 PM   #2
odedta
Addict
odedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileRead
 
Posts: 211
Karma: 65572
Join Date: Dec 2013
Device: iPad
CSS rule: text-indent: #px/em/pt;

You should read about Semantic HTML, basically it means you should separate content and design where content is your HTML and design goes through CSS
odedta is offline   Reply With Quote
 
Enthusiast
Old 05-27-2014, 02:44 PM   #3
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
Thanks. I use css for styling, hence the paragraph classes, and the 'em' unit for margins and indents, but what would the double quotation mark equate to in terms of em width? I am probably missing the obvious here.
Derek R is offline   Reply With Quote
Old 05-27-2014, 02:55 PM   #4
odedta
Addict
odedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileRead
 
Posts: 211
Karma: 65572
Join Date: Dec 2013
Device: iPad
I guess trial and error is in order

Maybe...
Quote:
text-indent: 0.1em
odedta is offline   Reply With Quote
Old 05-27-2014, 03:03 PM   #5
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
text-indent: 0.5em seems to be approximately right.
Derek R is offline   Reply With Quote
Old 05-27-2014, 03:06 PM   #6
odedta
Addict
odedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileRead
 
Posts: 211
Karma: 65572
Join Date: Dec 2013
Device: iPad
If you want to be 100% sure the lines will fall into place you can use a table.
It requires some styling but that way you can be certain everything is always aligned in the right proportions, view attached (the image has borders for visualization)
Attached Thumbnails
Click image for larger version

Name:	Capture.PNG
Views:	45
Size:	17.6 KB
ID:	123414  
odedta is offline   Reply With Quote
Old 05-27-2014, 03:15 PM   #7
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
Yep, I had thought of it, but I always avoid tables where possible, and I suppose the purists might take a choking fit at the thought of it However, the extra 0.5em does appear to work pretty well.
Derek R is offline   Reply With Quote
Old 05-27-2014, 03:50 PM   #8
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
Just as a postscript, 0.4em seems to work well with most fonts, but changing to Courier threw the alignment. It would be interesting to know if there is a neat solution that avoids the use of a table.
Derek R is offline   Reply With Quote
Old 05-27-2014, 06:19 PM   #9
SBT
Fanatic
SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.
 
SBT's Avatar
 
Posts: 503
Karma: 560981
Join Date: Sep 2010
Location: Norway
Device: prs-t1, phone/Cool Reader, tablet/BlueFire, Nook Simple
You could use css visibility:hidden. Then the text is not shown, but it still takes up space
Code:
«The first line,<br>
<span style="visibility:hidden">«</span>the second line
SBT is offline   Reply With Quote
Old 05-27-2014, 06:39 PM   #10
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
Thank you, SBT, I'd tried that in my html editor and it works fine. My only worry there is that in a different thread it was pointed out to me that:

Quote:
But "visibility" is not among the CSS properties required for ePub 2.0.1, so don't be surprised if it is not supported by some reader.
So I'm in a quandary. Styled tables resolve the problem perfectly well, but it seems a bit like using a sledgehammer to crack a nut
Derek R is offline   Reply With Quote
Old 05-27-2014, 07:46 PM   #11
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 2,317
Karma: 12005829
Join Date: Apr 2010
Location: Phoenix, AZ
Device: Kindle2, iPad, KindleFire and NookColor
Quote:
Originally Posted by Derek R View Post
Just as a postscript, 0.4em seems to work well with most fonts, but changing to Courier threw the alignment. It would be interesting to know if there is a neat solution that avoids the use of a table.

No. There is not. The quotation marks will have a different width for virtually every font. You're beating yourself to death for no reason. TRUST me on this.

Simply drop in styling for a slightly-indented line--all that matters is the ability to convey to the reader that a new line has started. Perfect alignment in this situation is daft. Don't forget that you'll need to use settings with a negative indent, as well (and padding), so that when people use enormous font settings, which MANY do, particularly on smartphones, you'll get an indented line-wrap for material too long for (that) line.

Hitch
Hitch is offline   Reply With Quote
Old 05-27-2014, 08:07 PM   #12
RbnJrg
Evangelist
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 450
Karma: 318994
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Hi Derek;

What you are looking for is a css3 property called "hanging-punctuation". Regrettably, so far is not supported for any web browser and, AFAIK, for any device reader (maybe iPad can have support for it but I don't know). If it were to work, you just would need to add to your css stylesheet the following:

Code:
.hang {
    hanging-punctuation: first;
}
and in your .xhtml file:

Code:
<p class="hang">"This is the first line</p>
<p>This is the second line</p>
<p>...</p>
and you would have something like what you can see in this page:

http://stevehickeydesign.com/blog/20...tion-with-css/

But I'm afraid of this is for the future Let's hope a near future

Regards
Rubén
RbnJrg is offline   Reply With Quote
Old 05-28-2014, 01:40 AM   #13
odedta
Addict
odedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileReadodedta has read every ebook posted at MobileRead
 
Posts: 211
Karma: 65572
Join Date: Dec 2013
Device: iPad
Hitch, why wouldn't a table solve this?
odedta is offline   Reply With Quote
Old 05-28-2014, 03:01 AM   #14
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
Rubén - the "hanging-punctuation property is EXACTLY what is required. It is such a common feature in hard copy publications that it is surprising that the css isn't widely supported yet.

Hitch - thank you. I have several levels of indentation in place using left padding and negative first line indents.

However, at this point it seems as though using tables is the only way of assuring consistent alignment in such cases.
Derek R is offline   Reply With Quote
Old 05-28-2014, 03:22 AM   #15
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
P.S. Floated divs will also do the trick, of course, but when I later import into Indesign to set up a hard copy version I've noticed that the program seems to ignore them.
Derek R is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
quotation marks and apstrophes bails52 Conversion 3 09-01-2013 09:05 AM
Quotation marks overhanging? Cameronpaterson Kobo Reader 14 08-12-2011 05:16 AM
Quotation marks missing... lestatar Conversion 2 06-11-2011 06:39 AM
Funny looking quotation marks Novasea Workshop 9 12-09-2010 09:30 AM
Please help with quotation marks Vauh Calibre 5 04-28-2010 10:15 AM


All times are GMT -4. The time now is 10:49 PM.


MobileRead.com is a privately owned, operated and funded community.