epub code snippets (html / css) - Page 2

zelda_pinwheel · 05-13-2009, 09:59 AM

Quote:

Originally Posted by Jellby

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.

Quote:

Originally Posted by gwynevans

From netseeker's post

thanks gwynevans !

Quote:

Originally Posted by Hadrien

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

Quote:

Originally Posted by zelda_pinwheel

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

zelda_pinwheel · 05-13-2009, 04:22 PM

Quote:

Originally Posted by radius

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

yes, he is, but you might not be.

Jellby · 05-14-2009, 08:49 AM

Yet another solution, now with javascript:

Code:

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

zelda_pinwheel · 05-14-2009, 08:52 AM

jellby you're unstoppable !!

(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

Quote:

Originally Posted by zelda_pinwheel

(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

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

Quote:

Originally Posted by Jellby

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

... and here it is

Code:

<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

zelda_pinwheel · 05-14-2009, 12:59 PM

Quote:

Originally Posted by Jellby

Well, I think I'll stop now

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

zelda_pinwheel · 05-14-2009, 01:44 PM

jellby's code for non-rectangular images (post 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

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 :

Code:

  
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.

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 :

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 :

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:

Code:

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

Code:

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

Quote:

Originally Posted by zelda_pinwheel

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.

05-14-2009, 01:44 PM	#24
zelda_pinwheel zeldinha zippy zeldissima Posts: 27,827 Karma: 921169 Join Date: Dec 2007 Location: Paris, France Device: eb1150 & is that a nook in her pocket, or she just happy to see you?	non-rectangular images, narrower top part. jellby's code for non-rectangular images (post 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 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 : Code: 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. Attached Thumbnails

05-25-2009, 05:29 PM	#26
radius Lector minore Posts: 655 Karma: 1738720 Join Date: Jan 2008 Device: Aura One, Paperwhite Signature	Is it possible to do "smallcaps" using CSS? That is something like: Code: <p><span class="smallcaps">Smallcaps</span> at the beginning of a paragraph.</p> Looks something like: SMALLCAPS at the beginning of a paragraph. Last edited by radius; 05-25-2009 at 05:35 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
direkter Umlaut oder lieber HTML Code in Epub ?	NASCARaddicted	Erste Hilfe	14	06-16-2011 06:54 AM
Programming language code snippets in ebooks?	Connochaetes	Writers' Corner	7	10-18-2010 03:43 PM
ebook-convert HTML to EPUB and problem with <pre><code>	mikegr	Calibre	2	03-09-2010 03:27 PM
css override code for margins?	Amalthia	Calibre	15	08-11-2009 08:20 PM
Problems generating ePub from HTML/CSS	AlexBell	Calibre	3	07-17-2009 06:10 AM

05-14-2009, 08:52 AM	#20
zelda_pinwheel zeldinha zippy zeldissima Posts: 27,827 Karma: 921169 Join Date: Dec 2007 Location: Paris, France Device: eb1150 & is that a nook in her pocket, or she just happy to see you?	jellby you're unstoppable !! (but actually i don't think javascript is part of epub... but we can use that for webdesign, so it's still great !)

05-25-2009, 05:35 PM	#27
zelda_pinwheel zeldinha zippy zeldissima Posts: 27,827 Karma: 921169 Join Date: Dec 2007 Location: Paris, France Device: eb1150 & is that a nook in her pocket, or she just happy to see you?	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; }

05-25-2009, 09:07 PM	#29
zelda_pinwheel zeldinha zippy zeldissima Posts: 27,827 Karma: 921169 Join Date: Dec 2007 Location: Paris, France Device: eb1150 & is that a nook in her pocket, or she just happy to see you?	hm, interesting ! i'll have to try that out.

Advert

Advert