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 01-08-2009, 01:05 PM   #1
brewt
Boo-Frickety-Hoo-Erizer
brewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enough
 
brewt's Avatar
 
Posts: 251
Karma: 686
Join Date: Oct 2007
Device: Kobo Glo HD!
Css Drop Caps does not work in an Epub on a Reader

CORRECTION/EDIT:

CSS DROP CAPS DO WORK IN AN EPUB ON A READER

Message 54 of this thread has an epub that it all works in. If you use Calibre to create it using this solution, set your base font size to Zero to make it work correctly there.

Rest of thread preserved for posterity.

Thanks to all who made it work: Jelby, Llasram, Peter Sorotokin, and Kovid Goyal.

-bjc


/////////////////////////////////////////////////////





At least, I haven't seen it. Attached is what happens with this code:

css:
span.first {
font-variant: small-caps;
margin-left: -0.5em;
}
span.drop {
font-size: 400%;
font-weight: bold;
line-height: 0.75;
float: left;
margin: 0 0.125em 0 0;
}

xhtml:
<p><span class="first"><span class="drop">I</span>n</span> the ancient city of London...</p>


Now the idea that Sony needs to change their code-interpretation is probably indisputable, but who is going to call Sony and correct them? And then get them to distribute a fix? Or Adobe (DE has the same problem)?

C'mon, guys, prove me wrong. Oh, and showing something work in a browser on a computer doesn't count.

-bjc
Attached Thumbnails
Click image for larger version

Name:	P1072542.jpg
Views:	1363
Size:	587.0 KB
ID:	20836  

Last edited by brewt; 01-18-2009 at 03:41 PM.
brewt is offline   Reply With Quote
Old 01-08-2009, 01:45 PM   #2
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
I don't have a Sony to try, but I'm the author of the ePUB example.

I'm pretty sure the problem is that the reader interprets "line-height: 0.75" by lowering the top "border", while browsers typically raise the whole "block" (the drop cap in this case).

I don't claim to be a CSS expert, far from it... I'm not even sure what the correct behaviour could be. Maybe I should add a "vertical-align: top" property? Could you try it?

What I'm sure it's doing wrong is rendering the "I - The Birth of the Prince and the Pauper" line, it should be ignored in the text flow (and, ideally, displayed as a page header from the next page).
Jellby is offline   Reply With Quote
Advert
Old 01-08-2009, 02:21 PM   #3
mtravellerh
book creator
mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.
 
mtravellerh's Avatar
 
Posts: 9,635
Karma: 3856660
Join Date: Oct 2008
Location: Luxembourg
Device: PB360°
Quote:
Originally Posted by Jellby View Post
I don't have a Sony to try, but I'm the author of the ePUB example.

I'm pretty sure the problem is that the reader interprets "line-height: 0.75" by lowering the top "border", while browsers typically raise the whole "block" (the drop cap in this case).
Obviously you're right, Jellby. Sony uses the ADE rendering engine and we knew about this same problem as we have talked about it before. Sony, therefore, generally just reacts the way ADE does.
mtravellerh is offline   Reply With Quote
Old 01-08-2009, 03:12 PM   #4
brewt
Boo-Frickety-Hoo-Erizer
brewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enough
 
brewt's Avatar
 
Posts: 251
Karma: 686
Join Date: Oct 2007
Device: Kobo Glo HD!
Quote:
Originally Posted by Jellby View Post
I don't have a Sony to try, but I'm the author of the ePUB example.
I wasn't trying to pick on you (really really). Your example just happened to look and work better than anything else I had tried. My own experiments were awesomely dismal.


Quote:
Originally Posted by Jellby View Post
I don't claim to be a CSS expert, far from it... I'm not even sure what the correct behaviour could be. Maybe I should add a "vertical-align: top" property? Could you try it?
I would be delighted to.

The Sony Ebook Software is a reasonable simulator for what happens on a Reader. It doesn't care so much about the 300k limit that a real Reader does, but otherwise it's close, if you want to try it.

Oh wait. The Sony stuff is Windows only, and you're running on Linux, if I recall.

But again, I would be delighted to try it, if you wish.

-bjc
brewt is offline   Reply With Quote
Old 01-08-2009, 04:30 PM   #5
llasram
Reticulator of Tharn
llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.
 
llasram's Avatar
 
Posts: 618
Karma: 400000
Join Date: Jan 2007
Location: EST
Device: Sony PRS-505
Quote:
Originally Posted by Jellby View Post
I don't have a Sony to try, but I'm the author of the ePUB example.

I'm pretty sure the problem is that the reader interprets "line-height: 0.75" by lowering the top "border", while browsers typically raise the whole "block" (the drop cap in this case).
I think part of the problem is that the interpretation of the 'line-height' in this case isn't necessarily the most unambiguous way to achieve the result you want. According to the CSS spec, setting 'float' causes the <span/> to become a block-level element. Setting the 'line-height' causes the size of the line-box to become 0.75 of the current em-size, or 3ems. It then says that "[u]ser agents center glyphs vertically in an inline box, adding half-leading on the top and bottom," but "[w]hen the 'line-height' value is less than the content height, the final inline box height will be less than the font size and the rendered glyphs will 'bleed' outside the box." To me this is ambiguous about *how* they bleed -- ADE appears to shrink the line-box at the top & bottom, but then only bleed the glyph out the bottom.

Instead, try setting a 'line-height' of 1em and a 'height' of 1em. That should force the size of the block and line-box to be the same. That said, you probably don't want to set the font size to 400% -- that's 4x the font-size, but the default 'line-height' is probably more than 1.0. The only way to get consistent results is to set the default line-height to a value you control such as 1.2, then you can set the font-size in the drop-cap to something like 4.8em to force it to be 4 lines tall.
llasram is offline   Reply With Quote
Advert
Old 01-09-2009, 06:43 AM   #6
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by brewt View Post
I wasn't trying to pick on you (really really).
I didn't take it that way, don't worry.

Quote:
Oh wait. The Sony stuff is Windows only, and you're running on Linux, if I recall.
Yes, and I tried unsuccessfully to install Calibre (and ADE in a virtual machine), so right now I don't have any real ePUB reader...

Quote:
Originally Posted by llasram View Post
IInstead, try setting a 'line-height' of 1em and a 'height' of 1em. That should force the size of the block and line-box to be the same. That said, you probably don't want to set the font size to 400% -- that's 4x the font-size, but the default 'line-height' is probably more than 1.0. The only way to get consistent results is to set the default line-height to a value you control such as 1.2, then you can set the font-size in the drop-cap to something like 4.8em to force it to be 4 lines tall.
Silly me, I thought a line-height with no units would be a multiple of the current line-height, not just ems... Well, I don't care that much that the drop-cap is an exact number of lines (and I'm reluctant to specify a line-height for normal text, that should be set by the reader), I'm more worried about having unnecessary blank margins above (and especially below) the drop cap. Even if I specify "line-height: 1em; height: 1em", the box is larger that the letter... but I guess that's unavoidable, and depends on the exact font and character (a parenthesis or a Q or accented letter may extend above or below other usual letters).

So, we need to find a compromise. I think it could be enough to combine your suggestion with a negative top-margin, so I propose this:

Code:
span.drop {
  font-size: 400%;
  font-weight: bold;
  float: left;
  margin: -0.15em 0.125em 0 0;
  line-height: 1em;
  height: 1em;
}
For testing purposes, I'm uploaded the modified book (without illustrations, to reduce filesize), I'd be glad to see screenshots from Sony, ADE and Calibre...
Attached Files
File Type: epub test.epub (1.21 MB, 606 views)
Jellby is offline   Reply With Quote
Old 01-09-2009, 07:41 AM   #7
mtravellerh
book creator
mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.
 
mtravellerh's Avatar
 
Posts: 9,635
Karma: 3856660
Join Date: Oct 2008
Location: Luxembourg
Device: PB360°
This is ADE. No changes I guess
Attached Thumbnails
Click image for larger version

Name:	ADE.jpg
Views:	797
Size:	59.5 KB
ID:	20914  
mtravellerh is offline   Reply With Quote
Old 01-09-2009, 07:46 AM   #8
mtravellerh
book creator
mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.
 
mtravellerh's Avatar
 
Posts: 9,635
Karma: 3856660
Join Date: Oct 2008
Location: Luxembourg
Device: PB360°
Calibre looks fine
Attached Thumbnails
Click image for larger version

Name:	Calibre.jpg
Views:	842
Size:	47.2 KB
ID:	20917  
mtravellerh is offline   Reply With Quote
Old 01-09-2009, 08:17 AM   #9
llasram
Reticulator of Tharn
llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.
 
llasram's Avatar
 
Posts: 618
Karma: 400000
Join Date: Jan 2007
Location: EST
Device: Sony PRS-505
Quote:
Originally Posted by Jellby View Post
Yes, and I tried unsuccessfully to install Calibre (and ADE in a virtual machine), so right now I don't have any real ePUB reader...
If you grab the stand-alone executable version of ADE, it actually runs perfectly fine under Wine.

Quote:
Originally Posted by Jellby View Post
Silly me, I thought a line-height with no units would be a multiple of the current line-height, not just ems...
Alas not... The difference between using ems vs. no units is that with no units cascaded elements will be that multiple of their font-size, no matter what the font size is. With ems, you fix the line-height to a particular measure which then doesn't change with changing font-sizes.

Quote:
Originally Posted by Jellby View Post
Well, I don't care that much that the drop-cap is an exact number of lines (and I'm reluctant to specify a line-height for normal text, that should be set by the reader)
I actually don't think it should be a problem as long as it's an em-based or unitless measure which varries with font-size. Because the spec doesn't specify an exact default value there isn't any other way to get pixel-perfect layouts.

Quote:
Originally Posted by Jellby View Post
For testing purposes, I'm uploaded the modified book (without illustrations, to reduce filesize), I'd be glad to see screenshots from Sony, ADE and Calibre...
I apparently should have tested what I was proposing, and I apologize for not having done so :-/. As already posted, no change. However, playing around with it, I discovered that the culprit is the negative left margin on 'span.first'. I hesitate to theorize why ADE doesn't want to float the float before text which is pulled left of the left margin / into the box occupied by the float, but there you go.
llasram is offline   Reply With Quote
Old 01-09-2009, 10:35 AM   #10
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by llasram View Post
However, playing around with it, I discovered that the culprit is the negative left margin on 'span.first'. I hesitate to theorize why ADE doesn't want to float the float before text which is pulled left of the left margin / into the box occupied by the float, but there you go.
Damn! So it's still Adobe's fault, but for a different reason. Now, what could be the solution?... Maybe combining "position: relative; right: 0.5em" and "margin-right: -0.5em" for span.first... but gosh! that's dirty hacking!

Quote:
If you grab the stand-alone executable version of ADE, it actually runs perfectly fine under Wine.
Do you have a link to that stand-alone executable?
Jellby is offline   Reply With Quote
Old 01-09-2009, 11:01 AM   #11
llasram
Reticulator of Tharn
llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.llasram ought to be getting tired of karma fortunes by now.
 
llasram's Avatar
 
Posts: 618
Karma: 400000
Join Date: Jan 2007
Location: EST
Device: Sony PRS-505
Quote:
Originally Posted by Jellby View Post
Do you have a link to that stand-alone executable?
It's linked to from this Adobe knowledgebase article. You can ignore all the directions and just wine the exe without any special setup.
llasram is offline   Reply With Quote
Old 01-09-2009, 01:05 PM   #12
brewt
Boo-Frickety-Hoo-Erizer
brewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enough
 
brewt's Avatar
 
Posts: 251
Karma: 686
Join Date: Oct 2007
Device: Kobo Glo HD!
Poking through Adobe, it seems they knew the drop cap codes wouldn't work a year-and-change ago:


http://blogs.adobe.com/digitaleditio...ntent_for.html



Posted by: Joseph Gray | October 26, 2007 10:54 PM

I'll look at the drop cap code. It's most likely a bug in the Digital Editions. All of these properties are supported and should work.

Support for justification is optional per W3C CSS spec and support for margin value of auto is optional per IDPF OPS spec. We are planning to implement them at some point, but you can never rely on a reading system to support those.


I'm reasonably sure there's been an update or two since 10/07 to ADE, so, this hasn't been on the priority list.

And, as long as we're at it:

Posted by: Kuldeep Kumar | December 23, 2008 01:35 AM

There is no way to turn off page number marks at this point, but it is on our list.



Confession is good:

Posted by: vuchrfvdvr | October 1, 2007 10:46 AM

Some other CSS that doesn't seem to work in Digital Editions are the following:

text-align: justify;
margin-left: auto;
margin-right: auto;



More on the party line:

http://blogs.adobe.com/digitaleditio..._editions.html

-bjc
brewt is offline   Reply With Quote
Old 01-09-2009, 01:20 PM   #13
mtravellerh
book creator
mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.
 
mtravellerh's Avatar
 
Posts: 9,635
Karma: 3856660
Join Date: Oct 2008
Location: Luxembourg
Device: PB360°
Justify works fine with the Calibre epub engine.
mtravellerh is offline   Reply With Quote
Old 01-09-2009, 01:48 PM   #14
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by brewt View Post
Poking through Adobe, it seems they knew the drop cap codes wouldn't work a year-and-change ago:

I'll look at the drop cap code. It's most likely a bug in the Digital Editions. All of these properties are supported and should work.

Support for justification is optional per W3C CSS spec and support for margin value of auto is optional per IDPF OPS spec. We are planning to implement them at some point, but you can never rely on a reading system to support those.


I'm reasonably sure there's been an update or two since 10/07 to ADE, so, this hasn't been on the priority list.
If Llasram is right, and there's no reason to believe he isn't, the drop-caps themselves do work, it is the code after that that breaks them... I mean, maybe they actually fixed the caps, but left some other bug around.

So let's check it, how does this one look? (check chapters IX and XXXII too, they should have a larger negative indent in the first line).
Attached Files
File Type: epub test.epub (1.21 MB, 552 views)
Jellby is offline   Reply With Quote
Old 01-09-2009, 04:43 PM   #15
brewt
Boo-Frickety-Hoo-Erizer
brewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enough
 
brewt's Avatar
 
Posts: 251
Karma: 686
Join Date: Oct 2007
Device: Kobo Glo HD!
Gettin' close - I'll add more screen shots later......
Attached Thumbnails
Click image for larger version

Name:	drop-cap-close-1.jpg
Views:	894
Size:	355.6 KB
ID:	20940   Click image for larger version

Name:	drop-cap-close13.jpg
Views:	732
Size:	234.4 KB
ID:	20941  
brewt 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
converting to epub with my css fbrzvnrnd Calibre 3 04-15-2010 02:46 AM
ePub to ePub - just replace CSS? ChristopherTD Calibre 21 02-11-2010 02:50 AM
newbiq Q about Drop Caps and Calibre NASCARaddicted Calibre 2 01-14-2010 07:03 PM
Using CSS in Word to make a Drop Cap work in an Epub brewt ePub 3 01-31-2009 06:00 PM
css drop caps coming out of calibre brewt Calibre 3 01-18-2009 04:00 PM


All times are GMT -4. The time now is 10:11 AM.


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