Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 05-08-2009, 12:45 PM   #1
zelda_pinwheel
zeldinha zippy zeldissima
zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.
 
zelda_pinwheel's Avatar
 
Posts: 27,828
Karma: 908606
Join Date: Dec 2007
Location: Paris, France
Device: eb1150 & is that a nook in her pocket, or she just happy to see you?
epub code snippets (html / css)

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.

Last edited by zelda_pinwheel; 05-08-2009 at 01:06 PM.
zelda_pinwheel is offline   Reply With Quote
Old 05-08-2009, 01:01 PM   #2
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,308
Karma: 4898871
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
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;
Jellby is offline   Reply With Quote
Old 05-08-2009, 01:03 PM   #3
zelda_pinwheel
zeldinha zippy zeldissima
zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.
 
zelda_pinwheel's Avatar
 
Posts: 27,828
Karma: 908606
Join Date: Dec 2007
Location: Paris, France
Device: eb1150 & is that a nook in her pocket, or she just happy to see you?
thanks for the clarification jellby !
zelda_pinwheel is offline   Reply With Quote
Old 05-09-2009, 10:52 AM   #4
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,308
Karma: 4898871
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
poetry fragments

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

Last edited by Jellby; 05-09-2009 at 02:22 PM.
Jellby is offline   Reply With Quote
Old 05-10-2009, 06:28 PM   #5
zelda_pinwheel
zeldinha zippy zeldissima
zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.
 
zelda_pinwheel's Avatar
 
Posts: 27,828
Karma: 908606
Join Date: Dec 2007
Location: Paris, France
Device: eb1150 & is that a nook in her pocket, or she just happy to see you?
wrapped non-rectangular images, yeah baby !!

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 :

Click image for larger version

Name:	nonrectangularimage.png
Views:	2063
Size:	111.4 KB
ID:	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 :

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.

Last edited by zelda_pinwheel; 05-10-2009 at 06:31 PM.
zelda_pinwheel is offline   Reply With Quote
Old 05-11-2009, 08:52 PM   #6
brewt
Boo-Frickety-Hoo-Erizer
brewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enough
 
brewt's Avatar
 
Posts: 254
Karma: 686
Join Date: Oct 2007
Device: SONY PRS 350!
My faaaaavorite topic - drop caps in word

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
brewt is offline   Reply With Quote
Old 05-11-2009, 08:55 PM   #7
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,415
Karma: 19135913
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by brewt View Post
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.
JSWolf is online now   Reply With Quote
Old 05-12-2009, 12:37 AM   #8
brewt
Boo-Frickety-Hoo-Erizer
brewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enough
 
brewt's Avatar
 
Posts: 254
Karma: 686
Join Date: Oct 2007
Device: SONY PRS 350!
Quote:
Originally Posted by JSWolf View Post
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
brewt is offline   Reply With Quote
Old 05-12-2009, 08:24 AM   #9
Kirtai
Addict
Kirtai ought to be getting tired of karma fortunes by now.Kirtai ought to be getting tired of karma fortunes by now.Kirtai ought to be getting tired of karma fortunes by now.Kirtai ought to be getting tired of karma fortunes by now.Kirtai ought to be getting tired of karma fortunes by now.Kirtai ought to be getting tired of karma fortunes by now.Kirtai ought to be getting tired of karma fortunes by now.Kirtai ought to be getting tired of karma fortunes by now.Kirtai ought to be getting tired of karma fortunes by now.Kirtai ought to be getting tired of karma fortunes by now.Kirtai ought to be getting tired of karma fortunes by now.
 
Posts: 301
Karma: 2454436
Join Date: Sep 2008
Device: PRS-505, PRS-650, iPad, Samsung Galaxy SII (JB), Google Nexus 7 (2013)
This is such a useful thread
Will this be collated for the wiki once everyone has revealed their deepest darkest css secrets?
Kirtai is offline   Reply With Quote
Old 05-12-2009, 10:08 AM   #10
zelda_pinwheel
zeldinha zippy zeldissima
zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.
 
zelda_pinwheel's Avatar
 
Posts: 27,828
Karma: 908606
Join Date: Dec 2007
Location: Paris, France
Device: eb1150 & is that a nook in her pocket, or she just happy to see you?
Quote:
Originally Posted by brewt View Post
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:
Originally Posted by Kirtai View Post
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 ?
zelda_pinwheel is offline   Reply With Quote
Old 05-12-2009, 02:39 PM   #11
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,308
Karma: 4898871
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by zelda_pinwheel View Post
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:

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

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:
Attached Thumbnails
Click image for larger version

Name:	test.jpg
Views:	1129
Size:	56.2 KB
ID:	28909  
Jellby is offline   Reply With Quote
Old 05-12-2009, 10:48 PM   #12
zelda_pinwheel
zeldinha zippy zeldissima
zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.
 
zelda_pinwheel's Avatar
 
Posts: 27,828
Karma: 908606
Join Date: Dec 2007
Location: Paris, France
Device: eb1150 & is that a nook in her pocket, or she just happy to see you?
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 ).
zelda_pinwheel is offline   Reply With Quote
Old 05-13-2009, 07:38 AM   #13
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,308
Karma: 4898871
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Perhaps this css is better:

Code:
  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.
Jellby is offline   Reply With Quote
Old 05-13-2009, 08:10 AM   #14
gwynevans
Wizard
gwynevans ought to be getting tired of karma fortunes by now.gwynevans ought to be getting tired of karma fortunes by now.gwynevans ought to be getting tired of karma fortunes by now.gwynevans ought to be getting tired of karma fortunes by now.gwynevans ought to be getting tired of karma fortunes by now.gwynevans ought to be getting tired of karma fortunes by now.gwynevans ought to be getting tired of karma fortunes by now.gwynevans ought to be getting tired of karma fortunes by now.gwynevans ought to be getting tired of karma fortunes by now.gwynevans ought to be getting tired of karma fortunes by now.gwynevans ought to be getting tired of karma fortunes by now.
 
gwynevans's Avatar
 
Posts: 1,343
Karma: 1065246
Join Date: Nov 2007
Location: UK
Device: Sony 505 (retired), iPad2, iPhone 3GS & Nexus 7 3G
10% centred bar

From netseeker's post here.

CSS
Code:
<style type="text/css">
  hr.bar10 { width:10%; margin-left:45%; }
</style>
HTML
Code:
<hr class="bar10"/>
Result
Attached Thumbnails
Click image for larger version

Name:	Screenshot - 13_05_2009 , 12_06_16.png
Views:	962
Size:	846 Bytes
ID:	28927  
gwynevans is offline   Reply With Quote
Old 05-13-2009, 08:19 AM   #15
Hadrien
Feedbooks.com Co-Founder
Hadrien understands the importance of being earnest.Hadrien understands the importance of being earnest.Hadrien understands the importance of being earnest.Hadrien understands the importance of being earnest.Hadrien understands the importance of being earnest.Hadrien understands the importance of being earnest.Hadrien understands the importance of being earnest.Hadrien understands the importance of being earnest.Hadrien understands the importance of being earnest.Hadrien understands the importance of being earnest.Hadrien understands the importance of being earnest.
 
Hadrien's Avatar
 
Posts: 2,265
Karma: 145123
Join Date: Nov 2006
Location: Paris, France
Device: Sony PRS-t-1/350/300/500/505/600/700, Nexus S, iPad
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.
Hadrien is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
direkter Umlaut oder lieber HTML Code in Epub ? NASCARaddicted Erste Hilfe 14 06-16-2011 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


All times are GMT -4. The time now is 06:05 PM.


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