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 03-16-2010, 03:04 AM   #76
jgray
Fanatic
jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.
 
Posts: 547
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. */
}
jgray is offline   Reply With Quote
Old 03-16-2010, 04:24 AM   #77
jgray
Fanatic
jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.
 
Posts: 547
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. */
}
jgray is offline   Reply With Quote
Old 03-16-2010, 05:40 AM   #78
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 71,406
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Quote:
Originally Posted by jgray View Post
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.
It does look good in Firefox. But not in Sigil, Safari or BBEdit (where the drop cap doesn't sit low enough) or, most importantly, in ADE, which doesn't support pseudo-elements.

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>
pdurrant is offline   Reply With Quote
Old 03-16-2010, 07:18 AM   #79
jgray
Fanatic
jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.
 
Posts: 547
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;
It should have been:

Code:
margin-left: -.1em;
Also, I found that adding the following moves the drop cap down in IE 8, while not affecting FF 3.6 at all. This makes the two look almost the same.

Code:
line-height: 50%;
The line-height needed will vary, depending on the size of the drop cap. 50% works well with:

Code:
font-size: 3.5em;
It's a shame to hear that this method doesn't work in ADE. I hadn't tried this in an epub yet, myself. We can only hope that ADE and other epub readers will improve until they fully support what epub is capable of.
jgray is offline   Reply With Quote
Old 03-16-2010, 01:04 PM   #80
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
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.
Jellby is offline   Reply With Quote
Old 03-16-2010, 02:04 PM   #81
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 71,406
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Quote:
Originally Posted by Jellby View Post
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.
I'm not sure you're right about that. The ePub spec at

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.
pdurrant is offline   Reply With Quote
Old 03-17-2010, 08:07 AM   #82
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
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
Jellby is offline   Reply With Quote
Old 03-17-2010, 08:57 AM   #83
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 71,406
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Quote:
Originally Posted by Jellby View Post
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
I've raised an issue at the ePub Issue tracker

http://www.daisy.org/epub/issues/sta...ements-unclear
pdurrant is offline   Reply With Quote
Old 03-17-2010, 11:40 AM   #84
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 71,406
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Quote:
Originally Posted by pdurrant View Post
I've raised an issue at the ePub Issue tracker

http://www.daisy.org/epub/issues/sta...ements-unclear
And there's already a response from Garth Conboy, President, Vice-Chair EPUB Standards Maintenance, who says that he believes they are required.

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.
pdurrant is offline   Reply With Quote
Old 03-20-2010, 09:28 AM   #85
Hamlet53
Nameless Being
 
Something not mentioned?

Quote:
Originally Posted by pdurrant View Post
By using XHTML and putting images in an svg wrapper, it's possible to get the images to resize to fill an entire page of the ebook reader, in proportion and centred. Here's the full xhtml file for my cover image.

The trick that made it work compared to my previous tries seems to be explicitly giving the picture width and height in the image object, to match the size of the viewBox. Previously I'd used 100% in there.


<?xml version='1.0' encoding='utf-8'?>
<!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">
<head>
<link rel="stylesheet" href="../styles/style001.css" type="text/css" />

<title></title>
</head>

<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 573 800" preserveAspectRatio="xMidYMid meet">
<image width="573" height="800" xlink:href="../images/img0032.png" />
</svg>
</body>
</html>
This is such a great idea I would really like to use it. The problem is that when I try it in an epub book and then view it in Sony reader there is only a blank where the image should be. What am I missing? The code I am inserting is the exact same except for file path and image file name.
  Reply With Quote
Old 03-20-2010, 10:01 AM   #86
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 71,406
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Quote:
Originally Posted by Hamlet53 View Post
This is such a great idea I would really like to use it. The problem is that when I try it in an epub book and then view it in Sony reader there is only a blank where the image should be. What am I missing? The code I am inserting is the exact same except for file path and image file name.
Try the sample of my book from Lulu.com on your Sony.

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.
pdurrant is offline   Reply With Quote
Old 03-20-2010, 10:34 AM   #87
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 73,645
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by pdurrant View Post
And there's already a response from Garth Conboy, President, Vice-Chair EPUB Standards Maintenance, who says that he believes they are required.

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.
But even if ADE supports all this stuff, unless the vendors get off their asses and update mobile ADE, we are going to be stuck with the last common denominator. We need ADE to lean hard on these companies to get thing updated and working so we can use the things that get fixed/added.
JSWolf is offline   Reply With Quote
Old 03-20-2010, 02:50 PM   #88
Hamlet53
Nameless Being
 
Quote:
Originally Posted by pdurrant View Post

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.
I don't think so. It's just an ordinary jpeg image and it shows up just fine without the SVG wrapper code.
  Reply With Quote
Old 03-20-2010, 03:59 PM   #89
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 71,406
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Quote:
Originally Posted by Hamlet53 View Post
I don't think so. It's just an ordinary jpeg image and it shows up just fine without the SVG wrapper code.
OK, just tested with my ebook. It seems to be working fine. Did you try the sample on my ePub?

I don't think I can help any further without seeing your ePub. Can you trim it to just the cover and upload it?
pdurrant is offline   Reply With Quote
Old 03-25-2010, 03:16 AM   #90
Chang
Connoisseur
Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!
 
Posts: 87
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>
CSS code (from InDesign's EPUB export):
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.
Chang 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
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


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


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