View Full Version : epub code snippets (html / css)


zelda_pinwheel
05-08-2009, 12:45 PM
after spending several hours yesterday trying to find that drop cap thread i knew i had seen before :rolleyes: i thought it might be nice to have ONE thread where we can all post WORKING code snippets that have been tested, for specific effects or workarounds, so that they are easy to find and use by everyone.

please mention briefly the function of the code (i.e. "Drop Caps") and give the (x)html code and the css code, and a link to the original thread if there was a discussion about the problem.

to start with, here is the drop cap code from this thread (http://www.mobileread.com/forums/showthread.php?t=35928) (thanks jellby, peter sorotkin, brewt, llasram, kovid, and everybody else who worked on this tricky problem !!)

xhtml :

<p class="initial"><span class="drop">A</span><span class="first
afterA">ntes</span> de enseñar el primer cabo de nuestra...</p>

Linking to style.css:

p.initial {
text-indent: 0;
}
span.drop {
font-size: 400%;
font-weight: bold;
line-height: 1;
height: 1em;
float: left;
margin: -0.1em 0.125em -0.1em 0.25em;
}
span.first {
margin-left: -0.5em;
white-space: pre;
}
span.afterA {
margin-left: -1.0em;
}
span.afterL {
margin-left: -1.2em
}
p.initial + p {
clear: left;
}
span.predrop {
font-size: 25%;
font-weight: normal;
vertical-align: top;
line-height: 1.9;
}


further explanation from jellby in post #2 just below.

Jellby
05-08-2009, 01:01 PM
Just to comment on the drop cap code:

It may be desirable to add:

p.initial + p {
clear: left;
}

To force the second paragraph to start below the drop cap, when the first paragraph is short.

The "white-space: pre;" part of span.first is needed for cases where there is a space between the drop cap and the start of the line, as in "<span class="drop">A</span><span class="first afterA"> day after</span>", since otherwise the space beginning the span.first is dropped (take care with linebreaks inside this span.first).

A similar "afterL" class can be needed. If the drop cap is not A or L, use only class="first".

When there is some punctuation before the drop cap, this code may be useful:

span.predrop {
font-size: 25%;
font-weight: normal;
vertical-align: top;
line-height: 1.9;
}

use it with:

<span class="drop"><span class="predrop">&lsquo;</span>I</span><span class="first"> was</span> never so upset in my life!&rsquo;

zelda_pinwheel
05-08-2009, 01:03 PM
thanks for the clarification jellby !

Jellby
05-09-2009, 10:52 AM
Novels often have fragments of poetry or songs interspersed in them. As we all know, poetry has some formatting requirements (hard line breaks) and some display customs (centered or indented block).

I use code like the following when I have to format poetry fragments in a text. I use individual <p></p> for each line instead of just <br/> because I want to use the effect of the negative parindent: when a line is too long to fit the screen, it is "soft-broken" and the second portion is indented farther to the right (actually, I'd like it to be left-aligned and preceded by "[", but I don't think that's possible)

xhtml:
<div class="poetry">
<p>Sur une gamme chromatique,</p>
<p class="indented">Le sein de perles ruisselant,</p>
<p>La Vénus de l’Adriatique</p>
<p class="indented">Sort de l’eau son corps rose et blanc.</p>

<p class="first">Les dômes, sur l’azur des ondes</p>
<p class="indented">Suivant la phrase au pur contour,</p>
<p>S’enflent comme des gorges rondes</p>
<p class="indented">Que soulève un soupir d’amour.</p>

<p class="first">L’esquif aborde et me dépose,</p>
<p class="indented">Jetant son amarre au pilier,</p>
<p>Devant une façade rose,</p>
<p class="indented">Sur le marbre d’un escalier.</p>
</div>

css:
div.poetry {
margin: 1em 0 1em 2em;
}
div.poetry p {
margin: 0;
padding-left: 3em;
text-indent: -3em;
text-align: left;
}
div.poetry p.indented {
margin-left: 2em;
}
div.poetry p.first {
margin-top: 1em;
}

So, use class="first" when a new stanza begins and class="indented" for indented lines.

For pieces with more complex indent pattern or for mainly poetry works I'd probably do something different, like a <div></div> for each stanza (which could include "page-break-inside: avoid" in the css).

zelda_pinwheel
05-10-2009, 06:28 PM
i've been looking at the adobe sample ebook of Alice in Wonderland (attached). in chapter 6, they've managed to reflow text around a non-rectangular image :

28784

i've been wanting to figure out how to do that for ages and it turns out it's laughably easy. here's the code :

<p><div style="float:left;max-width:170px;width:8.5em;text-align:left;
margin:0.25em 0px 0.25em 0.25em">
<img style="display:block;max-width:342px;width:17em;"
src="images/alice23a.gif" alt="Alice talks to Cheshire Cat"/>
</div>
<div style="float:left;max-width:170px;width:8.5em;max-height:220px;
height:11em;margin:0.25em 0.25em 0.25em 0px"/>
So she set the little creature down, and felt quite relieved to
see it trot away quietly into the wood.
(...)
when she was a little startled by seeing
the Cheshire Cat sitting on a bough of a tree a few yards off.
</p>

open a paragraph. create 2 floated divs.
div 1 : define the width** as the width of the narrow leg of the image. place the image inside the div, and define the img width** as the actual width of the entire image.
div 2 : define the width** as the actual width of image, and define the height as the height of the wide part of the image. this div is an empty placeholder.
place text in paragraph following divs.

**notice the width is given as max-width in pixels (actual size of the image) and also in ems ; this allows the images to be resized with the text if text size is enlarged or reduced.

the 2 divs stack on top of each other and the text wraps around them, first the wide one, then the narrow one. the image overflows its narrow div and is visible beside the text.

this will work for left or right side images (just define the float accordingly) with a shape of an upside down L. i imagine it should be possible to make it work for an image with the large bit on the bottom (like a right side up L) but i've not yet tried it out. maybe it would take a third narrow div and add a "clear" to the wide one, to push the wide one down... there might even be other ways to use this idea.

brewt
05-11-2009, 08:52 PM
Link to directions, etc., at http://www.mobileread.com/forums/showthread.php?t=36889 for how to get to happen out of Microsoft Word.

At least, W2003 on XP.

-bjc

JSWolf
05-11-2009, 08:55 PM
Link to directions, etc., at http://www.mobileread.com/forums/showthread.php?t=36889 for how to get to happen out of Microsoft Word.

At least, W2003 on XP.

-bjc
WAY OFF TOPIC! This is for code snippets for ePub, not Word.

brewt
05-12-2009, 12:37 AM
WAY OFF TOPIC! This is for code snippets for ePub, not Word.

Oh, gosh, let's not argue here - the reference is for how to create a DROP CAP for an EPUB using WORD, as opposed to Amaya or Dreamweaver or Notepad. A specialty snippet of a workable css that also happens to work in Word with a coupla caveats.

p {
margin: 0;
}
p.MsoNormal {
text-indent: 0;
margin: 0pt 0pt 0pt 0pt
}
p.MsoNormal + p {
clear: left;
}
span.drop {
font-size: 200%;
font-weight: bold;
line-height: 1;
font-size: 36pt;
height: 1em;
float: left;
margin: -0.1em 0.125em -0.1em 0.25em;
}
span.afterdroppeda {
margin-left: -0.9em;

}
span.afterdroppedbcdefopqrtvw {
margin-left: -0.3em;

}
span.afterdroppedghijkmnsuxyz {
margin-left: -0.5em;

}
span.afterdroppedl {
margin-left: -1.2em;

}

So there. Further directions is the link above.
-bjc
:rolleyes:

Kirtai
05-12-2009, 08:24 AM
This is such a useful thread :)
Will this be collated for the wiki once everyone has revealed their deepest darkest css secrets? :)

zelda_pinwheel
05-12-2009, 10:08 AM
Oh, gosh, let's not argue here - the reference is for how to create a DROP CAP for an EPUB using WORD, as opposed to Amaya or Dreamweaver or Notepad. A specialty snippet of a workable css that also happens to work in Word with a coupla caveats.
yes, agreed. everyone has their own workflow, some people may find this really useful. it is for epub, so it seems fine to have it in this thread.

This is such a useful thread :)
Will this be collated for the wiki once everyone has revealed their deepest darkest css secrets? :)
that is an excellent idea, and we don't have to wait until all is revealed ; we could start it now. would you like to do the honours ?

Jellby
05-12-2009, 02:39 PM
i've been looking at the adobe sample ebook of Alice in Wonderland (attached). in chapter 6, they've managed to reflow text around a non-rectangular image.

i've been wanting to figure out how to do that for ages and it turns out it's laughably easy. here's the code.

Thanks Zelda, that's indeed a nice trick. I'm now playing with it, and here's the same thing "cleaned-up" and with the elements made visible:

<html>
<head>
<style>
img {
opacity: 0.5; /* Just to make the borders visible */
}
div.leftpic {
float: left;
text-align: left;
margin: 0.25em; /* Change at will */
}
div.leftpic + div.leftpic {
margin-left: -0.25em; /* The negative amount in div.leftpic */
}
/* The image */
div#cheshire img {
max-width: 1400px; /* Real width of the image (optional) */
width: 20em; /* Desired total width */
}
/* The narrow part */
div#cheshire {
max-width: 645px; /* Width of the narrow part (optional) */
width: 9.2em; /* 645/1400 * 20 = 9.2 */
border: solid red 1px; /* Just to make it visible */
}
/* The wide addition */
div#cheshire + div {
max-width: 755px; /* 1400-645 = 755 (optional)*/
width: 10.8em; /* 755/1400 * 20 = 10.8 */
max-height: 885px; /* Height of the widhe part (optional) */
height: 12.6em; /* 885/1400 * 20 = 12.6 */
border: solid green 1px; /* Just to make it visible */
}
</style>
</head>
<body>

<p>
<div class="leftpic" id="cheshire">
<img src="Alice-23.jpg" alt="Alice talks to Cheshire Cat"/>
</div>
<div class="leftpic"></div>
So she set the little creature down, and felt quite relieved to see it trot away
quietly into the wood. 'If it had grown up,' she said to herself, 'it would have
made a dreadfully ugly child: but it makes rather a handsome pig, I think.' And she began thinking over other children she knew, who might do very well as pigs, and was just saying to herself, 'if one only knew the right way to change them&mdash;' when she was a little startled by seeing the Cheshire Cat sitting on a bough of a tree a few yards off.
</p>

</body>
</html>

The image can be found here (http://djelibeibi.unex.es/libros/Tenniel/Alice-23.jpg).

I think the css is self-explanatory, this keeps the settings specific to an image separated from the global ones. The max-widths are actually optional, but the widths (and height) are proportional to them (I guess that makes it impossible to use percent values, as then width and height proportions are not linked). I don't know if it would be possible to do something more self-contained, that allows an easier change of the image size...

This is the result:

zelda_pinwheel
05-12-2009, 10:48 PM
thanks jellby ! i've been playing with it too today, i'm a bit puzzled because although i first used the same code as adobe, it didn't behave the same way (the divs are next to each other, like in your example, but in the original file i believe they are layered on top of each other... but i don't see a z-index or anything anywhere to explain this...).

there are a couple of other things that are puzzling me in that book, for instance they use entity shortcuts like &C; instead of the full code & rdquo ; which i would like to do but i can't seem to get it to work... when i include the shortcuts at the top of my page before the doctype i get an ]> appearing in my page, and the entities never translate...

hm, this bit should be in another thread actually... i'll move it tomorrow (too tired now :o).

Jellby
05-13-2009, 07:38 AM
Perhaps this css is better:

div.leftpic {
float: left;
clear: left;
text-align: left;
margin: 0 0.5em 0.5em 0; /* 0 m m 0 */
}
div.leftpic img {
width: 100%;
}
/* Image size: 1400 x 1998 */
/* Height of the wide part: 885 */
/* Width of the narrow part: 645 */
div#cheshire {
width: 20em; /* w */
max-height: 12.6em; /* (885/1400)*w */
}
div#cheshire + div.leftpic {
width: 9.2em; /* (645/1400)*w */
height: 15.9em; /* ((1998-885)/1400)*w */
margin-top: -0.5em; /* -m */
}

Now the div's are stacked vertically, which allows a nicer resizing of the document's width (below the image width). I think it can be easily adapted to any kind of L shape.

gwynevans
05-13-2009, 08:10 AM
From netseeker's post here (http://www.mobileread.com/forums/showpost.php?p=430451&postcount=5).

CSS

<style type="text/css">
hr.bar10 { width:10%; margin-left:45%; }
</style>
HTML
<hr class="bar10"/>

Result

Hadrien
05-13-2009, 08:19 AM
About the text wrapped around an image: I don't think that this is a wise design decision. It'll work fine if you have a large screen, but on a small screen (smartphone) you might end up with something that looks very ugly.

zelda_pinwheel
05-13-2009, 09:59 AM
Perhaps this css is better:

Now the div's are stacked vertically, which allows a nicer resizing of the document's width (below the image width). I think it can be easily adapted to any kind of L shape.
heh ! that is what i was thinking of trying yesterday, but you were faster than me. ;) thanks jellby, this is a really nice effect.

From netseeker's post
thanks gwynevans !

About the text wrapped around an image: I don't think that this is a wise design decision. It'll work fine if you have a large screen, but on a small screen (smartphone) you might end up with something that looks very ugly.
you are probably right hadrien, but really this effect will not be used in very many books, it's pretty rare, and sometimes it's nice to have fun making a really beautiful book which must be appreciated on a screen larger than a cellphone... ;) some of these snippets are more for l'amour de l'art (love of the art) than practical everyday applications, but i'm still very glad to experiment with them. after all, where is the fun of epub if you can't push the limits ? ;)

radius
05-13-2009, 04:21 PM
some of these snippets are more for l'amour de l'art (love of the art)

Isn't Hadrien also from France? I believe he understand l'amour de l'art

:p

zelda_pinwheel
05-13-2009, 04:22 PM
Isn't Hadrien also from France? I believe he understand l'amour de l'art

:p

yes, he is, but you might not be. ;)

Jellby
05-14-2009, 08:49 AM
Yet another solution, now with javascript:

<html>
<head>
<style>
div.leftpic {
float: left;
clear: left;
text-align: left;
margin: 0 0.5em 0.5em 0; /* 0 m m 0 */
}
div.leftpic img {
width: 100%;
}
div#cheshire_1 {
width: 70%;
}
div#cheshire_2 {
display: none;
margin-top: -0.5em; /* -m */
}
</style>
<script language="javascript" type="text/javascript">
function resize() {
/* Image size: 1400 x 1998 */
/* Height of the wide part: 885 */
/* Width of the narrow part: 645 */
var ches1=document.getElementById("cheshire_1");
ches1.style.maxHeight = Math.round(ches1.offsetWidth*885/1400);
var ches2=document.getElementById("cheshire_2");
ches2.style.display = "block";
ches2.style.width = Math.round(ches1.offsetWidth*645/1400);
ches2.style.height = Math.round(ches1.offsetWidth*(1998-885)/1400);
}
</script>
</head>
<body>

<p>
<div class="leftpic" id="cheshire_1">
<img src="Alice-23.jpg" alt="Alice talks to Cheshire Cat"/>
</div>
<div class="leftpic" id="cheshire_2"></div>
<script language="javascript" type="text/javascript">resize(); resize();</script>
So she set the little creature down, and felt quite relieved to see it trot away
quietly into the wood. 'If it had grown up,' she said to herself, 'it would have
made a dreadfully ugly child: but it makes rather a handsome pig, I think.' And
she began thinking over other children she knew, who might do very well as pigs,
and was just saying to herself, 'if one only knew the right way to change
them&mdash;' when she was a little startled by seeing the Cheshire Cat sitting
on a bough of a tree a few yards off.
</p>

</body>
</html>

Features:

The image width can be set relative to the page width

If javascript is not supported or if it is disabled, normal rectangular image wrapping occurs.

In Opera, the page has to be reloaded if the size changes, in order for the rewrapping to take place. Doing this automatically would depend on the events supported by each reader.

I call resize() twice in a row because sometimes it may be needed if a scrollbar appears or disappears.


Now the question is, is javascript part of ePUB? :chinscratch:

zelda_pinwheel
05-14-2009, 08:52 AM
jellby you're unstoppable !! :p


(but actually i don't think javascript is part of epub... but we can use that for webdesign, so it's still great !)

Jellby
05-14-2009, 11:37 AM
(but actually i don't think javascript is part of epub... but we can use that for webdesign, so it's still great !)

If it's not... then I'll have to try with SVG :D

P.S. Apparently <script> is allowed, but discouraged: "Reading Systems must not render the textual content of the script element, and should not execute the script itself."

Jellby
05-14-2009, 12:57 PM
If it's not... then I'll have to try with SVG :D

... and here it is

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div.leftpic {
float: left;
clear: left;
text-align: left;
margin: 0 0.5em 0.5em 0; /* 0 m m 0 */
}
div.leftpic img {
width: 100%;
}
div#cheshire {
width: 70%; /* w */
max-height: 0;
margin: 0;
}
div#cheshire_1 {
width: 70%; /* w */
margin-top: -0.5em; /* -m */
}
div#cheshire_2 {
width: 32.25%; /* 645/1400 * w */
margin-top: -0.5em; /* -m */
}
</style>
</head>
<body>

<p>
<div class="leftpic" id="cheshire">
<img src="Alice-23.jpg" alt="Alice talks to Cheshire Cat"/>
</div>
<div class="leftpic" id="cheshire_1">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1400 885"></svg>
</div>
<div class="leftpic" id="cheshire_2">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 645 1113"></svg>
</div>
So she set the little creature down, and felt quite relieved to see it trot away
quietly into the wood. 'If it had grown up,' she said to herself, 'it would have
made a dreadfully ugly child: but it makes rather a handsome pig, I think.' And
she began thinking over other children she knew, who might do very well as pigs,
and was just saying to herself, 'if one only knew the right way to change
them--' when she was a little startled by seeing the Cheshire Cat sitting
on a bough of a tree a few yards off.
</p>

</body>
</html>

Well, I think I'll stop now :p

zelda_pinwheel
05-14-2009, 12:59 PM
Well, I think I'll stop now :p

no no, i think you should try it with flash next !!! :D

zelda_pinwheel
05-14-2009, 01:44 PM
jellby's code for non-rectangular images (post 13 (http://www.mobileread.com/forums/showpost.php?p=457018&postcount=13)) can be adjusted for images which are narrower on the top than on the bottom. after playing a bit i've found that just adding a negative margin to the top div (containing the image) seems to work just fine : i just added the code

div#piano {
margin-left:-4.5em;
}

note, i wanted this image on the right side of the page, so my class names and floats are right instead of left in the original code.

here's all of it :


div.rightpic {
float: right;
clear: right;
text-align: right;
margin: 0 0.5em 0.5em 0;
border: solid green 1px;
}
div.rightpic img {
width: 100%;
}
/* Piano Image size: 212 x 501
/* width of the narrow top part :140px
/* Height of the narrow (top) part: 180px
/* Width of the narrow part: 212*/

div#piano {
max-width: 212px;
width: 14em;
max-height: 10em;
border: solid red 1px;
margin-left:-4.5em;
}
div#piano + div.rightpic {
width: 13.5em;
height: 21em;
margin-top: -0.5em;
}

i've attached my example (with borders to show the divs) and the original image, if you want to try it out.

zelda_pinwheel
05-14-2009, 03:24 PM
here's an image i wrapped with 3 divs, just to see if it could be done. it turns out, it can. :D and no need to stop at 3 ; this method should work with as many parts as you feel like making.

you need to add a third div, and give it an id. from there, the method is the same as previously. i used a negative margin on the first div (containing the image) because the narrowest part of the image was at the top again.

html code :

<p>
<div id="girl" class="leftpic"><img src="images/pg140.gif" alt="girl pinning up her frock" /></div>
<div id="girl2" class="leftpic"></div>
<div class="leftpic"></div>

Of all experiences in connection with
towing, the most exciting is being towed by girls. (...)
</p>

css code :


div.leftpic {
float: left;
clear: left;
text-align: left;
margin: 0 0.5em 0.5em 0;
border: solid green 1px;/**/
}
div.leftpic img {
width: 100%;
}
/* GIRL IMG
/* Girl Image size: 169 x 346
/* these measurements are approximative :
/* Width of top part: 85px
/* Height of top part: 48px
/* Width of middle part: 130px
/* Height of middle part: 56px
/* Width of bottom part: 169px
/* Height of bottom part: 250px */

div#girl {
max-width: 169px;
width: 16em;
max-height: 1.5em;
margin-right: -5em;
border: solid red 1px; /**/
}
div#girl2 {
max-width: 130px;
width: 7.5em;
height: 4em;
margin-top: -0.5em;
}
div#girl + div#girl2 + div.leftpic{
width: 10.5em;
height: 15.5em;
margin-top: -0.5em;
}

radius
05-25-2009, 05:29 PM
Is it possible to do "smallcaps" using CSS?

That is something like:

<p><span class="smallcaps">Smallcaps</span> at the beginning of a paragraph.</p>

Looks something like:

SMALLCAPS at the beginning of a paragraph.

zelda_pinwheel
05-25-2009, 05:35 PM
i believe "text-transform : smallcaps" is unsupported, but you can cheat by capitalising the text and adding some css to make it small :

.smallcaps {
font-size:0.75em;
}

pdurrant
05-25-2009, 07:08 PM
Here's a way to get drop cap and smallcaps on the first paragraph after a chapter heading.

Note that the drop caps style has been tweaked to place the drop cap nicely - this should work the same for almost any font. Also note that the reduction in size for the smallcaps also applied to the drop cap - without the reduction in size the font-size specified would be smaller.

I hope this gives some useful ideas to people.

<!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>
<title>Smallcaps Sample</title>
<style type="text/css">
h2.chapter { text-indent: 0; text-align: center; font-size:1em; font-weight:bold; margin-bottom: 2 em; margin-top: 4 em; page-break-before: always }
h2.chapter+p {text-indent: 0em; margin-bottom: 0em; margin-top: 0em }
h2.chapter+p:first-letter {font-size: 360%; float: left; margin-top: -0.15em; margin-bottom: -0.5em; padding-right: 0.1em;}
p {text-indent: 1em; margin-bottom: 0em; margin-top: 0em; }
span.firstwords {text-transform:uppercase; font-size: 0.75em}
</style>
</head>
<body>
<h2 class="chapter">Chapter 1</h2>
<p><span class="firstwords">First paragraph</span> in the chapter, showing the the first two words are in smallcaps, with the first letter made into a drop cap, mostly done with CSS on a plain paragraph, automatically selected because it comes immediately after a h2 of class chapter. The text-transform needs a separate span - there's no way to specify first two words.</p>
<p>Second paragraph, automatically reverting to normal.</p>
</body>
</html>

zelda_pinwheel
05-25-2009, 09:07 PM
hm, interesting ! i'll have to try that out.

JSWolf
05-25-2009, 11:17 PM
hm, interesting ! i'll have to try that out.
Actually, you don't need to try out the code for smallcaps. Fontin has a smallcaps font which you can use instead.

Jellby
05-26-2009, 05:53 AM
Is it possible to do "smallcaps" using CSS?

Yes, "font-variant: smallcaps" is the property to use. ADE, however does not display it (it displays a normal text font).

There is also "text-transform: uppercase", but that's only the caps part, not small. This is unsupported by ePUB and, of course, by ADE.

pdurrant
05-26-2009, 06:41 AM
Goodness me - so there is.

Yes, "font-variant: smallcaps" is the property to use. ADE, however does not display it (it displays a normal text font).

There is also "text-transform: uppercase", but that's only the caps part, not small. This is unsupported by ePUB and, of course, by ADE.

mtravellerh
05-26-2009, 09:53 AM
Yes, "font-variant: smallcaps" is the property to use. ADE, however does not display it (it displays a normal text font).

There is also "text-transform: uppercase", but that's only the caps part, not small. This is unsupported by ePUB and, of course, by ADE.

You could use the "text-transform: uppercase" and "font-size: small" to create a simile. Bit complicated but it LOOKS quite a bit like small caps.

radius
05-26-2009, 10:59 AM
You could use the "text-transform: uppercase" and "font-size: small" to create a simile. Bit complicated but it LOOKS quite a bit like small caps.

Ah. I didn't know there was smallcaps in CSS already.

However I just tried both that and text-transform: uppercase and they don't seem to work on the Sony Reader. I *does* look like a slightly different font but that might be a stroke weight thing from adjusting the size slightly.

Jellby
05-26-2009, 12:28 PM
You could use the "text-transform: uppercase" and "font-size: small" to create a simile. Bit complicated but it LOOKS quite a bit like small caps.

That's probably what the client does to "fake" smallcaps when there is not a true smallcaps font available (and I'd say most wouldn't know when there is). The difference is:

Smallcaps: SMALLCAPS!

Uppercase+small: SMALLCAPS!

(note the S and ! sizes) Unless you do what I did here and apply different styles to different parts of the words. (By the way, I've seen not all browsers know to treat punctuation correctly with smallcaps.)

But... as I said, "font-variant: smallcaps" is at least recognized in the ePUB spec, whereas "text-transform: uppercase" isn't.

Jellby
05-26-2009, 12:30 PM
However I just tried both that and text-transform: uppercase and they don't seem to work on the Sony Reader. I *does* look like a slightly different font but that might be a stroke weight thing from adjusting the size slightly.

No. The Sony uses ADE engine (afaIk), and ADE doesn't support either. But other readers might!

DaleDe
08-02-2009, 04:03 PM
I found that ADE was making huge margins around my eBooks even though I had them set to zero. The source file came from word and I found the following in the html file that I saved from word.

@page Section1
{size:6.0in 9.0in;
margin:.6in .25in .5in .25in;}
div.Section1
{page:Section1;}

This data overrode all other data in the file so far as ADE was concerned and caused the margins to be set all around. I suggest his be removed if you use word as a source. Other ePUB display programs do not have this problelm.

Dale

mtravellerh
08-06-2009, 04:39 AM
I found that ADE was making huge margins around my eBooks even though I had them set to zero. The source file came from word and I found the following in the html file that I saved from word.

This data overrode all other data in the file so far as ADE was concerned and caused the margins to be set all around. I suggest his be removed if you use word as a source. Other ePUB display programs do not have this problelm.

Dale

margin in inches? God help us all! :blink:

JSWolf
08-06-2009, 07:15 AM
margin in inches? God help us all! :blink:
That is because Word has stupidly large default margins and they are in inches.

afv011
08-23-2009, 03:59 PM
Hi,

this code will display a solid horizontal line before and after some text, which can be used for chapters.


h1 {text-align:center;}

.solid-line {
padding-left: 6em;
font-size: .4em;
vertical-align: middle;
line-height: 1em;
margin-left: 1em;
margin-right: 1em;
position: relative;
bottom: .25em;
background-color: black;
}


You would use it like this:


<h1><span class="solid-line">&nbsp;</span>Chapter One<span class="solid-line">&nbsp;</span></h1>


This controls the width of the line:
padding-left: 6em;

This controls the separation between the line and the text:
margin-left: 1em;
margin-right: 1em;

Jellby
08-23-2009, 06:18 PM
Could you use "display: inline-block" and "width: 6em; height: 3pt" or something like that? That would make "position", "line-height", "font-size", and &nbsp; unneeded...

afv011
08-23-2009, 06:57 PM
Could you use "display: inline-block" and "width: 6em; height: 3pt" or something like that? That would make "position", "line-height", "font-size", and &nbsp; unneeded...

I am no expert on CSS by any means, this is the best I could come up with - other people may have different, more efficient solutions than the one I proposed.

JSWolf
08-24-2009, 09:50 AM
if the solid line is supposed to be out to the already existing margins, then you do not need the margin settings.

pdurrant
09-13-2009, 06:44 AM
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>

quillaja
09-30-2009, 12:24 AM
i posted this in the forum, but am pasting it here in the 'repository'.
---
using the definition list <dl></dl> works really well for plays. it's also better xhtml, since it defines the relationship between the speaker's name and his or her dialog in a way that using simple paragraphs does not. of course, you can further customize these tags with CSS.

definition list is used as such:
<dl>
<dt>term</dt><dd>definition</dd>
<dt>term</dt><dd>definition</dd>
</dl>
you can also have multiple consecutive <dt> and <dd>.

for example:
<p><em>JobberA and JobberB enter</em></p>
<dl>
<dt>JobberA</dt>
<dd>Wow, I really love e-books!</dd>
<dt>JobberB</dt>
<dd>Indeed! I do declare they are good. In fact, I will sing their praises!
<p><em>JobberB sings.</em></p>
<blockquote>
e-books are really great<br/>
ded-tree books i now do hate.
</blockquote>
</dd>
</dl>
<p><em>Exit all.</em></p>

You'll notice that in JobberB's part, another <p> and <blockquote> are nested.

I also like to make the speaker names bold, because sony reader doesn't automatically format the <dt> to be bold, as most web browsers do (i think).

anyway, just thought i'd throw this tidbit out there. i used it in some books i published on feedbooks.

As GRiker said, <dl> might also be nice for a table of contents, where <dt> holds the link and <dd> holds a description.

radius
09-30-2009, 01:01 PM
using the definition list <dl></dl> works really well for plays.

Hey, great idea!

JSWolf
09-30-2009, 01:29 PM
Does anyone have an ePub to show <dl></dl>?

quillaja
10-02-2009, 09:28 PM
Does anyone have an ePub to show <dl></dl>?

well, i have one or two, but i haven't yet made them "public" on feedbooks, because i'm still editing them. the example code shows basically the same way i used this in the epubs, though the words are different. this works, at least on my prs-600 and ADE, and mostly works in FBReader (the formatting is off, but fbreader doesn't full support epub anyway).

do you want a pic of <dl> on the sony reader?

quillaja
10-09-2009, 03:45 AM
To make columns in an ePub, use the following CSS property on any block element, such as "body" or "div":

oeb-column-number: [integer] | auto;

from the ePub OPS specification:

Specifies a number of columns in which to render content; may be applied to all block level elements. Reading Systems are free to support integer values other than 1, or may map them to 1. Reading Systems may support column balancing. A value of auto allows the Reading System to decide on the optimal number of columns in which to render content, considering available width, font sizes, or any other metrics it considers relevant for readability.

Anyway, I tested "2" and "auto" on my prs-600 and in ADE. Both worked, although the prs-600 "decided" just to use 1 column. I had to make the font size very small in ADE to make AUTO display as 2 columns. However, hard-coding 2 into the CSS made 2 columns display on the sony reader.

Pretty cool! =)

quillaja
10-09-2009, 05:01 AM
well, i have one or two, but i haven't yet made them "public" on feedbooks, because i'm still editing them.

I've since "published" the books i mentioned earlier. They are Jane Austen's Juvenilia, volumes 1, 2, and 3. Volumes 1 and 2 use <dl> for the few mini plays that Austen wrote. http://feedbooks.com/author/18

My personal favorite of these mini plays is "The Mystery." =)

charleski
11-06-2009, 07:54 PM
When there is some punctuation before the drop cap, this code may be useful:

span.predrop {
font-size: 25%;
font-weight: normal;
vertical-align: top;
line-height: 1.9;
}

use it with:

<span class="drop"><span class="predrop">&lsquo;</span>I</span><span class="first"> was</span> never so upset in my life!&rsquo;
I've been experimenting with this code (testing it in ADE), and found it was causing the dropcap to be shifted over to the right for some reason I can't fathom. I finally fixed it by adding a margin-left correction:
span.predrop {
font-size: 25%;
font-weight: normal;
vertical-align: top;
line-height: 1.9;
margin-left: -0.5em
}

This is for a dropcap on lines that start with a quotemark. If I remove the quote and the predrop code so that the dropcap is a single character, then it works fine and is aligned properly. If I add just the quotemark (so the dropcap span is
<span class="drop">&lsquo;I</span>)
then the left margin of the dropcap region shifts over to the right by about 0.5em. Adding the predrop span as originally coded doesn't change this, though it aligns properly when I add the margin-left correction.

My familiarity with CSS is stilll somewhat rudimentary, so I wonder if there's something I'm missing here, though it works right now.

GeoffC
11-07-2009, 06:20 AM
To make columns in an ePub, use the following CSS property on any block element, such as "body" or "div":

oeb-column-number: [integer] | auto;

from the ePub OPS specification:



Anyway, I tested "2" and "auto" on my prs-600 and in ADE. Both worked, although the prs-600 "decided" just to use 1 column. I had to make the font size very small in ADE to make AUTO display as 2 columns. However, hard-coding 2 into the CSS made 2 columns display on the sony reader.

Pretty cool! =)

Creating two columns may be a useful ploy with poetry, there is nothing worse than having a verse split at the screen base. But this as a solution raises the question as to whether there is sufficient width in reading devices for it to work satisfactorily.

Do you have any screenshots of the Sony to 'see' how it looks ?

GeoffC
11-07-2009, 09:42 AM
...OOOoooooohhhh....

now that is a very nifty trick [I also see Nrapallo (http://www.mobileread.com/forums/showthread.php?t=36136) mentioned it on .imp].
I only tested this on a small book and on ADE (and yes, even with the full width of my PC screen) the font has to be tweeked to the minimum.

thank you - I shall now go and 'play' some more with this .....

traskilajussi
12-01-2009, 10:33 AM
I have bit of a problem:

I made an svg file (and validated it at w3 validator) -
made an xhtml file using <object> to link to the svg file
(and validated the xhtml at w3)
then I made an epub using the xhtml file as cover and validated the book at
epubcheck...
and yet neither Boookworm nor Firefox add-on play the cover

on browser the cover page plays...

any ideas?
cheerd, Jussi

JSWolf
12-01-2009, 12:28 PM
I have bit of a problem:

I made an svg file (and validated it at w3 validator) -
made an xhtml file using <object> to link to the svg file
(and validated the xhtml at w3)
then I made an epub using the xhtml file as cover and validated the book at
epubcheck...
and yet neither Boookworm nor Firefox add-on play the cover

on browser the cover page plays...

any ideas?
cheerd, Jussi

Did you try your ePub with ADE? Did it work? If it works in ADE, then blame Bookworm and the Firefox add-on.

traskilajussi
12-01-2009, 01:45 PM
Thanks ... can't verify on ADE (I'm on Ubuntu) - then again may be there
isn't a problem in the book itself: when opening the book on bookworm using my S60 mobilephone the cover plays correctly...

I attach the book if someone's interested enough to take a look

cheers, Jussi

GeoffC
12-01-2009, 02:14 PM
the cover shows in ADE, but very very small.

chapter one is on its own,
but chapter two expands out to the remaining chapters and the notes.

the picture at the end of Alphonse Aulard shows up well ....

as to everything else, the display looks good, expands into two columns and has a background to it....

traskilajussi
12-02-2009, 06:35 AM
Thanks Geoff - so the book works.

GeoffC
12-02-2009, 06:41 AM
yes - as far as I can see, in ADE, it does ....

it also works on the PC version of the Sony Reader - although on that I only get a single column.

there may be coding issues with the TOC, but that's a minor issue ....

Jellby
01-17-2010, 11:46 AM
One sometimes wants to have a way to detect which reader is being used, so that some feature can be disabled or some workaround activated. There is no standard way to detect the reader, but something can be done to detect the Adobe engine, and activate or deactivate CSS stuff depending on whether the book is being rendered by Adobe or not.

The "trick" is just using Adobe's conditional CSS in the page template file (xpgt). Since at the moment only Adobe understands and uses the xpgt, whatever you put in this file will only be read by Adobe. So you could have, in your standard CSS file:

.ade { display: none; }

to hide ADE-only stuff from other renderers. And, in the xpgt file:

<ade:style>
<ade:styling-rule selector=".noade" display="none"/>
<ade:styling-rule selector="div.ade" display="block"/>
<ade:styling-rule selector="span.ade" display="inline"/>
</ade:style>

to hide "non-ADE"-only stuff and show ADE-only stuff. This is demonstrated in the attached test ePUB, which will tell you whether you are using the Adobe engine (Sony, Cybook, etc.) or not (Calibre, for instance). The file also shows a couple of Adobe bugs which don't matter in this thread.

Chang
01-19-2010, 06:43 AM
I have one problem to be solved and I think this is the right thread for it. I have one poetry book and I'm having problems with adding empty space. In the original printed book there are few lines of text per page and ~10 cm (~4 inches) of empty space between the text and top of page.

The first line of each page has its own style and the following lines have own style. XHTML code looks like this:

<p class="newpage">First line of the poem</p>
<p class="poetry">Second line of the poem</p>
<p class="poetry">Third line of the poem</p>
<p class="newpage">First line of the poem</p>
<p class="poetry">Second line of the poem</p>
<p class="poetry">Third line of the poem</p>

In CSS I have just defined that "newpage" class has attribute "page-break-before: always;".

I would like to add some empty space in every page before the first line. CSS attribute "margin-top" doesn't work because of "page-break-before". If I had each page as a single document, then "margin-top" would work. Unfortunately, this book has many pages and I don't see it sane to cut it into 200 single xhtml files. I have tried to put empty p elements with space character before the first line but those are just being ignored. Increasing the line height works but it looks stupid if the first and second line has big empty space between them.

I'm using InDesign for creating the epub so I'm looking for a simple solution for this that I could do already in my InDesign document or afterwards by editing the CSS file. Is there any easy and simple solution for this? I hope I explained my problem clearly enough :)

Jellby
01-19-2010, 08:04 AM
You could use padding instead of margin, which is not discarded at pagebreaks. Or you could have empty pagebreak elements thus:

<p class="poetry">Third line of the poem</p>
<div class="pagebreak"></div>
<p class="poetry">First line of the poem</p>

and define:

div.pagebreak {
page-break-before: always;
height: 0;
margin: 0;
padding: 0;
}

GeoffC
01-19-2010, 11:27 AM
padding works well ....

Jellby
01-19-2010, 11:53 AM
padding works well ....

In this case, yes, but not if you have borders or backgrounds (padding goes inside the border, margin goes outside).

Chang
01-21-2010, 04:06 AM
Thanks Jellby and GeoffC!

Padding works fine in my case because I have just plain text so it's easier to execute. I would have to manually add several div-elements in the text but just writing padding-top: 10em; in one CSS style does the same trick. I feel so stupid that I didn't try padding before asking here.. :( Anyway, thanks!

darkpoet
01-26-2010, 05:31 PM
Chang: I am working on the same problem now, except with some custom fonts... poetry I want indented slightly when zoomed in, all but the first line. Something like this:

http://www.mobileread.com/forums/attachment.php?attachmentid=44353&stc=1&d=1264539310

At first I tried thisp.poem {
font-family: "OldNewspaperTypes" ; font-size: 117% ;
padding-left: 1.5em ; text-indent: -1.5em ; line-height: 125% ; }


<p class="poem">Title</p>
<p class="poem">&nbsp;</p>
<p class="poem">stanza1 - line1</p>
<p class="poem">stanza1 - line2</p>
...You might notice the line-height in the CSS. My Sony Reader doesn't render the fonts correctly at normal line-height. I was losing the tails of letters like y and g (not shown, sorry). But after a lot of playing around, unordered lists seems like a better, cleaner solution (and it renders correctly). The border, padding, and margin should be set to zero otherwise the Sony Reader renders a slightly bordered box around the whole "list." I personally like a little space between my lines (the margin-bottom) but that's your choice... I also hate it when stanzas break across pages, especially when all that remains is the final line. When using lists, span's don't work correctly so use div's...ul.poem {
font-family: "OldNewspaperTypes" ; font-size: 117% ;
border: 0 ; padding: 0 ; margin: 0 ; list-style-type: none ;
padding-left: 1.5em ; text-indent: -1.5em ; }
ul.poem li { margin-bottom: 0.2em ; }
.dontbreak { page-break-inside: avoid ; }


<h3>Title</h3>
<ul class="poem">
<li>&nbsp;</li>
<li>stanza1 - 1</li>
<li>stanza1 - 2</li>
<div class="dontbreak">
<li>&nbsp;</li>
<li>stanza2 - 1</li>
<li>stanza2 - 2</li>
</div><div class="dontbreak">
<li>&nbsp;</li>
<li>stanza3 - 1</li>
<li>stanza3 - 2</li>
</div></ul>

On a related note, I also had trouble with a right-floating image. You can't use paragraph's in that case either. For some reason, it ends up getting screwed up by the Sony Reader.

Chang
02-02-2010, 07:37 AM
I have few chapters in one document and I have styled the heading of each chapter with same style, let's call it heading1. This style has CSS declaration page-break-before: always; so I can have page break before each new chapter. I also want to have empty space before the name of every chapter but because of the CSS declaration mentioned before, it eliminates the use of margin-top declaration.

So, I used padding-top declaration to create empty space but it doesn't work so perfectly. If the text with heading1 style is the first element in the document, there is more empty space than if the text with heading1 style is in middle of the document. I tried this with ADE and Sony PRS-505 and the problem occured. However, it didn't show up when reading with Azardi or Calibre.

In the attached picture, chapters 1-8 are in one document and chapters 9-> are in one document. So, the chapters 1 and 9 are the first paragraph elements of the documents and they contain more empty space than the other chapters. Is this reader system's problem or should it be like this?

pdurrant
02-02-2010, 08:16 AM
Try setting the top margin on the body to zero. The problem is obviously related to the start of a new HTML file, and that's one of the settings that might be causing the problem.

You should set a top margin for each page with @page - if I remember correctly a CSS top margin on the body only affects the first page in the flow.

I have few chapters in one document and I have styled the heading of each chapter with same style, let's call it heading1. This style has CSS declaration page-break-before: always; so I can have page break before each new chapter. I also want to have empty space before the name of every chapter but because of the CSS declaration mentioned before, it eliminates the use of margin-top declaration.

So, I used padding-top declaration to create empty space but it doesn't work so perfectly. If the text with heading1 style is the first element in the document, there is more empty space than if the text with heading1 style is in middle of the document. I tried this with ADE and Sony PRS-505 and the problem occured. However, it didn't show up when reading with Azardi or Calibre.

In the attached picture, chapters 1-8 are in one document and chapters 9-> are in one document. So, the chapters 1 and 9 are the first paragraph elements of the documents and they contain more empty space than the other chapters. Is this reader system's problem or should it be like this?

Chang
02-02-2010, 09:40 AM
Try setting the top margin on the body to zero. The problem is obviously related to the start of a new HTML file, and that's one of the settings that might be causing the problem.

You should set a top margin for each page with @page - if I remember correctly a CSS top margin on the body only affects the first page in the flow.

That did the trick, thank you a lot! I just put body {margin-top: 0em;} and it works fine now. :thanks:

charleski
03-03-2010, 08:18 AM
I've been playing around with superscripts trying to get them to work nicely. Maybe this has been covered before, but I couldn't find anything on it.

The stock result of adding a <sup> tag in your code is to cause a nasty variation in line height to accommodate the superscript. If you want your lines to be regular, the trick is to specify vertical-align explicitly. With this in place, you can now alter the vertical position of the superscript by using the line-height attribute.
I.e.:

sup {
font-size: 80%;
vertical-align: top;
line-height: 0.8
}


I've attached an example epub that shows what happens without this code and the results of using different line-heights. A value of 0.8 seems about right, though as the leading of your body text increases, you can get away with decreasing this value. Since the font-size is set using a % in the sup tag, the size of the superscript will scale with the size of the surrounding text and you won't have to worry about adjusting line-height for different font sizes.

Note that the paragraphs with larger values for the superscript line-height may appear more compact. This is because the superscript lies closer to the line of the body text and is an optical illusion common with type. The actual height of the block, as measured on my screen, is the same as with smaller line-heights.

Any comments are welcome.

Jellby
03-03-2010, 09:29 AM
I've had some success using simply "sup { line-height: 0}". I assume this uses "vertical-align: super" by default, and some default font-size as well. Since the "super" alignment places the baseline at an appropriate height, setting line-height to 0 does not affect alignment, but "ignores" the superscript when setting the line separation. The downside is for some fonts the superscript may overlap the previous line.

charleski
03-08-2010, 11:58 PM
I've had some success using simply "sup { line-height: 0}". I assume this uses "vertical-align: super" by default, and some default font-size as well. Since the "super" alignment places the baseline at an appropriate height, setting line-height to 0 does not affect alignment, but "ignores" the superscript when setting the line separation. The downside is for some fonts the superscript may overlap the previous line.
Actually, it seems that 'vertical-align: super' may be the element that's causing the problem, and I suspect you've been overriding that by setting the line-height to 0.

I added another page to the example I prepared in which the vertical-align is set to super instead of top. Note that at the smaller line height values the disruption to the leading is barely noticeable, but when you get to line-height: 1 it's obvious.

The same issue seems to apply to subscripts as well, as the last page in the epub shows.

pdurrant
03-15-2010, 06:50 AM
I like a title page in an ebook. I also like it to fit on one page, and to fill that page. It is, of course, possible to do this with an SVG graphic, but that's quite complex and will probably mess up text-to-speech too.

Here's a way to do it with just CSS.


Add a height: 100% to the html and body elements
Wrap the title page in a div, setting the height of that to 100%
Assign each paragraph in your title page a height as a percentage, making sure the percentages add up to just under 100% and that they all have margin set to 0.
Done!


I found that if I made all the heights add up to exactly 100%, then ADE added an extra blank page after my title page. But making them add up to 99% fixed that. So it's probably safest to make them add to just under 100%.

Of course, it's possible for it to render really badly if a very large font is selected with a very small page size - the text will collide. But it's possible to get a very good effect with any reasonable settings and page aspect ratio.

Here's a the HTML and CSS for the title page of my next publication:

HTML:
<?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>
<div class="titlepage">
<p class="titlepage-topgap"></p>
<p class="titlepage-title">Alfredo Catalani<br />
<span class="titlepage-subtitle">Composer of Lucca</span></p>

<p class="titlepage-author">Domenico Luigi Pardini</p>

<p class="titlepage-para3">With Firsthand Accounts of Catalani by<br />
Giovanni Baptista Nappi<br />
and Raffaello Barbiera</p>

<p class="titlepage-para2">Edited, annotated, and introduced by<br />
David Chandler</p>

<p class="titlepage-para1">Translated by Valentina Relton</p>
</div>
</body>
</html>


CSS:
html, body {
margin:0;
padding: 0;
border-width:0;
line-height: 1.2em;
font-family: serif;
height: 100%;
}

@page {
margin: 6pt;
}

div.titlepage {
height:100%;
margin:0;
padding:0;
border-width:0;
}
p.titlepage-topgap {
height: 10%;
margin: 0;
}
p.titlepage-title {
height: 30%;
min-height: 1.8em;
margin:0;
font-size:3em ;
line-height: 0.8em;
text-indent: 0;
text-align: center;
font-weight: bold;
font-family: sans-serif;
}
span.titlepage-subtitle {
font-size: 0.66em;
text-indent: 0;
font-weight: bold;
font-family: sans-serif;
}
p.titlepage-author {
height: 24%;
margin: 0;
font-size:1.5em;
line-height: 1em;
text-indent: 0;
text-align: center;
font-weight: bold;
font-family: sans-serif;
}
p.titlepage-para3 {
height: 15%;
min-height: 3.5em;
margin: 0;
text-indent: 0;
text-align: center;
font-weight: bold;
font-family: sans-serif;
}
p.titlepage-para2 {
height: 10%;
min-height: 2.5em;
margin: 0;
text-indent: 0;
text-align: center;
font-weight: bold;
font-family: sans-serif;
}
p.titlepage-para1 {
height: 10%;
min-height: 0.8em;
margin: 0;
text-indent: 0;
text-align: center;
font-weight: bold;
font-family: sans-serif;
}

pdurrant
03-15-2010, 01:15 PM
This thread is a good idea, but it's not ideal. It's hard to read through to find the code you want, and to check that you have the latest word on the best solution to any particular problem.

So I've created a "HowTo" page in the wiki to hold the CSS hints and tips.

But I haven't filled in very much yet. Contributions (perhaps culled from this very list!) are very welcome. I'll work on it some more as I have time.

http://wiki.mobileread.com/wiki/CSS_HowTo

You can also read this page from the main page through the "HowTo" link under FAQs.

jgray
03-16-2010, 02:38 AM
Quite some time ago, I posted in another thread about how I used the span tag to do drop caps. Others have also posted here about similar approaches.

While messing around recently, I came up with a much simpler method of creating a "pseudo" drop cap. While not as nice as a real drop cap, it doesn't look half bad. The real advantage of this method is that it doesn't require any extra HTML markup at all. The magic is all done in the stylesheet.

Comments are in the stylesheet. BTW, although I haven't posted in some time, I have been in lurk mode.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Pseudo Drop Caps</title>

<link href="sample.css" type="text/css" rel="stylesheet" />
</head>

<body>
<h1 id="title">Book Title</h1>
<h2 id="author">Author Name</h2>

<h2 class="chapter">Chapter 1</h2>
<p>The first letter 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>The first letter 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>


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. */
}

h1#title {
text-align: center;
}

h2#author {
text-align: center;
}

h2.chapter + p { /* No indent wanted on the first paragraph of a chapter. */
text-indent: 0;
}

h2.chapter + p:first-letter { /* This is the pseudo-dropcap. The first letter
of the first paragraph after a chapter heading. */

color: red; /* Change to suit. */

font-size: +3em; /* This looks good to me. Change if you want. */

vertical-align: -30%; /* Can't go much lower w/o overlapping next line. */

letter-spacing: -.15em; /* Tighten up spacing between the letter and the word.
IE8 needs more negative than this. Should I be surprised? */
}

jgray
03-16-2010, 04:04 AM
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
03-16-2010, 05:24 AM
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.

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. */
}

pdurrant
03-16-2010, 06:40 AM
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:

<?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>

jgray
03-16-2010, 08:18 AM
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:

margin: -.1em;

It should have been:

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.

line-height: 50%;

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

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.

Jellby
03-16-2010, 02:04 PM
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.

pdurrant
03-16-2010, 03:04 PM
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-19980512/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.

Jellby
03-17-2010, 09:07 AM
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 ;)

pdurrant
03-17-2010, 09:57 AM
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/status-pseudo-elements-unclear

pdurrant
03-17-2010, 12:40 PM
I've raised an issue at the ePub Issue tracker

http://www.daisy.org/epub/issues/status-pseudo-elements-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.

Hamlet53
03-20-2010, 10:28 AM
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.

pdurrant
03-20-2010, 11:01 AM
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.

JSWolf
03-20-2010, 11:34 AM
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.

Hamlet53
03-20-2010, 03:50 PM
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.

pdurrant
03-20-2010, 04:59 PM
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?

Chang
03-25-2010, 04:16 AM
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:
<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):
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.

charleski
03-25-2010, 07:05 AM
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?
...
p.image {
line-height: 0.00em;
font-size: 0.00em;
...


You set font-size to 0, which sets the value of an em to 0 as well.
From the spec (http://www.w3.org/TR/CSS2/syndata.html#em-width):
The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.
Leave out the font-size attribute, so that it inherits the size of the parent element.

Chang
03-25-2010, 10:07 AM
You set font-size to 0, which sets the value of an em to 0 as well.

Ah, that was the problem. Thanks a lot charleski! :)

Chang
06-11-2010, 09:11 AM
Once again I'm having problems with poems and this time with fixed layout in poems. Take a look at my example pictures.

I'm quite doubtful but is there a way (preferably an easy way) to keep that layout so it would look same in different devices and monitors regardless the screen size? My own answer would be no. Is this just something that cannot be done in EPUB?

I have been thinking about adding Page Map but I can't define exact page size that would work in every screen size, right?

I could play with div elements but it wouldn't work with every screen size.

If this is impossible to do in EPUB, do you have any good suggestions to do such poems in EPUB? Or should these poems be presented only in fixed layout file formats e.g. PDF?

GeoffC
06-11-2010, 10:40 AM
Yikes !!!!

Has my eyesight gone or are those picture blurry !!!!!

JSWolf
06-11-2010, 10:43 AM
Yikes !!!!

Has my eyesight gone or are those picture blurry !!!!!

It's done that way so we cannot read what's there.

GeoffC
06-11-2010, 10:52 AM
It's done that way so we cannot read what's there.

Perhaps but they could have been post with a little more clarity so that we can see the point that is being raised ....

Jellby
06-11-2010, 11:19 AM
I think (s)he wants the "poetry" to be displayed always with the same relative positioning/indentation.

One of the things one has to consider is that ebooks are typically displayed in small screens, so whatever format is used, it must be adaptable to narrow text widths.

GeoffC
06-11-2010, 12:20 PM
I think (s)he wants the "poetry" to be displayed always with the same relative positioning/indentation.

One of the things one has to consider is that ebooks are typically displayed in small screens, so whatever format is used, it must be adaptable to narrow text widths.

I think that the only way would be 'fixed' as in pdf - or accept some relative positioning ... For myself, I have more of an issue of poems that move over and onto the next page .... it looks untidy, but that's another issue ....

charleski
06-12-2010, 09:27 AM
I'm quite doubtful but is there a way (preferably an easy way) to keep that layout so it would look same in different devices and monitors regardless the screen size?

Screen size is the real issue. Essentially you want to be able to control the size of the text in order to ensure that lines don't wrap, the rest is just simple justification and margin control.

Unfortunately, CSS2 doesn't have conditional rules that would be useful here. If you're targeting readers equipped with ADE, though, then you could take advantage of Adobe's page-template extension and the conditional styling it allows. See the section on dynamic styling here (http://blogs.adobe.com/digitaleditions/template.html). This can be used to set differing selector rules for different sizes of screen. Of course, this is non-standard and would only work on ADE readers (which are still the large majority of devices), but you can set the default rules to suit something like the iPad and then apply conditional rules to match ADE readers with smaller screens.

JSWolf
06-12-2010, 03:48 PM
Please, don't use Adobe's page-template. I delete that out of every ePub that has it.

GeoffC
06-13-2010, 06:05 AM
obviously one-size does not fit all !!!!

AlexBell
06-13-2010, 07:35 AM
Please, don't use Adobe's page-template. I delete that out of every ePub that has it.

Could you tell me why please?

Regards, Alex

Chang
06-16-2010, 02:26 AM
Thank you all for good answers!


Please, don't use Adobe's page-template. I delete that out of every ePub that has it.

I'm also interested what's your basis for this.

charleski
06-16-2010, 02:25 PM
Well, a lot of publishers use the page-template badly, putting margins in it that should be specified in the css. In fact it seems a lot of them just paste in a single page-template file that they've found somewhere in the mistaken belief that it makes their output look more professional, but that's a symptom of the poor level of coding skills prevalent in the industry.

Used properly, the page-template extension offers a reasonable amount of extra functionality. It's non-standard, but we're already seeing people playing around (http://infogridpacific.typepad.com/using_epub/2010/05/ipad-css-serious-fun-with-noteboxes.html) with webkit-specific css3 elements to get nice effects on the iPad, so the epub standard is in danger of losing relevance.

darkpoet
06-18-2010, 11:21 AM
I'll invite you to take a look at my epub-formatted book. The 9th section called "Tarot" (adversary) is a collection of poetry. In particular, numbers 19, 20, 22 should prove good examples of a "best-fit" solution. Due to page-width, it's really a matter of doing some "padding-left" and "padding-right" work... coupled with some left, right, or center, alignment... Also, because you don't want stanzas breaking across pages (and when the user selects large size fonts, they will), I made sure to use ".dontbreak { page-break-inside: avoid ; }" in the CSS as well...

http://www.mobileread.com/forums/showthread.php?p=815201

JSWolf
06-18-2010, 12:29 PM
Well, a lot of publishers use the page-template badly, putting margins in it that should be specified in the css. In fact it seems a lot of them just paste in a single page-template file that they've found somewhere in the mistaken belief that it makes their output look more professional, but that's a symptom of the poor level of coding skills prevalent in the industry.

Used properly, the page-template extension offers a reasonable amount of extra functionality. It's non-standard, but we're already seeing people playing around (http://infogridpacific.typepad.com/using_epub/2010/05/ipad-css-serious-fun-with-noteboxes.html) with webkit-specific css3 elements to get nice effects on the iPad, so the epub standard is in danger of losing relevance.

Yes, the page-template is used by publishers to specify page margins. They don't use it for anything that you cannot do in CSS. I prefer my ePub to have no margins. That's my personal choice. But what I have to do to achieve that is to delete the page-template, edit the OPF to remove it, and then edit ever XML file to remove the page-template from there. Granted, doing the XML removing is easy with Notepad++ as it allows me to load all the files I want and then do a search/replace on all of them at once. Also, I then have to edit the CSS (would have to do anyway). And finally, I have to delete the page-template from the ePub itself. So that's three extra steps I have to take just to be able to edit the margins via the CSS because of this rather useless page-template.

I've not seen any use of page-template (yet) that could not be done in CSS.

Jellby
06-18-2010, 01:16 PM
But what I have to do to achieve that is to delete the page-template, edit the OPF to remove it, and then edit ever XML file to remove the page-template from there. Granted, doing the XML removing is easy with Notepad++ as it allows me to load all the files I want and then do a search/replace on all of them at once. Also, I then have to edit the CSS (would have to do anyway). And finally, I have to delete the page-template from the ePub itself.

You already "delete the page-template" as the first step ;)

Wouldn't it just be easier to edit the page-template to make it "empty"? That way you don't need to remove every reference to it. I don't know if a truly empty file would work, but something like this probably would:

<ade:template xmlns="http://www.w3.org/1999/xhtml" xmlns:ade="http://ns.adobe.com/2006/ade" xmlns:fo="http://www.w3.org/1999/XSL/Format">

</ade:template>

I've not seen any use of page-template (yet) that could not be done in CSS.

In post #60 (http://www.mobileread.com/forums/showthread.php?p=744547) I showed something. It's not really a page-template, but conditional styling, but it still uses the same file. I've used it to hide "oeb-page-head" elements from ADE, which otherwise puts them in the main text flow...

HamsterRage
06-21-2010, 12:19 AM
I won't claim to have thought this up myself. It draws a nice box around the header, with a big number and a subtitle for the chapter:


.chapterHeader {
height:60px;
border:1px solid #000;
display:block;
margin-bottom:20px;
background-color:#FFF;}

.chapterHeader .translation {
float:left;
font-weight: normal;
margin-top:38px;
margin-left: -8px;
margin-bottom: 0px;
padding-right: 16px;
padding-left: 5px ;
padding-bottom: 0px;
padding-top: 0px;
font-size:26px;
background-color:#FFF;}

.chapterHeader .count {
line-height: 100%;
font-style:normal;
font-weight: normal;
text-transform:uppercase;
font-size:94px;
margin-right:18px;
margin-top:-14px;
margin-bottom: -20px;
float:left;
padding:0px;
background-color:#FFF;}

And here's the the markup for the header itself:


<div class="body chapter" id="chapter">
<h2 id="heading_id_2"><span class="chapterHeader"><span class="translation">Chapter</span> <span class="count">1</span></span> Chapter Subtitle</h2>

Chang
10-06-2010, 04:35 AM
Hey! It's me again.. This time problems with centering a table. How can I center my table easily and simply? I tried using:

table.center {
margin-left:auto;
margin-right:auto;
}

It works fine e.g. in Firefox but not in ADE. Is there simple and easy way to center a small table? I don't want to use width: 100% for the table because it's a small one.

GeoffC
10-06-2010, 07:26 AM
could be epubs are not designed for tables .... :chinscratch:

Jellby
10-06-2010, 07:56 AM
That's the way, but ADE just doesn't support "auto" margins :rolleyes:

nrapallo
10-06-2010, 07:58 AM
could be epubs are not designed for tables .... :chinscratch:

It's centering that is not supported by ADE for tables nor images...

How this "bug" can persist is beyond comprehension! :angry:

EricDP
10-06-2010, 10:50 AM
How this "bug" can persist is beyond comprehension! :angry:
Unfortunately, the standard allows this behaviour, which is one of the differences between OPS and XHTML/CSS. The standard reads "Reading Systems may set the value of any margin property whose specified value is auto to 0." See footnote 1 in section 3.3 (http://www.idpf.org/2007/ops/OPS_2.0_final_spec.html#Section3.3). :smack:

You can get around it by putting your content inside a table block that has been centred. See this thread (http://www.mobileread.com/forums/showthread.php?t=90548)for some work-arounds.

Peter Sorotokin
10-13-2010, 01:58 PM
How this "bug" can persist is beyond comprehension! :angry:

You may want to check if EPUB spec requires margin:auto support.

Peter Sorotokin
10-13-2010, 02:00 PM
Yes, the page-template is used by publishers to specify page margins. They don't use it for anything that you cannot do in CSS.

It is certainly not a good idea to use page template just for margins. These should be specified using regular margins on body and @page rule.

EricDP
10-13-2010, 02:32 PM
It is certainly not a good idea to use page template just for margins. These should be specified using regular margins on body and @page rule.

I agree, but it seems to be standard practice. At least half of the books I've purchased have done this, and with huge margins, too. The first thing I do with these books is strip the DRM and delete the page template. Then I add an @page entry into the stylesheet with the top/bottom margins, and I create a default body style with left/right margins and text-justify. Suddenly the book is readable!

Why can't publishers realize that their trade-paperback edition and hardcover edition margins just don't work on a 6" screen? Doesn't anybody proof these books on an actual reading device?

nrapallo
10-13-2010, 02:46 PM
It's centering that is not supported by ADE for tables nor images...

You may want to check if EPUB spec requires margin:auto support.

I'm aware that margin:auto can allow rendering systems to use margin:0, but that's not what I was complaining about; I was specifically referring to the "centering" bug whereby tables are not allowed to be centered (and images are not easily allowed to be centered). :rolleyes:

Centering simple tables (like the TOC in many Project Gutenberg books) should be provided for, and I know workarounds can be used to properly center images, while centering headings using <h1> and similar constructs has always worked like a charm! :thumbsup:

When the device's width is known, then centering should just be an algebraic exercise when you know the "extent" (max.) width of the table and/or image. Though I can understand that tables can be arbitrarily complex and not yield it's extent width easily, simple tables should be rendered centered if so specified... ;)

EricDP
10-13-2010, 04:15 PM
Tables can be centered, you just need to make them 'inline'. Make a div with 'text-align: center'. Make your table 'display: inline-table' and it will be centered as if it were text. The only problem is, as an inline element, it can't break across pages - the entire table is treated as a single character of text.

nrapallo
10-13-2010, 06:04 PM
Tables can be centered, you just need to make them 'inline'. Make a div with 'text-align: center'. Make your table 'display: inline-table' and it will be centered as if it were text. The only problem is, as an inline element, it can't break across pages - the entire table is treated as a single character of text.

:2thumbsup That's good to know!!! It is the same answer given in another thread where I struggled with the centering of tables called eBooks of chess problems. Center table bug? (http://www.mobileread.com/forums/showthread.php?p=374968#post374968)

:chinscratch: It seems I remember this problem quite distinctly, but somehow forgot it's solution, i.e. 'display: inline-table' :o

nrapallo
10-13-2010, 06:33 PM
The only problem is, as an inline element, it can't break across pages - the entire table is treated as a single character of text.

...it can't break across pages...

Oh, that's a big problem with lengthy TOC or List of Illustrations found in some PG ebooks, like Etext #28700 that I have uploaded before to my GuteBook thread. I re-generated the .epub version and attached it below, this time inserting your suggested code, namely:table {
display: inline-table;
} /* work around for ADE centering with CSS problem */


You have to make the text very small to be able to see the entire Contents or Illustrations page at the beginning of the ebook. But at least it's centered! :)

Any better solutions... ;)

EricDP
10-13-2010, 08:06 PM
...it can't break across pages...

Oh, that's a big problem with lengthy TOC or List of Illustrations found in some PG ebooks
Yes, I agree. I struggled with this for over a month when doing the Table of Illustrations for Little Women. I wanted a centered numbered list. No way to do this without auto-margins or a centered inline element, and the inline element won't break. Makes me crazy!! :angry:

Also keep in mind that some people choose a really big font.

One last keep in mind: I use inline-table because inline-block is not part of the OPS standard. Even though it works in ADE, I suggest avoiding it. It might not work on some readers, or future readers that are more strict. Oddly, inline-block passes ePubCheck.

JSWolf
10-16-2010, 07:43 PM
It's centering that is not supported by ADE for tables nor images...

How this "bug" can persist is beyond comprehension! :angry:

Images can indeed be centered.

<center><img...></img></center>

That works.

JSWolf
10-16-2010, 07:44 PM
It is certainly not a good idea to use page template just for margins. These should be specified using regular margins on body and @page rule.

I much prefer the margins set in the body style.

EricDP
10-17-2010, 11:22 PM
I much prefer the margins set in the body style.
I had troubles putting top and bottom margin in body. They seem to work better in @page. Maybe because body is for the entire file, whereas page is for the page as rendered by the reader. However, putting left and right margins in @page seemed to indent the ADE page numbers with the text, whereas body margins just indented the text, leaving the ADE page numbers in the margin. That's why I use body for left and right and @page for top and bottom.

Not much of an issue for some readers... nook doesn't show ADE page numbers in the margin - they are at the bottom. Same with Kobo, and I think it's also the same with Sony readers. But some show it in the margins.

JSWolf
10-29-2010, 10:56 AM
The new Sony Readers 350, 650, & 950 do not show the ADE page number in the margin any longer.

I do think this is a good thing that newer versions of ADE don't show the page number. But I do think an option to show it/not show it would be good in case you are using the eBook to cite from.

Pablo
02-22-2011, 01:20 PM
I am making an ePub version of PG "Sailing alone around the world", by Joshua Slocum.

This book has a lot of images, with a caption below each. The caption can be quite long, sometimes several lines of text.

Some small images are positioned to the left or right, with text around, and the caption below. I've managed to implement this by puting both the image and the caption inside <div></div> tags, but I need to split the caption in several lines, so that it doesn't go beyond the width of the image.

I've tried manually inserting <br /> tags inside the caption text, but that upsets centering and doesn't look as clean as I would like. I'm sure some of the css gurus here have a better solution.....

Jellby
02-23-2011, 08:20 AM
You have to specify a fixed width to the <div> enclosing both the image and caption. Sadly, there's no way (that I know of) of passing the image's natural width to the <div>, but you can have something like:

<div class="illustration" id="ill-1">
<img src="image-01.jpg" alt=""/>
<p class="caption">Caption.</p>
</p>

with:

div.illustration { float: left; margin: 1em; }
div#ill-1 { width: 20% } /* or 240 px, or 10em, or whatever */
div.illustration img { max-width: 100% }
p.caption { ... }

It's not perfect, but it might help.

Pablo
02-23-2011, 10:19 AM
Thank you very much Jellby!!! I will give it a try.
In the meantime, I found another solution involving tables.


<table class="ir">
<tr>
<td>
<h3 id="heading_id_25" title="Figure 18"><img height="162" src="../Images/BdIm__18.jpg" title="" width="252" /></h3>
</td>
</tr>
<tr>
<td width="252">
<p class="caption">“I suddenly remembered that I could not swim.”</p>
</td>
</tr>
</table>


with


.caption { font-size: 0.9em; font-weight: bold; text-align: center; text-indent: 0; margin-bottom: 1em;}
.ir { float: right; margin: 3px;}


(This image is floated to the right).

It works in my Sony 505, which has an old implementation of ADE. I wonder if this would work in all readers.

Amalthia
02-23-2011, 05:00 PM
Is there a code for just normal wrapped rectangular images in epub? For beginners it may not hurt to show the basics before showing the advanced code like the wrapped non-rectanglar images.

DaleDe
02-23-2011, 09:01 PM
the basics are all on the wiki under CSS there is also CSS HowTo for more advanced stuff.

Dale

Amalthia
02-24-2011, 01:39 PM
the basics are all on the wiki under CSS there is also CSS HowTo for more advanced stuff.

Dale

I looked but didn't find it. I tried to use the code provided at the beginning of this thread but the text overlapped the image...

DaleDe
02-24-2011, 03:32 PM
I looked but didn't find it. I tried to use the code provided at the beginning of this thread but the text overlapped the image...

http://wiki.mobileread.com/wiki/CSS#Images is the basic information on images. It covers centering and wrapping text to the left or right of an image. Those are the basic things.

Dale

Pablo
02-24-2011, 03:52 PM
I looked but didn't find it. I tried to use the code provided at the beginning of this thread but the text overlapped the image...

I my experience the best way to learn these things is looking inside well formatted books, for example, Zelda's "Three men in a boat" or any book by Jellby. Feedbook's ePubs are also great.

GeoffC
02-24-2011, 04:47 PM
I my experience the best way to learn these things is looking inside well formatted books, for example, Zelda's "Three men in a boat" or any book by Jellby. Feedbook's ePubs are also great.


:thumbsup:

Amalthia
02-27-2011, 09:49 PM
http://wiki.mobileread.com/wiki/CSS#Images is the basic information on images. It covers centering and wrapping text to the left or right of an image. Those are the basic things.

Dale

Thanks for the link! I'm not sure how I missed seeing this the first time I was at the wiki site.

Amalthia
02-27-2011, 09:51 PM
I my experience the best way to learn these things is looking inside well formatted books, for example, Zelda's "Three men in a boat" or any book by Jellby. Feedbook's ePubs are also great.

I may just do that! :)

gsbe
08-23-2011, 03:09 AM
It would be awesome if there was a starting template designed for creating an ePUB with InDesign CS5.5.

I've looked at the ePUB ZenGarden (http://epubzengarden.com) for ePUB which is cool but doesn't have a lot of the common features that many books might want - like wrapped images, drop caps, etc.

I want my eBook to look great but I'm not a CSS wizard. Having a template for InDesign CS5.5 would be a great way to start eBook creation from scratch.

I was hoping that I'd find something like a CSS template for ePUB in this thread but not so. Anyone have something like this, a starting template for ePUBs? Could be a basic CSS or InDesign CS5.5 file.

Toxaris
08-23-2011, 05:25 AM
You can easily create a template for your own with the code snippets in this thread. It is usually better to only put the styles in the stylesheet that you are using to prevent redundant coding.
You don't have to be a wizard, most stuff isn't really complex. At least basic CSS knowledge is invaluable if you are creating ePUBs. Personally I am not to crazy about the stylesheets ID generates. The examples I have seen here on the forum has a lot of redundant code. I think most stylesheets can be reduced to approx. 20% with no impacton the display of the text.

gsbe
08-24-2011, 01:07 AM
The majority of the code in this thread relates to drop caps. I'm looking for a starter template, one that contains the majority of styles that most users are going to require. I suggested a few of them already in my last post.

Of course we all want an uber-clean stylesheet...but we also want to get the job done quick. Having pre-determined styles, especially in a WYSIWYG tool like InDesign, that correctly display in the exported EPUB would be a huge time saver for me. Once I set the styles correctly in ID, I can go back and tweak the exported EPUB to my hearts content. The template is a starting block to save time.

As I mentioned, the ePub Zen Garden begins this process by creating a blank template with pre-determined styles but is missing a number of the basic styles most designers would need.

Anyone have such a template they would be willing to post?


You can easily create a template for your own with the code snippets in this thread. It is usually better to only put the styles in the stylesheet that you are using to prevent redundant coding.
You don't have to be a wizard, most stuff isn't really complex. At least basic CSS knowledge is invaluable if you are creating ePUBs. Personally I am not to crazy about the stylesheets ID generates. The examples I have seen here on the forum has a lot of redundant code. I think most stylesheets can be reduced to approx. 20% with no impacton the display of the text.

Jellby
08-24-2011, 04:56 AM
You can open any of the books I have uploaded and see the embedded styles, they are pretty much my "templates", although each book has its own little customizations. I don't use wrapped images, though, because I couldn't find a satisfactory solution that would work in all situations (big and small screens, landscape and portrait).

nrapallo
08-24-2011, 12:05 PM
Anyone have such a template they would be willing to post?

You can start off with the one Project Gutenberg used for one of their latest ebook offerings, Ulster Folklore by Elizabeth Andrews (http://www.gutenberg.org/ebooks/37187) and modifiy to suit your generic needs. That html ebook can be found here (http://www.gutenberg.org/files/37187/37187-h/37187-h.htm).

( It's etext # 37187 for GuteBook users... :rolleyes: )

By the way, below is just a listing of their <styles> section embedded in their .html, namely:

<style type="text/css">

<!--
p { margin-top: .75em;
text-align: justify;
text-indent: 1.25em;
margin-bottom: .75em;
}

body{margin-left: 10%;
margin-right: 10%;
}

h1,h2,h3,h4,h5,h6 {
text-align: center; /* all headings centered */
clear: both;
margin: auto;
}
hr { width: 33%;
margin-top: 2em;
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
clear: both;
}

table {
margin-left: auto;
margin-right: auto;
}

.pagenum { /* uncomment the next line for invisible page numbers */
position: absolute; right: 2%;
font-size: 75%;
color: gray;
background-color: inherit;
text-align: right;
text-indent: 0em;
font-style: normal;
font-weight: normal;
font-variant: normal;}

/* Chapter Start */
.newpg {page-break-before: always;}
.firstwords {font-variant:small-caps;font-size:1.2em;font-weight:bold;}
.firstLetter{
display : block;
float : left;
margin-top : -0.17em;
margin-left : -0.1em;
margin-right : 0.4em;
height : 2em;
text-indent: 0em;
}

.firstLetter span{
font-size : 3.33em; /* use 3.33em for two lines */
line-height : 1em;
}

.firstLetter + span{
margin-left : -1.4em;
}

.chapsub {
font-size:1.1em;
font-weight:bold;
text-align: center;
font-variant: small-caps;
text-indent:0em;
margin-top:.35em;
margin-bottom:.75em;
margin-left: 5%;
margin-right: 5%;}

.center {text-align: center;text-indent:0em;}

.smcap {font-variant: small-caps;}


.caption {
font-size: .7em;
font-weight:bold;
text-align: left;
font-family: serif;
text-indent:0em;
margin-left:.8em;
margin-bottom:.2em;
}

.captioncenter {
font-size: .7em;
font-weight: bold;
text-align: center;
font-family: serif;
margin-top:.2em;
text-indent:0em;
margin-left:0em;
}

.captionimage {
font-size: .9em;
font-weight: bold;
text-align: center;
font-family: serif;
margin-top:.3em;
text-indent:0em;
margin-left:0em;
font-variant: small-caps;
}

/* Images */
.figcenter {
margin: auto;
text-align: center;
}

.alignright {
float: right;
padding-right: .4em;
font-style:italic;
}

/* Footnotes */
.footnotes {border: dashed 1px;margin-top:2em;}
.footnote {margin-left: 5%; margin-right: 5%; font-size: 0.9em; text-indent: 1.5em;}
.fnanchor {vertical-align: super; font-size: .7em; text-decoration: none;}
.fnanchorchap {vertical-align: super; font-size: .5em; text-decoration: none;}
.label { font-size: 1em; font-weight: bold;}


/* Poetry */

.poem {
margin-left:15%;
margin-right:15%;
text-align: left;
}

.poem br {display: none;}

.poem .stanza {margin: 1em 0em 1em 0em;}

.poem span.i0 {
font-size: .9em;
display: block;
margin-left: 2em;
padding-left: 3em;
text-indent: -3em;
}

.poem span.i0a {
font-size: .9em;
display: block;
margin-left: 2em;
padding-left: 2.65em;
text-indent: -3.00em;
}
.poem span.i2 {
font-size: .9em;
display: block;
margin-left: 3.25em;
padding-left: 3em;
text-indent: -3em;
}


.smaller {font-size:.7em;}
.toctext {text-align: left;font-size:1em; display: block; padding-left: 1.8em; text-indent: -2.5em;margin-left:1em;}


.linearound {
border-width: 2px;
border-style: solid; border-color: black; margin-left:10%;margin-right:10%;
}

.index {
margin-top:.2em;
margin-bottom:.2em;
margin-right:15%;
margin-left:15%;
display: block;
padding-left: 1.8em;
text-indent: -1.8em;
}

.indexstart {
margin-top:.2em;
margin-bottom:.2em;
padding-top:.9em;
margin-right:15%;
margin-left:15%;
display: block;
padding-left: 1.8em;
text-indent: -1.8em;
}
-->

</style>

DaleDe
08-24-2011, 01:07 PM
They sure give up a lot of screen space with left and right margins (20%, 30% on poetry). Perhaps they are targeting computers rather than portable devices.

nrapallo
08-24-2011, 01:28 PM
Perhaps they are targeting computers rather than portable devices.

:eek: you know, I think they still are... :rolleyes:

... but seriously, they are still trying to reproduce the original book "page layout" without regards to smaller portable devices. My GuteBook pre/post processor eliminates a lot of these biases and substitutes my own as an ebook creator for portable devices... ;)

JSWolf
08-24-2011, 01:36 PM
May as well delete that CSS from PG. It's awful. 10% margins? Who are they trying to fool? Even on a computer screen that's way too wide.

nrapallo
08-24-2011, 01:45 PM
May as well delete that CSS from PG. It's awful.

This is what I've replaced their CSS with after using GuteBook to create an epub ebook without wide margins, page numbers inserted into the text body, large pararagh/section breaks, etc... (Note: the code in Blue at the bottom was inserted by GuteBook to replace any previous style used by PG above it)

<style type="text/css">

<!--
p { margin-top: .75em;
text-align: justify;
text-indent: 1.25em;
margin-bottom: .75em;
}

body { margin-left: 1%; margin-right: 1%; text-align: justify; text-indent: 2em; }

h1,h2,h3,h4,h5,h6 {
text-align: center; /* all headings centered */
clear: both;
margin: auto;
}
hr { width: 33%;
margin-top: 2em;
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
clear: both;
}

table {
margin-left: auto;
margin-right: auto;
}

.pagenum { /* uncomment the next line for invisible page numbers */
position: absolute; right: 2%;
font-size: 75%;
color: gray;
background-color: inherit;
text-align: right;
text-indent: 0em;
font-style: normal;
font-weight: normal;
font-variant: normal;}

/* Chapter Start */
.newpg {page-break-before: always;}
.firstwords {font-variant:small-caps;font-size:1.2em;font-weight:bold;}
.firstLetter{
display : block;
float : left;
margin-top : -0.17em;
margin-left : -0.1em;
margin-right : 0.4em;
height : 2em;
text-indent: 0em;
}

.firstLetter span{
font-size : 3.33em; /* use 3.33em for two lines */
line-height : 1em;
}

.firstLetter + span{
margin-left : -1.4em;
}

.chapsub {
font-size:1.1em;
font-weight:bold;
text-align: center;
font-variant: small-caps;
text-indent:0em;
margin-top:.35em;
margin-bottom:.75em;
margin-left: 5%;
margin-right: 5%;}

.center {text-align: center;text-indent:0em;}

.smcap {font-variant: small-caps;}


.caption {
font-size: .7em;
font-weight:bold;
text-align: left;
font-family: serif;
text-indent:0em;
margin-left:.8em;
margin-bottom:.2em;
}

.captioncenter {
font-size: .7em;
font-weight: bold;
text-align: center;
font-family: serif;
margin-top:.2em;
text-indent:0em;
margin-left:0em;
}

.captionimage {
font-size: .9em;
font-weight: bold;
text-align: center;
font-family: serif;
margin-top:.3em;
text-indent:0em;
margin-left:0em;
font-variant: small-caps;
}

/* Images */
.figcenter {
margin: auto;
text-align: center;
}

.alignright {
float: right;
padding-right: .4em;
font-style:italic;
}

/* Footnotes */
.footnotes {border: dashed 1px;margin-top:2em;}
.footnote {margin-left: 5%; margin-right: 5%; font-size: 0.9em; text-indent: 1.5em;}
.fnanchor {vertical-align: super; font-size: .7em; text-decoration: none;}
.fnanchorchap {vertical-align: super; font-size: .5em; text-decoration: none;}
.label { font-size: 1em; font-weight: bold;}


/* Poetry */

.poem {
margin-left:15%;
margin-right:15%;
text-align: left;
}

.poem br {display: none;}

.poem .stanza {margin: 1em 0em 1em 0em;}

.poem span.i0 {
font-size: .9em;
display: block;
margin-left: 2em;
padding-left: 3em;
text-indent: -3em;
}

.poem span.i0a {
font-size: .9em;
display: block;
margin-left: 2em;
padding-left: 2.65em;
text-indent: -3.00em;
}
.poem span.i2 {
font-size: .9em;
display: block;
margin-left: 3.25em;
padding-left: 3em;
text-indent: -3em;
}


.smaller {font-size:.7em;}
.toctext {text-align: left;font-size:1em; display: block; padding-left: 1.8em; text-indent: -2.5em;margin-left:1em;}


.linearound {
border-width: 2px;
border-style: solid; border-color: black; margin-left:10%;margin-right:10%;
}

.index {
margin-top:.2em;
margin-bottom:.2em;
margin-right:15%;
margin-left:15%;
display: block;
padding-left: 1.8em;
text-indent: -1.8em;
}

.indexstart {
margin-top:.2em;
margin-bottom:.2em;
padding-top:.9em;
margin-right:15%;
margin-left:15%;
display: block;
padding-left: 1.8em;
text-indent: -1.8em;
}
-->

h1, h2, h3, h4, h5, h6 {text-align: center }
h2 { page-break-before: always; }
p {text-indent: 2em; margin-top: 0em; margin-bottom: 0em; padding-top: 0em; padding-bottom: 0em}
br {margin-top: 0em; margin-bottom: 0em; padding-top: 0em; padding-bottom: 0em}
</style>

JSWolf
08-24-2011, 01:48 PM
.poem has 15% margins? That CSS still needs a lot of work.

Jellby
08-25-2011, 05:18 AM
You can start off with the one Project Gutenberg used for one of their latest ebook offerings, Ulster Folklore by Elizabeth Andrews (http://www.gutenberg.org/ebooks/37187) and modifiy to suit your generic needs.

I wouldn't recommend that. PG books are created in TXT and HTML formats, targeted mainly for computer screens (and there's no unified style, every creator does what he/she likes best). The ePub, Mobi, etc. formats are automatically created by a custom program (http://pypi.python.org/pypi/epubmaker/), the result of which leaves often much to be desired.

nrapallo
08-25-2011, 12:16 PM
I wouldn't recommend that.

While far from perfect, it can provide some useful formatting, if you fix/correct the large margins.

I uploaded here (http://www.mobileread.com/forums/showthread.php?t=147608) my epub version of that PG html ebook Ulster Folklore by Elizabeth Andrews (http://www.gutenberg.org/ebooks/37187).

As a result, as you can see, it can be made to look very nice (with minor CSS edits) even on portable devices... :)

carmenchu
09-02-2011, 02:53 PM
A comment:
with that kind of style-sheet (yes, I also convert from PG quite a lot) I cannot get the small-caps to show (desktop; XP; Calibre viewer) unless I add font-family: serif; to the declaration -- I used to need font-family: verdana, serif; until I updated to the "calibri, etc. pack".
Of course, I am using "default system fonts", and usually disable any others -- liking clear-type.
This is intended as a warning/request for information: is that a general issue ... ?
Of course, there are specific small-caps fonts, or font families with the variant included (I have found quite a few as freebies) -- but I should say many people, like myself, would rather stick to system defaults.

Toxaris
09-02-2011, 07:06 PM
There is an issue with small caps. They are usually not supported in the readers, but they should. Currently your only real method is to include a small caps font.
Another method is the fake the smallcaps by reducing the size of capitals. However, that is not the same.

Keroberos
09-04-2011, 01:56 PM
I was looking for a way to have multiple items in a single line header (book# section# chapter#) spread out over the full width of the page and figured out a way to do it using a html table.

It works well in everythin I could test it in (nook classic, Bluefire Reader on my iPod Touch, Calibre, the Firefox ePub Reader, ADE 1.7.2 and 1.8 preview, and Sony Reader Library). And it converts decently to mobi using Kindlegen.

Here's the html code.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="leftgrey">BOOK #</td>

<td class="centergrey">Section #</td>

<td class="right">Chapter #</td>
</tr>
</table>
<hr />

And here's the css.
table {
margin-top : 2em;
margin-bottom : 0;
}
td {
font-family : sans-serif;
font-size : 1.5em;
width : 33%;
}
.left {
text-align : left;
}
.leftgrey { /* --- Use for greying out unchanging items --- */
text-align : left;
color : #cccccc;
}
.center {
text-align : center;
}
.centergrey { /* --- Use for greying out unchanging items --- */
text-align : center;
color : #cccccc;
}
.right {
text-align : right;
}
hr {
margin-top : 0;
border : 0;
background-color : black;
height : 3px;
}

carmenchu
09-07-2011, 08:48 AM
Thanks.
Another point: DO or DO NOT most readers react to the addition of font-family for small-caps?
Thanks again.

Toxaris
09-07-2011, 10:59 AM
Most readers ignore smallcaps at the moment.

adv_dp_fan
09-07-2011, 03:23 PM
iBooks handles small-caps but one thing I noticed, if you set font-size: 1em and use small-caps, they won't display properly but setting the font-size of the small-caps to 1.1em or 0.9em and suddenly they work.

carmenchu
09-07-2011, 04:18 PM
Tanks -- information always of value when editing.

DaleDe
09-09-2011, 09:36 AM
Thanks.
Another point: DO or DO NOT most readers react to the addition of font-family for small-caps?
Thanks again.
If you embed a font that uses only small caps and reference it then it will work but the CSS method does not work.

AbominableDavid
09-21-2011, 09:00 AM
My apologies if this is old hat to everyone, but it is new to me.

I've always been a little bothered by "quoted quotes" in epubs - when you've got a character speaking, and he's quoting something else. Having a double quote followed immediately by a single quite looks pretty bad, to me; it looks like a triple quote in most epubs I've seen. Putting a space between the double quote and single quote also looks pretty bad to me.

It occurred to me on my drive home this morning that I could fix that with css.

.space
{margin-left: 2pt;
}

Then use the following in my html:

<p>"<span class="space">'</span></p>

It produces results like in the attached image in ADE (and similar results in my PRS650).

I haven't decided yet if I'm OCD enough to start doing this in all my books.

Jellby
09-21-2011, 10:30 AM
I've always thought that this should be handled by font kerning...

pdurrant
09-21-2011, 11:16 AM
I've always been a little bothered by "quoted quotes" in epubs - when you've got a character speaking, and he's quoting something else. Having a double quote followed immediately by a single quite looks pretty bad, to me; it looks like a triple quote in most epubs I've seen. Putting a space between the double quote and single quote also looks pretty bad to me.

It occurred to me on my drive home this morning that I could fix that with css.

.space
{margin-left: 2pt;
}


I've done this before now. I think it's probably worth the trouble. I'd also urge you to use 'proper' quotes in your ebooks, i.e. “” and ‘’.

DaleDe
09-21-2011, 11:59 AM
Nice solution. I had thought of using CSS with letter-spacing to fix this problem and then set the span to the full " ' combination since it can also be ' " then there is also things like " ' ".

Dale

AbominableDavid
09-22-2011, 04:30 AM
I've done this before now. I think it's probably worth the trouble. I'd also urge you to use 'proper' quotes in your ebooks, i.e. “” and ‘’.

I normally do use proper quotes - straight quotes were just easier for testing purposes since they're right there on the keyboard.

Nice solution. I had thought of using CSS with letter-spacing to fix this problem and then set the span to the full " ' combination since it can also be ' " then there is also things like " ' ".


Do most epub readers recognize the letterspacing attribute? I didn't even know that existed until just now - I'll have to do some testing with it later. It would certainly be easier to do it that way than to create one for " ' and another for ' ".

Jellby
09-22-2011, 05:04 AM
Or you could add one of the different non-breaking spaces available in Unicode (http://en.wikipedia.org/wiki/Space_(punctuation)):

&nbsp; -> Normal size, although it usually does not expand with other normal spaces when the line is justified.
& #8199; -> Figure space, shouldn't be much different from &nbsp;.
& #8239; -> Narrow no-break space. I'd favour this one.
& #8288; and & #65279; -> These are zero-width, and have other uses.

roger64
03-26-2012, 09:47 AM
@Jellby

About & #8239; -> Narrow no-break space.

" This char is also used in French before ";?!»" chars and after "«". "

As a French, this space entity interests me a lot of course. It's what we call or close to "espace fine insécable". However I can see no way to use it for EPUB purposes. Sigil erases it immediately, ADE will probably flag it with a question mark as it did with &thinsp; (this last one at least is recognized by Sigil) )

It seems we need special software to handle this? But how can we expect to transfer it to ebook-readers which follow ADE specifications? This has always puzzled me.

Emulation, though possible, seems to be too cumbersome for these small animals.
texte<span class=*»fine*»>nbsp</span>texte
Related CSS*code:
.fine {font-size: 30%; }

If you could provide some more comments on this, I would be very interested. :bookworm:

Jellby
03-26-2012, 12:11 PM
I don't know what Sigil does, but my reader (Cybook Orizon, which uses an Adobe engine internally) supports it fine, at least with the fonts I use.

DiapDealer
03-26-2012, 01:12 PM
However I can see no way to use it for EPUB purposes. Sigil erases it immediately,
Sigil doesn't erase it at all. It just un-entities it... meaning you probably can't see it in the Code View. But it's still there and it still renders properly in the Book View.

The regex expression \x{202f} will find all occurrences of the narrow, non-breaking spaces that you thought were erased (in Code View).

This is all based on Sigil 0.5.3.

ADE will probably flag it with a question mark as it did with &thinsp;
My Desktop ADE doesn't recognize it with default fonts, but I have no idea how portable devices might behave.

JSWolf
03-26-2012, 01:20 PM
Sigil doesn't erase it at all. It just un-entities it... meaning you probably can't see it in the Code View. But it's still there and it still renders properly in the Book View.

The regex expression \x{202f} will find all occurrences of the narrow, non-breaking spaces that you thought were erased (in Code View).

This is all based on Sigil 0.5.3.

Is that Tidy at work again?

DiapDealer
03-26-2012, 01:28 PM
Is that Tidy at work again?
No clue. I just learn to work around things like that (once I'm aware of them) rather than dwelling on them.

roger64
03-26-2012, 10:46 PM
Thanks all for your infos. It's a big first for me to know something can be unentified but not erased. :)

I'll try this clever regex expression, it will be an opportunity to use 0.53.

Will for sure come back on it after trials.

I don't know what Sigil does, but my reader (Cybook Orizon, which uses an Adobe engine internally) supports it fine, at least with the fonts I use.

/hopeful / Could you name one of them (if possible, free, regular, serif) ?

supports it "fine" : That's exactly the word to use!

roger64
03-27-2012, 10:38 PM
Hi

I just found some information about the narrow no-break space (http://www.fileformat.info/info/unicode/char/202f/index.htm), which is more recent than the thin space and presumably more promising for French writers and about its font support. Here. (http://www.fileformat.info/info/unicode/char/202f/fontsupport.htm) :)

Like presumed, ADE is flagging it with a question mark. Even using a supported font (TNR), on my -old- PRS-505, I get the same question marks.

So, if I prepare an EPUB with these narrow spaces, it seems it will be moreless the same as with the thins spaces. Only the "new generation" of e-readers seems to be able to transcribe them correctly. French will have to wait a little...

Or did I miss something?

Doitsu
03-28-2012, 03:38 AM
So, if I prepare an EPUB with these narrow spaces, it seems it will be moreless the same as with the thins spaces. Only the "new generation" of e-readers seems to be able to transcribe them correctly. French will have to wait a little...
I've always thought that French always requires non-breaking spaces before two-part punctuation characters (e.g. colons, question marks etc.).
Are thin spaces automatically treated like non-breaking spaces? If not, aren't you (theoretically) running the risk that a punctuation character is separated from the preceding word and moved to the next line if the user changes the font size?
BTW, I've read conflicting information regarding the recommended width of a space character before a two-part punctuation character in French. What's the correct width according to your research?

Toxaris
03-28-2012, 04:02 AM
No clue. I just learn to work around things like that (once I'm aware of them) rather than dwelling on them.

I have put in an issue in the list about this some time ago. In older versions this behavior was not present (0.4.2 or even lower) and I really want to see those entities. If you can't see them, you never know if they are there until the book is already finished and on the readers. I really dislike question marks when they don't have to be there...

roger64
03-28-2012, 05:18 AM
BTW, I've read conflicting information regarding the recommended width of a space character before a two-part punctuation character in French. What's the correct width according to your research?

It's indeed -slightly- conflicting.

It may not be very helpful because it's written in French but it deals with your question. Sorry for feeling unable to translate. Here it is. (http://fr.wiktionary.org/wiki/fine)

Jellby
03-28-2012, 12:48 PM
/hopeful / Could you name one of them (if possible, free, regular, serif) ?

Now I'm using Minion Pro (not free), but I believe it works with Droid Serif (free) too.

If I remember correctly (I don't have the reader here to try), narrow non-breaking spaces didn't work with the Gen3, and they only work with the Orizon if I enable hyphenation. It seems hyphenation triggers the use of a newer rendering engine, with better font support. When I enable hyphenation narrow non-breaking spaces (and many other kinds of spaces) are turned into question marks.

Have a look here (http://wiki.mobileread.com/wiki/EPub_Reader_Test).

Jellby
03-28-2012, 12:50 PM
In reality, I'd prefer not to have to include these thin spaces. In LaTeX, for instance, I can just say that I'm writing in French, and automatically all punctuation that needs has some space (non-breaking, of course) added before/after it. I wish there was something similar for ePub (and there's no reason why a rendering engine could not implement it).

roger64
03-30-2012, 11:08 AM
In reality, I'd prefer not to have to include these thin spaces. In LaTeX, for instance, I can just say that I'm writing in French, and automatically all punctuation that needs has some space (non-breaking, of course) added before/after it. I wish there was something similar for ePub (and there's no reason why a rendering engine could not implement it).

It would be great. I will ask Henrik Just about it. He is probably familiar about it because he develops Writer2Latex, of which W2X is only a subset.

Thanks for your other answers.

Jellby
03-30-2012, 12:33 PM
Actually, what I meant is that the thin spaces shouldn't even be in the code, they're just a display thing. But short of that, adding them when the conversion into ePub is done would be already an improvement.

roger64
04-10-2012, 07:02 AM
Actually, what I meant is that the thin spaces shouldn't even be in the code, they're just a display thing. But short of that, adding them when the conversion into ePub is done would be already an improvement.

I published (http://www.mobileread.com/forums/showpost.php?p=2034406&postcount=138) a regex emulating them from &nbsp;
Just a lookalike. But ADE does not like thinsp and nnbsp so it's just a - clumsy - workaround.

Here is it to be used for example with Sigil as a regex (all html files).

Search ([«])&nbsp;|&nbsp;([;!?»])
Replace \1<span class="fine">&nbsp;</span>\2

CSS code is a one-liner:
span.fine {font-size:0.25em;}

huebi
04-14-2012, 01:11 PM
Deleted due to moderation issues.

paxmark1
04-28-2012, 04:25 AM
In all too many Project Gutenberg .epub 's the blue footnote number is superimposed on the text. This is probably due to their automated usage of epubmaker and their one size fits all settings thereof.

To fix - get into the .css part of the epub (Sigil works well for this). For PG it is /Styles/0.css
The right alignment is incorrect. Amend .footnote .label to have the right position to be at 91%

.footnote .label {
position: absolute;
right: 91%;
text-align: right
}

jobalcaen
10-05-2012, 07:37 PM
This is the code I use to center images that have width's set as percentages:

<div class="imagecentre"><img alt="a horse" src="../Images/pic0001.png" /></div>

div.imagecentre
{
margin-left: 25%;
width: 50%;
}

div.imagecentre img
{
width: 100%;
}

When setting a relative image width (such as 50%), create a left margin that is half of the remaining page width. In the example below the image width is 50% of the screen so the left margin is set to 25%.

I found the code at http://adamdscott.com/wrote-about/resizing-centering-images-in-ibooks/ and have tested it on: Ibooks, Sony PRS-505, ADE and the firefox epubreader.

At first it seemd like a simple fix but it was hard finding a solution that worked reliably on so many readers.