01-19-2010, 05:43 AM | #61 |
Connoisseur
Posts: 92
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> In CSS I have just defined that "newpage" class has attribute "page-break-before: always;".<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> 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 |
01-19-2010, 07:04 AM | #62 |
frumious Bandersnatch
Posts: 7,534
Karma: 19000001
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> Code:
div.pagebreak { page-break-before: always; height: 0; margin: 0; padding: 0; } |
Advert | |
|
01-19-2010, 10:27 AM | #63 |
Chocolate Grasshopper ...
Posts: 27,599
Karma: 20821184
Join Date: Mar 2008
Location: Scotland
Device: Muse HD , Cybook Gen3 , Pocketbook 302 (Black) , Nexus 10: wife has PW
|
padding works well ....
|
01-19-2010, 10:53 AM | #64 |
frumious Bandersnatch
Posts: 7,534
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
|
01-21-2010, 03:06 AM | #65 |
Connoisseur
Posts: 92
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! |
Advert | |
|
01-26-2010, 04:31 PM | #66 |
ePub Headbanger
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"> </p> <p class="poem">stanza1 - line1</p> <p class="poem">stanza1 - line2</p> ... 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> </li> <li>stanza1 - 1</li> <li>stanza1 - 2</li> <div class="dontbreak"> <li> </li> <li>stanza2 - 1</li> <li>stanza2 - 2</li> </div><div class="dontbreak"> <li> </li> <li>stanza3 - 1</li> <li>stanza3 - 2</li> </div></ul> Last edited by darkpoet; 01-28-2010 at 12:24 PM. Reason: better solution, edited for clarity |
02-02-2010, 06:37 AM | #67 |
Connoisseur
Posts: 92
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? Last edited by Chang; 02-02-2010 at 06:39 AM. |
02-02-2010, 07:16 AM | #68 | |
The Grand Mouse 高貴的老鼠
Posts: 72,274
Karma: 309000000
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:
|
|
02-02-2010, 08:40 AM | #69 | |
Connoisseur
Posts: 92
Karma: 50000
Join Date: Oct 2009
Device: none
|
Quote:
|
|
03-03-2010, 07:18 AM | #70 |
Wizard
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 } 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. |
03-03-2010, 08:29 AM | #71 |
frumious Bandersnatch
Posts: 7,534
Karma: 19000001
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.
|
03-08-2010, 10:58 PM | #72 | |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
Quote:
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. |
|
03-15-2010, 05:50 AM | #73 |
The Grand Mouse 高貴的老鼠
Posts: 72,274
Karma: 309000000
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.
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> 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. |
03-15-2010, 12:15 PM | #74 |
The Grand Mouse 高貴的老鼠
Posts: 72,274
Karma: 309000000
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. |
03-16-2010, 01:38 AM | #75 |
Fanatic
Posts: 549
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? */ } |
|
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 |