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 01-19-2010, 05:43 AM   #61
Chang
Connoisseur
Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!
 
Posts: 87
Karma: 50000
Join Date: Oct 2009
Device: none
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
Chang is offline   Reply With Quote
Old 01-19-2010, 07:04 AM   #62
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: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
You could use padding instead of margin, which is not discarded at pagebreaks. Or you could have empty pagebreak elements thus:

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

Code:
div.pagebreak {
  page-break-before: always;
  height: 0;
  margin: 0;
  padding: 0;
}
Jellby is offline   Reply With Quote
Advert
Old 01-19-2010, 10:27 AM   #63
GeoffC
Chocolate Grasshopper ...
GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.
 
GeoffC's Avatar
 
Posts: 27,600
Karma: 20821184
Join Date: Mar 2008
Location: Scotland
Device: Muse HD , Cybook Gen3 , Pocketbook 302 (Black) , Nexus 10: wife has PW
padding works well ....
GeoffC is offline   Reply With Quote
Old 01-19-2010, 10:53 AM   #64
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: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by GeoffC View Post
padding works well ....
In this case, yes, but not if you have borders or backgrounds (padding goes inside the border, margin goes outside).
Jellby is offline   Reply With Quote
Old 01-21-2010, 03:06 AM   #65
Chang
Connoisseur
Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!
 
Posts: 87
Karma: 50000
Join Date: Oct 2009
Device: none
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!
Chang is offline   Reply With Quote
Advert
Old 01-26-2010, 04:31 PM   #66
darkpoet
ePub Headbanger
darkpoet knows the square root of minus one.darkpoet knows the square root of minus one.darkpoet knows the square root of minus one.darkpoet knows the square root of minus one.darkpoet knows the square root of minus one.darkpoet knows the square root of minus one.darkpoet knows the square root of minus one.darkpoet knows the square root of minus one.darkpoet knows the square root of minus one.darkpoet knows the square root of minus one.darkpoet knows the square root of minus one.
 
darkpoet's Avatar
 
Posts: 47
Karma: 7940
Join Date: Aug 2009
Location: Korea
Device: Boox Poke4 / Sony PRS-505
How to format poetry

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:



At first I tried this
Code:
p.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...
Code:
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.
Attached Thumbnails
Click image for larger version

Name:	TheFoolx.png
Views:	9942
Size:	16.4 KB
ID:	44353  

Last edited by darkpoet; 01-28-2010 at 12:24 PM. Reason: better solution, edited for clarity
darkpoet is offline   Reply With Quote
Old 02-02-2010, 06:37 AM   #67
Chang
Connoisseur
Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!
 
Posts: 87
Karma: 50000
Join Date: Oct 2009
Device: none
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?
Attached Thumbnails
Click image for larger version

Name:	chapters-with-padding.jpg
Views:	1225
Size:	34.7 KB
ID:	44799  

Last edited by Chang; 02-02-2010 at 06:39 AM.
Chang is offline   Reply With Quote
Old 02-02-2010, 07:16 AM   #68
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 71,366
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
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.

Quote:
Originally Posted by Chang View Post
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 is offline   Reply With Quote
Old 02-02-2010, 08:40 AM   #69
Chang
Connoisseur
Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!Chang is faster than a rolling 'o,' stronger than silent 'e,' and leaps capital 'T' in a single bound!
 
Posts: 87
Karma: 50000
Join Date: Oct 2009
Device: none
Quote:
Originally Posted by pdurrant View Post
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.
Chang is offline   Reply With Quote
Old 03-03-2010, 07:18 AM   #70
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
Fiddling with superscripts

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.:
Code:
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.
Attached Files
File Type: epub superscript-test.epub (3.6 KB, 1270 views)
charleski is offline   Reply With Quote
Old 03-03-2010, 08:29 AM   #71
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: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
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.
Jellby is offline   Reply With Quote
Old 03-08-2010, 10:58 PM   #72
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
Quote:
Originally Posted by Jellby View Post
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.
Attached Files
File Type: epub superscript-test.epub (5.6 KB, 980 views)
charleski is offline   Reply With Quote
Old 03-15-2010, 05:50 AM   #73
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 71,366
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Title Pages and Vertical Justification

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.
  1. Add a height: 100% to the html and body elements
  2. Wrap the title page in a div, setting the height of that to 100%
  3. 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.
  4. 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:
Code:
<?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:
Code:
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;
}

Last edited by pdurrant; 03-15-2010 at 05:58 AM.
pdurrant is offline   Reply With Quote
Old 03-15-2010, 12:15 PM   #74
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 71,366
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
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.

https://wiki.mobileread.com/wiki/CSS_HowTo

You can also read this page from the main page through the "HowTo" link under FAQs.
pdurrant is offline   Reply With Quote
Old 03-16-2010, 01:38 AM   #75
jgray
Fanatic
jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.
 
Posts: 547
Karma: 2928497
Join Date: Mar 2008
Device: Clara 2E & Sage
Pseudo Drop Caps

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.

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


All times are GMT -4. The time now is 01:08 AM.


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