03-16-2010, 03:04 AM | #76 |
Fanatic
Posts: 549
Karma: 2928497
Join Date: Mar 2008
Device: Clara 2E & Sage
|
Slight improvement on pseudo drop caps
Code:
p { line-height: 120%; /* This keeps the line heights consistent. Try without this to see what goes wrong. */ text-indent: 1.2em; /* Adjust to suit. */ margin-left: 1em; /* Add some margin so we can move the dropcap left. */ margin-right: 1em; } h2.chapter + p { text-indent: -.8em; /* Move dropcap left just a bit. */ } |
03-16-2010, 04:24 AM | #77 |
Fanatic
Posts: 549
Karma: 2928497
Join Date: Mar 2008
Device: Clara 2E & Sage
|
Drop Caps Holly Grail?
After more experimentation (I can't leave well enough alone), I found a way to make a real drop cap without using span, or any additional HTML markup. Nothing but CSS.
Further tweaks and input welcome. As for me, it's late and I'm off to bed. Code:
p { line-height: 120%; /* This keeps the line heights consistent. Try without this to see what goes wrong. */ text-indent: 1.2em; /* Adjust to suit. */ margin-left: .4em; /* Add some margin so we can move the dropcap left. */ margin-right: .4em; } h1#title { text-align: center; } h2#author { text-align: center; } h2.chapter + p { text-indent: 0; /* No indent wanted on first paragraph of a chapter. */ } /* This looks really good in FF 3.6, but the drop cap is too high in IE 8. */ h2.chapter + p:first-letter { /* This is the pseudo-dropcap. The first letter of the first paragraph after a chapter heading. */ float: left; /* This makes the drop cap work. */ margin: -.1em; /* Move the drop cap left a bit for looks. */ letter-spacing: .1em; /* Adjust spacing to rest of first word. */ color: red; /* Change to suit. */ font-size: +3.8em; /* This looks good to me. Change if you want. */ } |
Advert | |
|
03-16-2010, 05:40 AM | #78 | |
The Grand Mouse 高貴的老鼠
Posts: 72,186
Karma: 308792702
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
Quote:
Now, with a bit of luck, Apple's iPad will have it's own ePub rendering engine, so it might work well there. Which hopefully will encourage Adobe to improve ADE's support for the CSS elements it currently ignores. So although use of pure CSS for formatting is delightful, I'd recommend putting in a first letter span (& possibly a first words span for fancier effects at the start of a chapter). The other thing missing is a specification of the line-height of the first letter pseudo-element or span. This is why it renders so differently. I find your code with a tweak or two works pretty well across browsers and also in ADE. Here's what I have: Code:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:lang="en-US"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <title>Pseudo Drop Caps</title> <style type="text/css"> /* */ p { line-height: 1.2em; /* This keeps the line heights consistent. text-indent: 1.2em; /* Adjust to suit. */ } h1#title { text-align: center; } h2#author { text-align: center; } h2.chapter + p { text-indent: 0; /* No indent wanted on first paragraph of a chapter. */ } span.first-letter {float: left; float: left; /* This makes the drop cap work. */ margin-right: 0.02em; /* small gap to next letter */ color: red; /* Change to suit. */ font-size: 4.2em; /* This looks good to me. Change if you want. */ line-height: 0.85em; /* to make it drop enough, but not too much. Will need to be bigger for drop caps with descenders. (e.g. Q) or the font-size will need to be smaller. */ } span.first-words { font-variant: small-caps; /* doesn't work in ADE :-( /* } /* */ </style> </head> <body> <h1 id="title">Book Title</h1> <h2 id="author">Author Name</h2> <h2 class="chapter">Chapter 1</h2> <p><span class="first-words"><span class="first-letter">T</span>he first letter</span> of this sentence should be red. Lorem ipsum dolor sit amet consectetuer Quisque pharetra velit nisl et. Scelerisque dignissim wisi sed et semper magna eros consequat sapien platea. Nam hendrerit Donec Sed Aliquam mi at lacinia et et molestie. Curabitur tempus at ut ut diam Nunc id Aenean velit Proin. Semper in Sed ligula lacinia lacinia ac Duis ullamcorper velit elit. Nunc congue pretium.</p> <p>This sentence should be normal. Lorem ipsum dolor sit amet consectetuer Quisque pharetra velit nisl et. Scelerisque dignissim wisi sed et semper magna eros consequat sapien platea. Nam hendrerit Donec Sed Aliquam mi at lacinia et et molestie. Curabitur tempus at ut ut diam Nunc id Aenean velit Proin. Semper in Sed ligula lacinia lacinia ac Duis ullamcorper velit elit. Nunc congue pretium.</p> <h2 class="chapter">Chapter 2</h2> <p><span class="first-words"><span class="first-letter">T</span>he first letter</span> of this sentence should be red. Lorem ipsum dolor sit amet consectetuer Quisque pharetra velit nisl et. Scelerisque dignissim wisi sed et semper magna eros consequat sapien platea. Nam hendrerit Donec Sed Aliquam mi at lacinia et et molestie. Curabitur tempus at ut ut diam Nunc id Aenean velit Proin. Semper in Sed ligula lacinia lacinia ac Duis ullamcorper velit elit. Nunc congue pretium.</p> <p>This sentence should be normal. Lorem ipsum dolor sit amet consectetuer Quisque pharetra velit nisl et. Scelerisque dignissim wisi sed et semper magna eros consequat sapien platea. Nam hendrerit Donec Sed Aliquam mi at lacinia et et molestie. Curabitur tempus at ut ut diam Nunc id Aenean velit Proin. Semper in Sed ligula lacinia lacinia ac Duis ullamcorper velit elit. Nunc congue pretium.</p> </body> </html> |
|
03-16-2010, 07:18 AM | #79 |
Fanatic
Posts: 549
Karma: 2928497
Join Date: Mar 2008
Device: Clara 2E & Sage
|
Can't sleep. Correction to last post.
Since I can't sleep, I took another look at the CSS I posted last. I noticed some errors. For the drop caps CSS, I had:
Code:
margin: -.1em; Code:
margin-left: -.1em; Code:
line-height: 50%; Code:
font-size: 3.5em; |
03-16-2010, 01:04 PM | #80 |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Note that :first-letter is not in the required CSS subset of ePUB, so that you cannot rely on any reader supporting it, it's not ADE's fault this time
Future versions of the spec might include :first-letter and other pseudo elements. |
Advert | |
|
03-16-2010, 02:04 PM | #81 | |
The Grand Mouse 高貴的老鼠
Posts: 72,186
Karma: 308792702
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
Quote:
http://www.idpf.org/2007/ops/OPS_2.0_final_spec.html certainly it says "The CSS-based style sheet constructs in this specification define required rendering functionality. To minimize the burden on Reading System developers and device manufacturers, not all CSS 2 properties are included. A few additional properties and values have been added to support page layout, headers, and footers. These, taken together, constitute the OPS CSS 2.0 required subset." and "A conforming Reading System must render all OPS CSS 2.0 required subset properties." but I'm not sure that pseudo-elements are a CSS property, which seem to me to be the attributes and values of CSS definitions. Pseudo elements are part of the way that styles are declared, rather than defined. Indeed, section 3.3 of the above specification is labelled "3.3: Properties", but doesn't have any discussion of how styles are declared, which happens (in part) above in section 3.0. Further, section 3.1 on Selectors says that reading systems must support all CSS2 selectors. Also note that pseudo-elements appear in the CSS2.0 documentation in section 5.12, in the same major section that discusses other selectors, section 5. http://www.w3.org/TR/1998/REC-CSS2-1.../selector.html So I think, unless I've missed something obvious, that pseudo-elements are classed as selectors, and are a required part of the ePub specification. |
|
03-17-2010, 08:07 AM | #82 |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
You may be right. But on the other hand, the ePUB spec lists ":first", ":left" and ":right" as required properties of the @page element (or pseudo-classes of the @page rule, in CSS terminology); since the syntax is the same, I assumed the fact that ":first-letter" is not listed meant that it's not required... I'd like all vendors to take your interpretation, though
|
03-17-2010, 08:57 AM | #83 | |
The Grand Mouse 高貴的老鼠
Posts: 72,186
Karma: 308792702
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
Quote:
http://www.daisy.org/epub/issues/sta...ements-unclear |
|
03-17-2010, 11:40 AM | #84 | |
The Grand Mouse 高貴的老鼠
Posts: 72,186
Karma: 308792702
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
Quote:
Hooray – that means that ADE is (probably) in the wrong, and there's hope that other implementations will support pseudo-classes and pseudo-elements. And perhaps even support in ADE eventually. |
|
03-20-2010, 09:28 AM | #85 | |
Nameless Being
|
Something not mentioned?
Quote:
|
|
03-20-2010, 10:01 AM | #86 | |
The Grand Mouse 高貴的老鼠
Posts: 72,186
Karma: 308792702
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
Quote:
http://www.lulu.com/product/6021650 (Click on the Preview link under the cover image, and in the pup-up window that appears, right-click on the sample file name and save to disk.) If the cover of that appears on your Sony, then it's a problem with your ePub. Assuming it is your ePub, I'd suggest that either the file path is wrong, or else the image type isn't one that the Sony can display. |
|
03-20-2010, 10:34 AM | #87 | |
Resident Curmudgeon
Posts: 75,892
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
03-20-2010, 02:50 PM | #88 |
Nameless Being
|
|
03-20-2010, 03:59 PM | #89 | |
The Grand Mouse 高貴的老鼠
Posts: 72,186
Karma: 308792702
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
Quote:
I don't think I can help any further without seeing your ePub. Can you trim it to just the cover and upload it? |
|
03-25-2010, 03:16 AM | #90 |
Connoisseur
Posts: 92
Karma: 50000
Join Date: Oct 2009
Device: none
|
This is not a big issue but I'm curious about this.
I have an image in my epub ebook and it's displayed by using an img tag. This tag is inside a p element and I try to move the image around by styling the p element. For example, my p element for the image is between two p elements which are for the text. I want to add margin between text and image but I can't do it by using em as my unit. It works fine with %, pt and px but not with em. Why em doesn't work? Here are the code examples: XHTML code: Code:
<p class="text">blaablaablaa</p> <p class="image"> <img src="images/image.jpg" alt="image"/> </p> <p> class="text">blaablaablaa</p> Code:
p.image { line-height: 0.00em; font-size: 0.00em; margin-bottom: 0.00em; margin-top: 10.00em; text-indent: 0.00em; margin-right: 0.00em; margin-left: 0.00em; text-align: center; font-weight: normal; font-style: normal; color: rgb(0,0,0); } If I change margin-top: 10.00em; to margin-top: 10.00%; it will work. Why? Also padding doesn't work with em. I don't want to set the margins by editing p.text. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
direkter Umlaut oder lieber HTML Code in Epub ? | NASCARaddicted | Erste Hilfe | 14 | 06-16-2011 05:54 AM |
Programming language code snippets in ebooks? | Connochaetes | Writers' Corner | 7 | 10-18-2010 02:43 PM |
ebook-convert HTML to EPUB and problem with <pre><code> | mikegr | Calibre | 2 | 03-09-2010 02:27 PM |
css override code for margins? | Amalthia | Calibre | 15 | 08-11-2009 07:20 PM |
Problems generating ePub from HTML/CSS | AlexBell | Calibre | 3 | 07-17-2009 05:10 AM |