Mobileread
epub code snippets (html / css)
#1  zelda_pinwheel 05-08-2009, 11:45 AM
after spending several hours yesterday trying to find that drop cap thread i knew i had seen before 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 (thanks jellby, peter sorotkin, brewt, llasram, kovid, and everybody else who worked on this tricky problem !!)

xhtml :

Quote
<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:

Quote
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.
Reply 

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

It may be desirable to add:

Code
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:

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

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

#3  zelda_pinwheel 05-08-2009, 12:03 PM
thanks for the clarification jellby !
Reply 

#4  Jellby 05-09-2009, 09: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:
Code
<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:
Code
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).
Reply 

#5  zelda_pinwheel 05-10-2009, 05: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 :

show attachment »

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 :

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.
[epub] Alice's Adventures in Wonderland epub il - Carroll_ Lewis.epub (1.08 MB, 1669 views)
Reply 

#6  brewt 05-11-2009, 07: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
Reply 

#7  JSWolf 05-11-2009, 07:55 PM
Quote brewt
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.
Reply 

#8  brewt 05-11-2009, 11:37 PM
Quote JSWolf
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.

Quote
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
Reply 

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

#10  zelda_pinwheel 05-12-2009, 09:08 AM
Quote brewt
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.

Quote Kirtai
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 ?
Reply 

  Next »  Last »  (1/18)
Today's Posts | Search this Thread | Login | Register