![]() |
#16 | ||
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?
|
Quote:
![]() thanks gwynevans ! Quote:
![]() ![]() |
||
![]() |
![]() |
![]() |
#17 |
Lector minore
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 652
Karma: 1738720
Join Date: Jan 2008
Device: Aura One, Paperwhite Signature
|
|
![]() |
![]() |
Advert | |
|
![]() |
#18 |
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?
|
|
![]() |
![]() |
![]() |
#19 |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,527
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
wrapped non-rectangular images
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—' 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>
Now the question is, is javascript part of ePUB? ![]() |
![]() |
![]() |
![]() |
#20 |
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 !) |
![]() |
![]() |
Advert | |
|
![]() |
#21 | |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,527
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
![]() 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." Last edited by Jellby; 05-14-2009 at 10:39 AM. |
|
![]() |
![]() |
![]() |
#22 |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,527
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
... 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> ![]() |
![]() |
![]() |
![]() |
#23 |
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?
|
|
![]() |
![]() |
![]() |
#24 |
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; } 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; } |
![]() |
![]() |
![]() |
#25 |
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?
|
multi-part non-rectangular image wrap !!
here's an image i wrapped with 3 divs, just to see if it could be done. it turns out, it can.
![]() 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> 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; } |
![]() |
![]() |
![]() |
#26 |
Lector minore
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 652
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> SMALLCAPS at the beginning of a paragraph. Last edited by radius; 05-25-2009 at 04:35 PM. |
![]() |
![]() |
![]() |
#27 |
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; } |
![]() |
![]() |
![]() |
#28 |
The Grand Mouse 高貴的老鼠
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 72,047
Karma: 307935764
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
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> |
![]() |
![]() |
![]() |
#29 |
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.
|
![]() |
![]() |
![]() |
#30 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,663
Karma: 134319570
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
direkter Umlaut oder lieber HTML Code in Epub ? | NASCARaddicted | Erste Hilfe | 14 | 06-16-2011 05:54 AM |
Programming language code snippets in ebooks? | Connochaetes | Writers' Corner | 7 | 10-18-2010 02:43 PM |
ebook-convert HTML to EPUB and problem with <pre><code> | mikegr | Calibre | 2 | 03-09-2010 02:27 PM |
css override code for margins? | Amalthia | Calibre | 15 | 08-11-2009 07:20 PM |
Problems generating ePub from HTML/CSS | AlexBell | Calibre | 3 | 07-17-2009 05:10 AM |